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

16 ביולי 2015

תגיות: , , , ,
אין תגובות

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

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

 

היום נראה כיצד להגדיר תפריט ולהשתמש ב – 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 עם מחלקות שיתארו כמה גודל לתפוס עבור כל רזולוציה, למשל:

Code Snippet
<div class="container">
<div class="page-header">
<h1>Bootstrap demo <small>By Haravdotnet</small></h1>
</div>
<div class="row">
<div class="hidden-xs col-sm-4 col-md-3">
The Menu
</div>
<div class="col-xs-12 col-sm-8 col-md-9">
The Content
</div>
</div>
</div>

 

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

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

 

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

Code Snippet
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="../Pages/Hello.aspx">Hello World</a></li>
<li><a href="../Pages/Panels.aspx">Panesl</a></li>
<li><a href="../Pages/Tables.aspx">Tables</a></li>
<li><a href="../Pages/img.aspx">Images</a></li>
<li><a href="../Pages/Well.aspx">Well</a></li>
<li><a href="../Pages/LG.aspx">List Group</a></li>
<li><a href="../Pages/Alerts.aspx">Alerts</a></li>
<li><a href="../Pages/Forms.aspx">Forms</a></li>
<li><a href="../Pages/Forms2.aspx">Forms 2</a></li>
<li><a href="../Pages/Forms3.aspx">Forms (misc)</a></li>
</ul>

 

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

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

 

צילום המסך:

image

 

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

 

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

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

כתיבת תגובה

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