גריד סיסטעם

ניצן אונדזער שטאַרק רירעוודיק-ערשטער פלעקסבאָקס גריד צו בויען לייאַוץ פון אַלע שאַפּעס און סיזעס דאַנק צו אַ צוועלף זייַל סיסטעם, זעקס פעליקייַט אָפּרופיק טיערס, סאַסס וועריאַבאַלז און מיקסינס, און דאַזאַנז פון פּרעדעפינעד קלאסן.

אויף דעם בלאַט

בייַשפּיל

Bootstrap ס גריד סיסטעם ניצט אַ סעריע פון קאַנטיינערז, ראָוז און שפאלטן צו אויסלייג און ייַנרייען אינהאַלט. עס איז געבויט מיט פלעקסבאָקס און איז גאָר אָפּרופיק. ונטער איז אַ בייַשפּיל און אַ טיף דערקלערונג פֿאַר ווי די גריד סיסטעם קומט צוזאַמען.

נייַ אָדער ניט באַקאַנט מיט פלעקסבאָקס? לייענען דעם CSS טריקס פלעקסבאָקס פירער פֿאַר הינטערגרונט, טערמינאָלאָגיע, גיידליינז און קאָד סניפּאַץ.

זייַל

<div class="container">
  <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עס איז אויך בנימצא צו באַזייַטיקן גאַטערז.
סאַס וועריאַבאַלז, מאַפּס און מיקסינס מאַכט די גריד. אויב איר טאָן נישט וועלן צו נוצן די פּרעדעפינעד גריד קלאסן אין באָאָטסטראַפּ, איר קענען נוצן אונדזער גריד ס מקור סאַס צו שאַפֿן דיין אייגענע מיט מער סעמאַנטיק מאַרקאַפּ. מיר אויך אַרייַננעמען עטלעכע מנהג פּראָפּערטיעס פון CSS צו פאַרנוצן די סאַסס וועריאַבאַלז פֿאַר אפילו גרעסערע בייגיקייט פֿאַר איר.

זיין אַווער פון די לימיטיישאַנז און באַגז אַרום פלעקסבאָקס , ווי די ינאַביליטי צו נוצן עטלעכע HTML עלעמענטן ווי פלעקס קאַנטיינערז .

גריד אָפּציעס

באָאָטסטראַפּ ס גריד סיסטעם קענען אַדאַפּט זיך אין אַלע זעקס פעליקייַט ברייקפּאָינץ, און קיין ברייקפּאָינץ איר קאַסטאַמייז. די זעקס פעליקייַט גריד טיערס זענען ווי גייט:

עקסטרע קליין (קסס)
קליין (סמ)
מיטל (מד)
גרויס (לג)
עקסטרע גרויס (קסל)
עקסטרע עקסטרע גרויס (קססל)

ווי דערמאנט אויבן, יעדער פון די ברעאַקפּאָינץ האָבן זייער אייגן קאַנטיינער, יינציק קלאַס פּרעפיקס און מאָדיפיערס. דאָ ס ווי די גריד ענדערונגען איבער די ברייקפּוינט:

	xs <576px	sm ≥576 פּקס	md ≥768px	לג ≥992 פּקס	xl ≥1200 פּקס	xxl ≥1400 פּקס
