Bootstrap – המדריך – פרק 8 – עבודה עם רשימות

יום ראשון, ינואר 10, 2016

לתוכן העניינים בפרק הקודם למדנו על עטיפה בשם Well, בפרק זה נלמד מה הספרייה מספקת לנו כשנבוא להציג רשימות. שפת Html מאפשרת שלושה סוגי רשימות: UL – שהיא המוכרת ביותר, המציגה רשימת בלתי ממוספרת (כלומר עם בולטים וכדו’) OL – המציגה רשימה ממסופרת (מספרית או אחר). DL – המציגה רשימה של כותרת תוכן (בעזרת תגיות – dt, dd)   לספרייה יש מספר עזרים כשנרצה להציג רשימות, הפשוטה ביותר לשימוש היא המחלקה list-group על תגית ul, ומחלקת list-group-item על תגיות ה – li, מחלקות אלו ייתנו עיצוב נחמד לרשימה, הקוד ייראה כך: Code Snippet <ul class="list-group"> <li class="list-group-item">Shlomo Goldberg</li> <li class="list-group-item">Asher Mark <span class="badge">10</span></li> <li class="list-group-item">Tomer Kisar</li> <li class="list-group-item">Meir Choen</li> </ul> שימו לב שעל הדרך...
אין תגובות

Bootstrap – המדריך – פרק 7 – עבודה עם WELL

יום שני, ינואר 4, 2016

  לתוכן העניינים   בפרק הקודם למדנו על עבודה עם תמונות, היום נכיר את אחת מהעטיפות הנוחות של הספרייה לאלמנטים במסך. למעשה הוא הוא די פשוט, כל div שתתנו לו את המחלקה well יקבל צבע רקע אפור שמתחלף בהדרגה לאפור בהיר יותר, האלמנט הזה נותן הרגשה מאוד נעימה לעין, ומאפשר לתת רקע יפה לאלמנטים שונים, כמו לטפסים וכד’, ישנם שלושה סוגי well. well – רגיל ייתן עטיפה של הצבע. well well-lg - כנ”ל אך נותן יותר רווח בשוליים. well well-sm – כנ”ל אך נותן רווח מצומצם יותר בשוליים   דוגמת קוד: Code Snippet <div class="well"> Bla bla bla bla bla bla bla <br /> <div class="text-success"> Bla bla bla bla bla bla bla <br...
תגובה אחת

Bootstrap – המדריך – פרק 5 – עבודה עם Tables

יום ראשון, אוקטובר 18, 2015

לתוכן העניינים.   בפרק הקודם, למדנו על Panels ותוך כדי עשינו חזרה על ה – Grid System, היום נראה מה נקבל בעבודה עם טבלאות פשוטות. כפי שדברנו בהקדמה, ובפרקים הראשונים כשעסקנו בעבודה עם ה – Grid System, הבנו שלא נכון לעמד את המסך בעזרת טבלאות ותתי טבלאות, אלא עם Div, אמנם עדיין יש שימוש בטבלאות, כגון תצוגה של סיכומים, או עבודה עם גרידים (רגילים, המאפשרים מיון, חיפוש וכדו’). כדי לקבל עיצוב נחמד ועדין לטבלאות, נוסיף את המחלקה (class) בשם table לאלמנט ה – table שלנו, בנוסף נוכל להוסיף את אחד מהמחלקות הבאות: table-striped – נותן צבע רקע שונה לשורות. (לא זמין ב – IE8) table-bordered...
תגיות: , , ,
3 תגובות

Bootstrap – המדריך – פרק 4 – עבודה עם Panels

יום חמישי, יולי 30, 2015

לתוכן העניינים בפרק הקודם למדנו על עבודה עם מערכת ה – Grid system המאפשרת לנו לכתוב בצורה לוגית של טבלאות (שורות ועמודות) ומצד שני לעבוד עם div ולוודא תמיכה ברזולוציות שונות. היום נלמד להכיר את אחד מהאלמנטים הנחמדים של הספריה בשם Panels המאפשרים בצורה יחסית קלה להגדיר Container עם עיצוב בסיסי ויפה, על הדרך נכיר מספר מחלקות בסיסיות נוספות לעיצוב ונעשה חזרה קצרה בשימוש ב – Grid system.   נסתכל על דוגמת הקוד הבאה: Code Snippet <div class="row"> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> This is Header <span class="pull-right glyphicon glyphicon-edit"></span> </div> <div class="panel-body"> bla bla bla bla bla <br /> bla bla bla bla bla <br /> bla bla bla bla bla <br /> bla bla bla...
תגיות: , , , ,
אין תגובות

Bootstrap – המדריך – פרק 3 – הגדרת תפריטים ושימוש במערכת הגרידים.

יום חמישי, יולי 16, 2015

