מערכת רשת

השתמש ברשת ה-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 פועלים על פני מספר מכשירים באמצעות טבלה שימושית.

	קטן במיוחד <576 פיקסלים	קטן ≥576 פיקסלים	בינוני ≥768 פיקסלים	גדול ≥992 פיקסלים	גדול במיוחד ≥1200 פיקסלים
רוחב מיכל מקסימלי	אין (אוטומטי)	540 פיקסלים	720 פיקסלים	960 פיקסלים	1140 פיקסלים
קידומת כיתה	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# עמודות	12
רוחב מרזב	30 פיקסלים (15 פיקסלים בכל צד של עמודה)
ניתן לקן	כן
סדר עמודות	כן

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

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

ברוחב שווה

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

1 מ 2

2 מתוך 2

1 מתוך 3

2 מתוך 3

3 מתוך 3

<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>

רב קו ברוחב שווה

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

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

קול

<div class="container">
  <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>
</div>

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

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

1 מתוך 3

2 מתוך 3 (רחב יותר)

3 מתוך 3

1 מתוך 3

2 מתוך 3 (רחב יותר)

3 מתוך 3

<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במחלקות כדי להתאים עמודות בהתאם לרוחב הטבעי של התוכן שלהן.

1 מתוך 3

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

3 מתוך 3

1 מתוך 3

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

3 מתוך 3

<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>

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

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

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

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

קול

col-8

col-4

<div class="container">
  <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>
</div>

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

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

col-sm-8

col-sm-4

col-sm

<div class="container">
  <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>
</div>

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

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

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.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>
</div>

מרזבים

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

הנה דוגמה להתאמה אישית של רשת Bootstrap בנקודת הפריצה הגדולה ( lg) ומעלה. הגדלנו את .colהריפוד עם .px-lg-5, התנגדו לזה עם .mx-lg-n5ההורה .rowואז התאמנו את .containerהעטיפה עם .px-lg-5.

ריפוד עמודים מותאם אישית

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

עמודות שורה

השתמש .row-cols-*בשיעורים הרספונסיביים כדי להגדיר במהירות את מספר העמודות שיציגו בצורה הטובה ביותר את התוכן והפריסה שלך. בעוד מחלקות רגילות .col-*חלות על העמודות הבודדות (למשל, .col-md-4), מחלקות עמודות השורות מוגדרות על האב .rowכקיצור דרך.

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

טור

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

טור

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

טור

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

טור

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

טור

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

אתה יכול גם להשתמש במיקסין Sass הנלווה row-cols(),:

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

יישור

השתמש בכלי עזר ליישור flexbox ליישור עמודות אנכית ואופקית. Internet Explorer 10-11 אינו תומך ביישור אנכי של פריטי flex כאשר למיכל הגמיש יש min-heightכמתואר להלן. ראה Flexbugs #3 לפרטים נוספים.

יישור אנכי

אחד משלושת העמודות

<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;
  }
}

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

.col-sm-6 .col-md-8

.col-6 .col-md-4

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

עטיפת עמודות

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

.col-9

.col-4
מאז 9 + 4 = 13 > 12, div זה ברוחב 4 עמודות נכרך על שורה חדשה כיחידה אחת רציפה.

.col-6
העמודות הבאות ממשיכות לאורך הקו החדש.

<div class="container">
  <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>
</div>

מעברי עמודות

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

.col-6 .col-sm-3

<div class="container">
  <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>

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

.col-6 .col-sm-4

<div class="container">
  <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>
</div>

מסדר מחדש

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

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

תחילה ב-DOM, לא הוחל צו

שני ב-DOM, עם הזמנה גדולה יותר

שלישי ב-DOM, בסדר 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

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

ראשון ב-DOM, הוזמן אחרון

שני ב-DOM, לא מסודר

שלישי ב-DOM, הוזמן ראשון

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

קיזוז עמודות

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

שיעורי קיזוז

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

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <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>

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

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <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>
</div>

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

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

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <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>
</div>

קינון

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

רמה 1: .col-sm-9

רמה 2: .col-8 .col-sm-6

רמה 2: .col-4 .col-sm-6

<div class="container">
  <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>
</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 {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.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או %).