מערכת ברירת המחדל המסופקת כחלק מ-Bootstrap היא רשת ברוחב 940 פיקסלים, 12 עמודות .

יש לו גם ארבע וריאציות רספונסיביות עבור מכשירים ורזולוציות שונות: טלפון, טאבלט לאורך, שולחן לרוחב ומחשבים שולחניים קטנים ומחשבים שולחניים עם מסך רחב.

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

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

עם מערכת הרשת הסטטית (לא נוזלית) ב-Bootstrap, הקינון קל. כדי לקנן את התוכן שלך, פשוט הוסף קבוצה חדשה .rowוקבוצה של .span*עמודות בתוך עמודה קיימת .span*.

דוגמא

שורות מקוננות צריכות לכלול קבוצה של עמודות שמצטברות למספר העמודות של האב שלה. לדוגמה, .span3יש למקם שתי עמודות מקוננות בתוך .span6.

<div class = "row" > 
  <div class = "span12" > 
    רמה 1 של העמודה
    <div class = "row" > 
      <div class = "span6" > רמה 2 </div> 
      <div class = "span6" > רמה 2 </div> 
    </div>
  </div>
</div>

אחוזים, לא פיקסלים

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

שורות נוזלים

הפוך כל שורה נוזלית פשוט על ידי שינוי .rowל .row-fluid. העמודות נשארות זהות בדיוק, מה שהופך את זה לפשוט מאוד לעבור בין פריסות קבועות לזורמות.

סימון

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

קינון עם רשתות נוזלים הוא קצת שונה: מספר העמודות המקוננות אינו צריך להתאים לאורה. במקום זאת, העמודות שלך מאופסות בכל רמה מכיוון שכל שורה תופסת 100% מעמודת האב.

<div class = "row-fluid" > 
  <div class = "span12" > 
    רמה 1 של העמודה
    <div class = "row-fluid" > 
      <div class = "span6" > רמה 2 </div> 
      <div class = "span6" > רמה 2 </div> 
    </div>
  </div>
</div>

משתנים ב-LESS

מובנים ב-Bootstrap קומץ משתנים להתאמה אישית של מערכת ברירת המחדל של 940px, המתועדת לעיל. כל המשתנים עבור הרשת מאוחסנים ב- variables.less.

כיצד להתאים אישית

שינוי הרשת פירושו שינוי שלושת @grid*המשתנים והידור מחדש של Bootstrap. שנה את משתני הרשת ב-variables.less והשתמש באחת מארבע הדרכים שתועדו להידור מחדש . אם אתה מוסיף עוד עמודות, הקפד להוסיף את ה-CSS עבור אלה ב-grid.less.

נשאר רספונסיבי

התאמה אישית של הרשת פועלת רק ברמת ברירת המחדל, רשת 940px. כדי לשמור על ההיבטים הרספונסיביים של Bootstrap, תצטרך גם להתאים אישית את הרשתות ב-responsive.less.

פריסה קבועה

פריסת ברירת המחדל והפשוטה ברוחב 940 פיקסלים, מרוכזת כמעט עבור כל אתר או דף שסופק על ידי יחיד <div class="container">.

<גוף>
  <div class = "container" > 
    ...
  </div>
</body>

פריסה נוזלית

<div class="container-fluid">נותן מבנה עמוד גמיש, רוחב מינימלי ומקסימלי וסרגל צד שמאלי. זה נהדר עבור אפליקציות ומסמכים.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--תוכן סרגל צד-->
    </div>
    <div class = "span10" > 
      <!--תוכן גוף-->
    </div>
  </div>
</div>

מכשירים נתמכים

Bootstrap תומך בקומץ של שאילתות מדיה בקובץ אחד כדי לעזור להפוך את הפרויקטים שלך למתאימים יותר במכשירים וברזולוציות מסך שונות. הנה מה שכלול:

דורש מטא תג

כדי להבטיח שמכשירים מציגים דפים רספונסיביים כראוי, כלול את המטא תג של viewport.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  

מה שהם עושים

שאילתות מדיה מאפשרות CSS מותאם אישית בהתבסס על מספר תנאים - יחסים, רוחבים, סוג תצוגה וכו' - אך בדרך כלל מתמקדת סביב min-widthו max-width.

• שנה את רוחב העמודה ברשת שלנו
• ערמו אלמנטים במקום לצוף בכל מקום שצריך
• שנה את גודל הכותרות והטקסט כך שיתאימו יותר למכשירים

Bootstrap אינו כולל אוטומטית את שאילתות המדיה הללו, אך ההבנה וההוספה שלהן קלה מאוד ודורשת הגדרה מינימלית. יש לך כמה אפשרויות לכלול את התכונות הרספונסיביות של Bootstrap:

1. השתמש בגרסה הרספונסיבית המהידור, bootstrap-responsive.css
2. הוסף @import "responsive.less" והידור מחדש של Bootstrap
3. שנה וקומפילציה מחדש של responsive.less כקובץ נפרד

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

  // טלפונים נוף ומטה
  @media ( מקסימום רוחב : 480px ) { ... } _     
 
  // טלפון לרוחב לטאבלט לאורך
  @media ( מקסימום רוחב : 768px ) { ... } _     
 
  // טאבלט לאורך לרוחב ולשולחן העבודה
  @media ( מינימום רוחב : 768 פיקסלים ) ו- ( מקסימום רוחב : 980 פיקסלים ) { ... }        
 
  // שולחן עבודה גדול
  @media ( מינימום רוחב : 1200px ) { .. } _