קאנטעינער`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

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

באַשטעטיקן איין זייַל ברייט

אַוטאָ-אויסלייג פֿאַר פלעקסבאָקס גריד שפאלטן אויך מיטל אַז איר קענען שטעלן די ברייט פון איין זייַל און מאַכן די סיבלינג שפאלטן אויטאָמאַטיש טוישן די גרייס אַרום אים. איר קענט נוצן פּרעדעפינעד גריד קלאסן (ווי געוויזן אונטן), גריד מיקסינס אָדער ינלינע ברייט. באַמערקונג אַז די אנדערע שפאלטן וועט רעסיזע קיין ענין די ברייט פון די צענטער זייַל.

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.

קאָל

קאָל-8

קאָל-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

קאָל-סמ

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

מישן און גלייַכן

צי ניט וועלן דיין שפאלטן צו פשוט אָנלייגן אין עטלעכע גריד טיערס? ניצן אַ קאָמבינאַציע פון פאַרשידענע קלאסן פֿאַר יעדער ריי ווי דארף. זען די ביישפּיל אונטן פֿאַר אַ בעסער געדאַנק פון ווי אַלץ אַרבעט.

.קאָל-מד-8

.קאָל-6 .קאָל-מד-4

.קאָל-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-*קלאסן צו געשווינד שטעלן די נומער פון שפאלטן וואָס איז בעסטער צו מאַכן דיין אינהאַלט און אויסלייג. כוועראַז נאָרמאַל .col-*קלאסן צולייגן צו די יחיד שפאלטן (למשל, .col-md-4), די רודערן שפאלטן קלאסן זענען באַשטימט אויף די פאָטער .rowווי אַ דורכוועג. מיט .row-cols-autoאיר קענען געבן די שפאלטן זייער נאַטירלעך ברייט.

ניצן די רודערן שפאלטן קלאסן צו געשווינד מאַכן יקערדיק גריד לייאַוץ אָדער צו קאָנטראָלירן דיין קאָרט לייאַוץ.

זייַל

<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-auto">
    <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);
  }
}

נעסטינג

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

מדרגה 1: .קאָל-סמ-3

מדרגה 2: .קאָל-8 .קאָל-סמ-6

מדרגה 2: .קאָל-4 .קאָל-סמ-6

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

סאַס

ווען איר נוצן Bootstrap's מקור Sass טעקעס, איר האָבן די אָפּציע צו נוצן Sass וועריאַבאַלז און מיקסינס צו שאַפֿן מנהג, סעמאַנטיק און אָפּרופיק בלאַט לייאַוץ. אונדזער פּרעדעפינעד גריד קלאסן נוצן די זעלבע וועריאַבאַלז און מיקסינס צו צושטעלן אַ גאַנץ סוויט פון גרייט-צו-נוצן קלאסן פֿאַר שנעל אָפּרופיק לייאַוץ.

וועריאַבאַלז

וועריאַבאַלז און מאַפּס באַשטימען די נומער פון שפאלטן, די גערטנער ברייט און די מידיאַ אָנפֿרעג פונט אין וואָס צו אָנהייבן פלאָוטינג שפאלטן. מיר נוצן די צו דזשענערייט די פּרעדעפינעד גריד קלאסן דאַקיומענטאַד אויבן, ווי געזונט ווי פֿאַר די מנהג מיקסינס ליסטעד אונטן.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

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

מיקסינס

מיקסינס זענען געניצט אין קאַנדזשאַנגקשאַן מיט די גריד וועריאַבאַלז צו דזשענערייט סעמאַנטיק קסס פֿאַר יחיד גריד שפאלטן.

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

הויפּט אינהאַלט

צווייטיק אינהאַלט

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

קאַסטאַמייז די גריד

מיט אונדזער געבויט-אין גריד סאַס וועריאַבאַלז און מאַפּס, עס איז מעגלעך צו גאָר קאַסטאַמייז די פּרעדעפינעד גריד קלאסן. טוישן די נומער פון טיערס, די מידיאַ אָנפֿרעג דימענשאַנז, און די קאַנטיינער ווידטס - דעמאָלט ריקאָמפּילע.

שפאלטן און גאסן

די נומער פון גריד שפאלטן קענען זיין מאַדאַפייד דורך סאַסס וועריאַבאַלז. $grid-columnsאיז געניצט צו דזשענערייט די ווידטס (אין פּראָצענט) פון יעדער יחיד זייַל בשעת $grid-gutter-widthשטעלט די ברייט פֿאַר די זייַל גאָוטערז.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !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
);

ווען איר מאַכן קיין ענדערונגען צו די סאַסס וועריאַבאַלז אָדער מאַפּס, איר דאַרפֿן צו ראַטעווען דיין ענדערונגען און ריקאָמפּילע. טאן אַזוי וועט רעזולטאַט אַ שפּאָגל נייַ גאַנג פון פּרעדעפינעד גריד קלאסן פֿאַר זייַל ווידטס, אָפסעץ און אָרדערינג. אָפּרופיק וויזאַביליטי יוטילאַטיז וועט אויך זיין דערהייַנטיקט צו נוצן די מנהג ברעאַקפּאָינץ. מאַכן זיכער צו שטעלן גריד וואַלועס אין px(ניט rem, em, אָדער %).