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

18 באוקטובר 2015

תגיות: , , ,
3 תגובות

לתוכן העניינים.

 

בפרק הקודם, למדנו על Panels ותוך כדי עשינו חזרה על ה – Grid System, היום נראה מה נקבל בעבודה עם טבלאות פשוטות.

כפי שדברנו בהקדמה, ובפרקים הראשונים כשעסקנו בעבודה עם ה – Grid System, הבנו שלא נכון לעמד את המסך בעזרת טבלאות ותתי טבלאות, אלא עם Div, אמנם עדיין יש שימוש בטבלאות, כגון תצוגה של סיכומים, או עבודה עם גרידים (רגילים, המאפשרים מיון, חיפוש וכדו’).

כדי לקבל עיצוב נחמד ועדין לטבלאות, נוסיף את המחלקה (class) בשם table לאלמנט ה – table שלנו, בנוסף נוכל להוסיף את אחד מהמחלקות הבאות:

  • table-striped – נותן צבע רקע שונה לשורות. (לא זמין ב – IE8)
  • table-bordered – נקבל border מסביב לכל העמודות.
  • table-hover – צבע רקע כשהעכבר יעבור על שורה.
  • table-condensed – כדי לצמצם את גובה כל שורה בחצי (מאפשר לראות יותר שורות בבת אחת, רלוונטי לטבלאות עם הרבה נתונים).

 

בשונה מעבודה עם Div שניתן בעזרת Grid System לשנות את כמות התוכן המוצגת ברוחב ולהוריד אותם כלפי מטה, בעבודה עם טבלאות (במידע טבלאי) אנחנו לא אמורים להוריד עמודות כלפי מטה – תחשבו על טבלה המציגה ציונים, לא ניתן להוריד חלק מהעמודות לשורות הבאות, ולכן ייתכן מצב בו נקבל scrollbar למסך, כדי למנוע זאת, ניתן לעטוף את הטבלה (כלומר div שעוטף את אלמנט ה – table) שיקבל את המחלקה table-responsive, כעת הטבלה עצמה תקבל את ה – scrollbar ולא כל המסך.

 

בפרק הבא נלמד על עבודה עם תמונות.

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

3 תגובות

  1. אברהם23 באוקטובר 2015 ב 13:49

    כל הכבוד!
    תודה רבה!

    הגב
  2. אברהם4 בנובמבר 2015 ב 9:38

    שכויח על כל המדריכים שלך!!
    אתה מסביר בצורה בהירה ויפה!

    במה אתה ממליץ אם אני רוצה להציג למשתמש מידע שהוא מחפש בדטה בייס בטבלה, אך אני צריך משהו כמו datagrid שבWPF. ואני רוצה להציג לו 20 שורות בעמוד, ושיהיה לו סרגל גלילה בין העמודות.. (כמו בaccess לדוג')?
    תודה רבה!

    הגב
    1. אברהם16 בנובמבר 2015 ב 21:06

      מצאתי את זה: http://datatables.net/
      ספריה מעולה וחינמית!

      הגב