מערכת רשת

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

איך זה עובד

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

חדש או לא מכיר את flexbox? קרא את המדריך הזה ל-CSS Tricks flexbox לקבלת רקע, מינוחים, הנחיות וקטעי קוד.

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

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

אם תפרט את זה, הנה איך זה עובד:

• מיכלים מספקים אמצעי למרכז ולרפד אופקית את תוכן האתר שלך. השתמש .containerברוחב פיקסל מגיב או .container-fluidעבור width: 100%כל גדלי התצוגה והמכשירים.
• שורות הן עטיפות עבור עמודות. לכל עמוד יש אופקי padding(נקרא מרזב) לשליטה על הרווח ביניהם. לאחר paddingמכן מתמודדים עם זה בשורות עם שוליים שליליים. בדרך זו, כל התוכן בעמודות שלך מיושר ויזואלית בצד שמאל.
• בפריסת רשת, תוכן חייב להיות ממוקם בתוך עמודות ורק עמודות עשויות להיות ילדים מיידיים של שורות.
• הודות ל-flexbox, עמודות רשת ללא הגדרה מוגדרת יתפרסו widthאוטומטית כעמודות ברוחב שווה. לדוגמה, ארבעה מופעים של .col-smכל אחד יהיו באופן אוטומטי ברוחב של 25% מנקודת השבירה הקטנה ומעלה. עיין בסעיף עמודות פריסה אוטומטית לקבלת דוגמאות נוספות.
• מחלקות עמודות מציינות את מספר העמודות שבהן תרצה להשתמש מתוך 12 האפשרויות בכל שורה. לכן, אם אתה רוצה שלוש עמודות ברוחב שווה, אתה יכול להשתמש ב- .col-4.
• עמודות widthמוגדרות באחוזים, כך שהן תמיד נוזליות וגודלן ביחס לאלמנט האב שלהן.
• לעמודות יש אופקי paddingכדי ליצור את המרזבים בין עמודות בודדות, עם זאת, ניתן להסיר את marginהשורות paddingומעמודות עם .no-guttersה- .row.
• כדי להפוך את הרשת למגיבה, ישנן חמש נקודות עצירה לרשת, אחת לכל נקודת עצירה מגיבה : כל נקודות השבירה (קטנות במיוחד), קטנות, בינוניות, גדולות וגדולות במיוחד.
• נקודות עצירה של רשת מבוססות על שאילתות מדיה ברוחב מינימלי, כלומר הן חלות על נקודת עצירה אחת ועל כל אלה שמעליה (למשל, .col-sm-4חלות על מכשירים קטנים, בינוניים, גדולים וגדולים במיוחד, אך לא על xsנקודת השבירה הראשונה).
• אתה יכול להשתמש במחלקות רשת מוגדרות מראש (כמו .col-4) או Sass mixins עבור סימון סמנטי יותר.

היו מודעים למגבלות ולבאגים סביב flexbox , כמו חוסר היכולת להשתמש ברכיבי HTML מסוימים בתור מיכלי flex .

אפשרויות רשת

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

ראה כיצד היבטים של מערכת הרשת Bootstrap פועלים על פני מספר מכשירים באמצעות טבלה שימושית.

פריסה אוטומטית של עמודות

השתמש במחלקות עמודות ספציפיות לנקודת עצירה עבור גודל עמודות קל ללא מחלקה ממוספרת מפורשת כמו .col-sm-6.

ברוחב שווה

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

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ניתן לחלק עמודות ברוחב שווה למספר שורות, אבל היה באג ב-Safari flexbox שמנע מזה לעבוד ללא מפורש flex-basisאו border. ישנן דרכים לעקיפת הבעיה עבור גרסאות דפדפן ישנות יותר, אך הן לא אמורות להיות נחוצות אם אתה מעודכן.

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

הגדרת רוחב עמודה אחת

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

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

תוכן ברוחב משתנה

השתמש col-{breakpoint}-autoבמחלקות כדי להתאים עמודות בהתאם לרוחב הטבעי של התוכן שלהן.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

ריבוי שורות ברוחב שווה

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

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

שיעורים רספונסיביים

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

כל נקודות השבירה

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

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

