שלמה גולדברג
shlomo@haravdotnet.co.ilבפרק הקודם למדנו על עבודה עם מערכת ה – Grid system המאפשרת לנו לכתוב בצורה לוגית של טבלאות (שורות ועמודות) ומצד שני לעבוד עם div ולוודא תמיכה ברזולוציות שונות.
היום נלמד להכיר את אחד מהאלמנטים הנחמדים של הספריה בשם Panels המאפשרים בצורה יחסית קלה להגדיר Container עם עיצוב בסיסי ויפה, על הדרך נכיר מספר מחלקות בסיסיות נוספות לעיצוב ונעשה חזרה קצרה בשימוש ב – Grid system.
נסתכל על דוגמת הקוד הבאה:
<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 bla bla
<br />
<div class="pull-right">
<button class="btn btn-default">Go!</button>
</div>
</div>
</div>
</div>
</div>
לפני ההסבר, איך זה נראה:
שימו לב לכמות הכתיבה המועטת, מול התוצאה הנהדרת.
ההסבר, ראשית השתמשנו במחלקות row ו – col כדי להגדיר שהרוחב יתפוס חצי מהמקום הפנוי במצב של md או lg (כזכור אם הוגדר md זה יתפוס גם ל – lg אלא אם כן יוגדר אחרת), במצב קטן יותר, זה יתפוס את כל רוחב המסך.
לאחר מכן הגדרנו div עם מחלקה בשם panel ולאחריו את סוג העיצוב, להלן האופציות:
- panel-default
- panel-danger
- panel-info
- panel-primary
- panel-success
- panel-warning
כל אלו משפיעים על הצבעים של ה – panel.
בתוכו הגדרנו שני אלמנטים, אחד עם panel-heading שמגדיר את הכותרת, והשני עם panel-body שמגדיר את התוכן.
מעבר לכך, בתוך ה – panel-heading הגדרנו span עם מספר מחלקות.
- pull-right – שמגדיר הצמדה לימין.
- glyphicon glyphicon-edit – שמגדיר אייקון, במקרה הזה של עריכה (המיוחד באייקונים מהסוג הזה – פונטים – שהם יגדלו ויקטנו לפי הערך של font-size, והצבע שלהם ישתנה לפי הערך של color, מה שאומר שהם יושפעו מהגדרת העיצוב של ה – panel)
בתוך ה – panel-body, הוספנו לחצן עם המחלקה btn btn-default (גם כן יש את אוסף הגדרת מאפייני העיצוב – primary, info ועוד) שהופך את הלחצן לאחד עם עיצוב יפה יותר.
נכתוב דוגמת קוד מלאה יותר
<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 bla bla
<br />
bla bla bla bla bla
<br />
bla bla bla bla bla
<br />
bla bla bla bla bla
<br />
<div class="pull-right">
<button class="btn btn-default">Go!</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-warning">
<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 bla bla
<br />
bla bla bla bla bla
<br />
bla bla bla bla bla
<br />
bla bla bla bla bla
<br />
<div class="pull-right">
<button class="btn btn-warning">Go!</button>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="panel panel-danger">
<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 bla bla
<br />
bla bla bla bla bla
<br />
bla bla bla bla bla
<br />
bla bla bla bla bla
<br />
<div class="pull-right">
<button class="btn btn-danger">Go!</button>
</div>
</div>
<div class="panel-footer">
This is the footer
</div>
</div>
</div>
</div>
במצב של md או lg המסך ייראה כך:
שימו לב לשינויים בצבעים (של המסגרת, האייקון, והלחצן), בנוסף עבור ה – panel האחרון יש גם שימוש ב – panel-footer שמאפשר להגדיר חלק תחתון.
במסכים קטנים יותר, זה ייראה כך:
כפי שאפשר לראות, כרגע כל האלמנטים תופסים שורה מלאה, ולא רק התחתון.
מספר מחלקות נוספות:
- panel-title – לשימוש בתוך ה – panel-heading להגדרת הטקסט לכותרת.
- panel-group – לאפשר מספר panels עם רווח קטן יותר ביניהם.
- panel-collapse – שלא נסביר כרגע, רק נציין שהוא מגיע לשלילוב עם טבלאות או רשימות.
בפרק הבא נלמד להכיר עבודה עם טבלאות.