שלמה גולדברג
shlomo@haravdotnet.co.ilבפרק הקודם למדנו על עטיפה בשם Well, בפרק זה נלמד מה הספרייה מספקת לנו כשנבוא להציג רשימות.
שפת Html מאפשרת שלושה סוגי רשימות:
- UL – שהיא המוכרת ביותר, המציגה רשימת בלתי ממוספרת (כלומר עם בולטים וכדו’)
- OL – המציגה רשימה ממסופרת (מספרית או אחר).
- DL – המציגה רשימה של כותרת תוכן (בעזרת תגיות – dt, dd)
לספרייה יש מספר עזרים כשנרצה להציג רשימות, הפשוטה ביותר לשימוש היא המחלקה list-group על תגית ul, ומחלקת list-group-item על תגיות ה – li, מחלקות אלו ייתנו עיצוב נחמד לרשימה, הקוד ייראה כך:
<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>
שימו לב שעל הדרך שמנו באחד מהפריטים את המחלקה badge, זה יצמיד את הטקסט לצד ימין, וייתן לו עיצוב עגול (מתאים מאוד לרשימת משימות, הודעות וכדו’)
אם רוצים ניתן לתת את list-group על div ואת list-group-item על אלמנט מסוג a, ואז ניתן יהיה לקבל סימן של מעבר עכבר (או לתת את המחלקה active)
<a href="#" class="list-group-item">Shlomo Goldberg</a>
<a href="#" class="list-group-item active">Asher Mark <span class="badge">10</span></a>
<a href="#" class="list-group-item">Tomer Kisar</a>
<a href="#" class="list-group-item">Meir Choen</a>
</div>
שימו לב שהשורה השנייה בצבע אפור חלש – מכיוון שהעכבר כרגע על שורה זו.
ניתן להוסיף מחלקות כמו disabled או list-group-item-danger וכדו’.
במידה והולכים על div, ניתן לקחת זאת צעד קדימה ולכתוב משהו בסגנון הבא:
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Shlomo Goldberg</h4>
<p class="list-group-item-text">
Bla bla bla bla bla bla bla <br />
Bla bla bla bla bla bla bla <br />
</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Asher Mark</h4>
<p class="list-group-item-text">
Bla bla bla bla bla bla bla <br />
Bla bla bla bla bla bla bla <br />
</p>
</a>
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Tomer Kisar</h4>
<p class="list-group-item-text">
Bla bla bla bla bla bla bla <br />
Bla bla bla bla bla bla bla <br />
</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Meir Choen</h4>
<p class="list-group-item-text">
Bla bla bla bla bla bla bla <br />
Bla bla bla bla bla bla bla <br />
</p>
</a>
</div>
כעת כל אלמנט מכיל כותרת (h4) עם המחלקה list-group-item-heading, ותוכן (p) עם המחלקה list-group-item-text, התוצאה נראית כך:
גם dl לא מקופח, אם נשתמש ב – dl הספרייה תעצב אותם בצורה יפה, אך אם ניתן את המחלקה dl-horizontal הספרייה תעצב אותם בטורים, אך ברגע שנגיע למצב של sm, העיצוב יחזור לצורתו הרגילה (כלומר אנכי).
בפרק הבא נלמד על הודעות