לתוכן העניינים. בפרק הקודם ראינו את המסך הראשון שלנו תוך שימוש בספרייה, הכרנו מספר מחלקות ודברנו על ארבעת הגדלים הנתמכים.   היום נראה כיצד להגדיר תפריט ולהשתמש ב – Grid System של הספרייה. (הקוד בדוגמאות, מתבסס שיש לכם את ה – starter מהפרקים הקודמים) Grid System. כפי שדברנו בהקדמה, אחד הבעיות שהספרייה באה לפתור זה העימוד של התוכן בעזרת טבלאות שזה לוגי יותר אבל שגוי מכל בחינה שהיא, בעזרת ה – Grid System נוכל לעמד בעזרת שימוש ב – div אבל נחשוב לוגית על שורות ועמודות. אלו המחלקות שאנחנו צריכים להכיר: row – מתאר שורה שניתנת לחלוקה ל – 12 עמודות. col-resolution-width – מתאר עמודה בתוך שורה,...
תגיות: , , , ,
אין תגובות

Content property – CSS3

יום רביעי, ינואר 2, 2013

המאפיין content ב – css3 מאפשר לכתוב טקסטים בעזרת css. לכאורה זה נראה מוזר, למה צריך לכתוב טקסטים בעזרת css, בהמשך נראה שזה יכול לחסוך הרבה עבודה ב – JS, וגם לאפשר לעשות דברים שאי אפשר אחרת. ראשית נכיר חלק מהאופציות לכתיבה. המאפיין content יכול לבוא רק עם selctor של after או before, ה – selctor-ים הללו, מאפשרים לעצב מה יהיה לפני או אחרי האלמט, לדוגמא: ...
תגיות: , , , ,
2 תגובות

details and summary – html5

יום שבת, דצמבר 29, 2012

בעבר כתבתי על חלק מהאלמנטים החדשים של HTML5, אחד מהאלמנטים הינו details שמאפשר להגדיר חלק ב – UI שיהיה collapsable, כך:   <details>     <summary>This is a summary</summary>     <ul>         <li>Item 1</li>         <li>Item 2</li> ...
תגיות: , , , ,
אין תגובות

background-position RTL jQuery plugin

יום שלישי, אוקטובר 25, 2011

כיצד להגדיר background-position כשמדובר באתרים עם rtl ?    התחלתי לעצב אתר כשקבלתי עיצוב מותאם לאנגלית והייתי צריך לשנות אותו לעברית,   על ההתחלה נתקלתי בבעייה הבאה:   נקח לדוגמא את ה - css הבא:     body {     background-image: url('Penguins.jpg');     background-repeat: repeat-y;     background-position-x: 30px; }   css פשוט ביותר שיגרום לתמונה מסויימת להתחיל בשלושים פיקסל ימינה, מה יקרה עם נוסיף את השורה הבאה:     direction: rtl;   האתר יעבור לצד ימין, כשתמונת הרקע נשארה תקועה בצד שמאל, בעוד שהכוונה כרגע שמצד ימין של האתר יהיה רווח של שלושים פיקסל לשמאל.   (פתרון ביניים הוא לעבוד באחוזים (95%) אבל במקרה כזה מיקום התמונה עלול להשתנות בשינוי גודל החלון) ב - css3 כבר תיקנו את הבעייה על ידי הקוד...
תגיות: , , , , , , ,
אין תגובות

text-shadow CSS3

יום שני, אפריל 11, 2011

  כחלק מהתקן של CSS3 הגיע מאפיין חדש בשם text-shadow שמגדיר צל עבור טקסט.   div {     font-family: Arial;     font-size: 55px;     width: 250px;     height: 250px;     border: 1px solid black;     margin: 20px;     padding: 20px;     text-shadow: rgba(0,0,0,0.7) -1px -1px,                 rgba(0,0,0,0.5) -2px -2px,                 rgba(0,0,0,0.3) -3px -3px;     background-color: Yellow; }     <div>     Sela College Channel </div>      בדוגמא אפשר לראות שמוגדר כמה שבות של צל. התוצאה של הקוד הזה:       נכון להיום זה עדיין לא נתמך ב - IE, נקווה שהם יתמכו בזה בקרוב.
תגיות: , , , ,
אין תגובות

background CSS3

יום ראשון, אפריל 10, 2011

  מהם השינויים במאפיין background בתקן CSS3     כחלק מהתקן של CSS3 נכנסו מספר שינויים במאפיין background, חלקם כבר ממומשים וחלקם עדיין לא.   בפוסט זה אני אתאר את חלק מהמאפיניים החדשים הממומשים בו.     מאפיינים: box-shadowsizeImageclipattachment     box-shadow מאפיין זה נותן את היכולת לתת צל לכל אלמנט בעמוד, הוא מקבל ששה פרמטרים:   מספר מה ההפרש לצד ימין (או לשמאל אם מדובר במספר הקטן מ - 0) מהאלמנט עצמו. מספר מה ההפרש למטה (או למעלה אם מדובר במספר הקטן מ - 0) מהאלמנט עצמו. מספר המאפיין את עוצמת הטישטוש של הצל. מספר המציין את ההתפשטות של הצל. צבע הצל. פרמטר בשם inset המגדיר האם הצל הוא חיצוני לאלמנט או בתוך האלמנט.     שני המאפיינים הראשונים הם חובה, השאר...
תגיות: , ,
2 תגובות