מוערמים לאופקי

באמצעות קבוצה אחת של .col-sm-*מחלקות, אתה יכול ליצור מערכת גריד בסיסית שמתחילה בערימה והופכת אופקית בנקודת השבירה הקטנה ( sm).

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

לערבב ולהתאים

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

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

יישור

השתמש בכלי עזר ליישור flexbox ליישור עמודות אנכית ואופקית.

יישור אנכי

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

יישור אופקי

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

אין מרזבים

ניתן להסיר את המרזבים בין העמודות במחלקות הרשת המוגדרות מראש שלנו באמצעות .no-gutters. זה מסיר את ה- margins השליליים מהעמודות .rowהאופקיות paddingמכל עמודות הילדים המיידיות.

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

זקוק לעיצוב מקצה לקצה? זרוק את ההורה .containerאו .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

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

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

עטיפת עמודות

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

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

מעברי עמודות

שבירת עמודות לשורה חדשה ב-flexbox דורשת פריצה קטנה: הוסף אלמנט עם width: 100%היכן שתרצה לעטוף את העמודות שלך לשורה חדשה. בדרך כלל זה מושג עם מספר .rows, אבל לא כל שיטת יישום יכולה להסביר זאת.

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

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

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

מסדר מחדש

הזמינו שיעורים

השתמש .order-בשיעורים לשליטה בסדר החזותי של התוכן שלך. מחלקות אלו מגיבות, כך שתוכל להגדיר את orderנקודת הפסקה (למשל, .order-1.order-md-2). כולל תמיכה 1לכל 12חמש שכבות הרשת.

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

יש גם רספונסיביות .order-firstומחלקות .order-lastשמשנות את orderהרכיב על ידי החלת order: -1ו- order: 13( order: $columns + 1), בהתאמה. ניתן גם לערבב שיעורים אלו עם .order-*הכיתות הממוספרות לפי הצורך.

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

קיזוז עמודות

אתה יכול לקזז את עמודות הרשת בשתי דרכים: .offset-מחלקות הרשת הרספונסיביות שלנו וכלי השירות שלנו לשוליים . מחלקות רשת מותאמות לעמודות בעוד השוליים שימושיים יותר עבור פריסות מהירות שבהן רוחב ההיסט משתנה.

שיעורי קיזוז

הזז עמודות ימינה באמצעות .offset-md-*מחלקות. מחלקות אלו מגדילות את השוליים השמאליים של עמודה לפי *עמודות. לדוגמה, .offset-md-4עובר .col-md-4על פני ארבע עמודות.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

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

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

כלי עזר לשוליים

עם המעבר ל-flexbox ב-v4, אתה יכול להשתמש בכלי עזר לשוליים כמו .mr-autoלהרחיק עמודות אחים אחת מהשנייה.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

קינון

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

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

מיקסינס חצוף

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

משתנים

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

מיקסינס

Mixins משמשים בשילוב עם משתני הרשת כדי ליצור CSS סמנטי עבור עמודות רשת בודדות.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

שימוש לדוגמה

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

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

התאמה אישית של הרשת

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

עמודים ומרזבים

ניתן לשנות את מספר עמודות הרשת באמצעות משתני Sass. $grid-columnsמשמש ליצירת הרוחב (באחוזים) של כל עמודה בודדת תוך $grid-gutter-widthהגדרת הרוחב עבור מרזבי העמודות.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

שכבות רשת

מעבר לעמודות עצמן, תוכל גם להתאים אישית את מספר שכבות הרשת. אם היית רוצה רק ארבע שכבות רשת, היית מעדכן את ה- $grid-breakpointsו $container-max-widthsלמשהו כזה:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

בעת ביצוע שינויים כלשהם במשתני או במפות של Sass, תצטרך לשמור את השינויים ולהרכיב מחדש. פעולה זו תפיק קבוצה חדשה לגמרי של מחלקות רשת מוגדרות מראש עבור רוחבי עמודות, קיזוזים וסדר. כלי עזר לניראות רספונסיביים יעודכנו גם כדי להשתמש בנקודות השבירה המותאמות אישית. הקפד להגדיר ערכי רשת ב px(לא rem, emאו %).