מערכת רשת

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

בעמוד זה

דוגמא

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

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

טור

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

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

איך זה עובד

אם נפרט את זה, הנה איך מערכת הרשת מתחברת:

הרשת שלנו תומכת בשש נקודות שבירה מגיבות . נקודות פריצה מבוססות על min-widthשאילתות מדיה, כלומר הן משפיעות על נקודת הפריצה ועל כל אלו שמעליה (למשל, .col-sm-4חלות על sm, md, lg, xlו- xxl). זה אומר שאתה יכול לשלוט בגודל ובהתנהגות של מיכל ועמודות לפי כל נקודת שבירה.
מיכלים ממרכזים ומרופדים אופקית את התוכן שלך. השתמש .containerעבור רוחב פיקסל מגיב, .container-fluidעבור width: 100%כל יציאות התצוגה וההתקנים, או מיכל מגיב (למשל, .container-md) עבור שילוב של רוחב נוזל ופיקסלים.
שורות הן עטיפות עבור עמודות. לכל עמוד יש אופקי padding(נקרא מרזב) לשליטה על הרווח ביניהם. לאחר paddingמכן מתמודדים עם זה בשורות עם שוליים שליליים כדי להבטיח שהתוכן בעמודות שלך מיושר חזותית בצד שמאל. שורות תומכות גם במחלקות שינוי כדי להחיל באופן אחיד גודל עמודות ומחלקות מרזב כדי לשנות את המרווח של התוכן שלך.
עמודות גמישות להפליא. ישנן 12 עמודות תבנית זמינות בכל שורה, המאפשרות לך ליצור שילובים שונים של אלמנטים המשתרעים על כל מספר של עמודות. מחלקות עמודות מציינות את מספר עמודות התבנית שיש להרחיב (למשל, טווח col-4ארבע). widths נקבעים באחוזים כך שתמיד יהיה לך אותו גודל יחסי.
מרזבים גם מגיבים וניתנים להתאמה אישית. שיעורי מרזב זמינים בכל נקודות השבירה, עם כל אותם גדלים כמו השוליים והמרווחים שלנו . שנה מרזבים אופקיים עם .gx-*מחלקות, מרזבים אנכיים עם .gy-*, או כל המרזבים עם .g-*מחלקות. .g-0זמין גם להסרת מרזבים.
משתנים, מפות ומיקסינים של Sass מפעילים את הרשת. אם אינך רוצה להשתמש במחלקות הרשת המוגדרות מראש ב-Bootstrap, אתה יכול להשתמש ב- Sass המקור של הרשת שלנו כדי ליצור משלך עם סימון סמנטי יותר. אנו כוללים גם כמה מאפייני CSS מותאמים אישית כדי לצרוך משתני Sass אלה לגמישות רבה עוד יותר עבורך.

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

אפשרויות רשת

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

קטן במיוחד (xs)
קטן (SM)
בינוני (md)
גדול (לג)
גדול במיוחד (xl)
גדול במיוחד (xxl)

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

	xs <576px	sm ≥576 פיקסלים	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
מְכוֹלָה`max-width`	אין (אוטומטי)	540 פיקסלים	720 פיקסלים	960 פיקסלים	1140 פיקסלים	1320 פיקסלים
קידומת כיתה	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# עמודות	12
רוחב מרזב	1.5 רמ (.75 רמ משמאל וימין)
מרזבים בהתאמה אישית	כן
ניתן לקן	כן
סדר עמודות	כן

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

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

ברוחב שווה

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

1 מ 2

2 מתוך 2

1 מתוך 3

2 מתוך 3

3 מתוך 3

html

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

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

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

1 מתוך 3

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

3 מתוך 3

1 מתוך 3

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

3 מתוך 3

html

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

html

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

html

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

html

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

html

<div class="container text-center">
  <!-- 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-*בשיעורים הרספונסיביים כדי להגדיר במהירות את מספר העמודות שיציגו בצורה הטובה ביותר את התוכן והפריסה שלך. בעוד מחלקות רגילות .col-*חלות על העמודות הבודדות (למשל, .col-md-4), מחלקות עמודות השורות מוגדרות על האב .rowכקיצור דרך. עם .row-cols-autoאתה יכול לתת לעמודים את הרוחב הטבעי שלהם.

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

טור

html

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

טור

html

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

טור

html

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

טור

html

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

טור

html

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

טור

html

<div class="container text-center">
  <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);
  }
}

קינון

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

רמה 1: .col-sm-3

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

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

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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: 1.5rem;
$grid-row-columns:  6;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

מיקסינס

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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@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);
  }
}

תוכן עיקרי

תוכן משני

html

<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-row-columnsמשמש להגדרת המספר המרבי של עמודות של .row-cols-*, מתעלמים מכל מספר מעבר למגבלה זו.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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או %).