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

בפרק הקודם ראינו את המסך הראשון שלנו תוך שימוש בספרייה, הכרנו מספר מחלקות ודברנו על ארבעת הגדלים הנתמכים.

היום נראה כיצד להגדיר תפריט ולהשתמש ב – Grid System של הספרייה. (הקוד בדוגמאות, מתבסס שיש לכם את ה – starter מהפרקים הקודמים)

Grid System.

כפי שדברנו בהקדמה, אחד הבעיות שהספרייה באה לפתור זה העימוד של התוכן בעזרת טבלאות שזה לוגי יותר אבל שגוי מכל בחינה שהיא, בעזרת ה – Grid System נוכל לעמד בעזרת שימוש ב – div אבל נחשוב לוגית על שורות ועמודות.

אלו המחלקות שאנחנו צריכים להכיר:

• row – מתאר שורה שניתנת לחלוקה ל – 12 עמודות.
• col-resolution-width – מתאר עמודה בתוך שורה, כש – resolution יכול להיות אחד מהגדלים הרלונטיים (xs, sm, md, lg) ו – width יכול להיות מספר בין 1-12, לדוגמא (col-sm-6, col-lg-4)
• col-resolution-offset-width – מתאר כמה להזיז עמודה. (לדוגמה – col-sm-offset-3)

אנחנו נכתוב את התוכן שלנו בתוך “שורות” כלומר div class=row, בפנים נכניס “עמודות” כלומר div עם מחלקות שיתארו כמה גודל לתפוס עבור כל רזולוציה, למשל:

בתוך ה – div class=container יש לנו div עם המחלקה row, שמייצגת עבורנו שורה, בפנים שמנו שני אלמנטי div, אחד עבור התפריט והשני עבור התוכן, להלן ההגדרות ששמנו עבור הרזולוציות הבאות:

• xs – התפריט יעלם, ואילו התוכן יתפוס את כל הרוחב (למעשה זהו ברירת המחדל כך שאת זה לא היינו באמת חייבים לכתוב)
• sm – התפריט יתפוס שליש (4 מתוך 12) והתוכן יתפוס שני שליש.
• md – התפריט יתפוס רבע (3 מתוך 12) והתוכן יתפוס שלושה רבעים.
• lg – כמו md, (למעשה כל רזולוציה שלא מגדירים אותה מקבלת את ההגדרות של הקטנה יותר.

נמלא את התפריט בתוכן, במקום המילים The Menu, נשים את הקוד הבא:

הסבר על המחלקות שהשתמשנו בהם:

• nav – מגדיר את ה – ul כתפריט.
• nav-pills – נותן מסגרת מעוגלת לכל אלמנט.
• nav-stacked – מגדיר שכל אלמנט בתפריט יתפוס את הרוחב במקסימלי שהוא יכול (אם נרצה למשל תפריט עליון במקום צידי, נוריד את המחלקה הזו)
• active – גורם לאלמנט אחד להיות מסומן כנוכחי.

צילום המסך:

אם כתבתם את הדמו, תוכלו לשחק עם רוחב המסך ולגלות עד כמה זה מתחיל להיות קל לכתוב מסכים מותאמים עבור רזולוציות שונות.

בפרק הבא נלמד על Panel ועל הדרך נתרגל את ה – Grid System.