גריד סיסטעם

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

וויאזוי עס ארבעט

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

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

איינער פון דרייַ שפאלטן

<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איז דעמאָלט קאַונטעראַקטיד אויף די ראָוז מיט נעגאַטיוו מאַרדזשאַנז. דעם וועג, אַלע די אינהאַלט אין דיין שפאלטן איז וויזשוואַלי אַליינד אַראָפּ די לינקס זייַט.
אין אַ גריד אויסלייג, אינהאַלט מוזן זיין געשטעלט אין שפאלטן און בלויז שפאלטן קענען זיין באַלדיק קינדער פון ראָוז.
דאַנק צו פלעקסבאָקס, גריד שפאלטן אָן אַ ספּעסיפיעד widthוועט אויטאָמאַטיש אויסלייג ווי גלייַך ברייט שפאלטן. פֿאַר בייַשפּיל, פיר ינסטאַנסיז פון .col-smיעדער וועט אויטאָמאַטיש זיין 25% ברייט פֿון די קליין ברייקפּוינט און העכער. זען די אָטאַמאַטיק אויסלייג שפאלטן אָפּטיילונג פֿאַר מער ביישפילן.
זייַל קלאסן אָנווייַזן די נומער פון שפאלטן איר'ד ווי צו נוצן פון די מעגלעך 12 פּער רודערן. אַזוי, אויב איר ווילן דריי שפאלטן אין גלייַך ברייט, איר קענען נוצן .col-4.
זייַל widthס זענען באַשטימט אין פּערסענטידזשיז, אַזוי זיי זענען שטענדיק פליסיק און סייזד קאָרעוו צו זייער פאָטער עלעמענט.
שפאלטן האָבן האָריזאָנטאַל paddingצו מאַכן די גאָוטערז צווישן יחיד שפאלטן, אָבער, איר קענען אַראָפּנעמען די marginפון ראָוז און paddingפון שפאלטן מיט .no-guttersאויף די .row.
צו מאַכן די גריד אָפּרופיק, עס זענען פינף גריד ברייקפּאָינץ, איינער פֿאַר יעדער אָפּרופיק ברייקפּאָינט : אַלע ברייקפּאָינץ (עקסטרע קליין), קליין, מיטל, גרויס און עקסטרע גרויס.
גריד ברעאַקפּאָינץ זענען באזירט אויף מינימום ברייט מידיאַ קוויריז, טייַטש זיי אַפּלייז צו אַז איין ברעאַקפּאָינט און אַלע יענע אויבן עס (למשל, .col-sm-4אַפּלייז צו קליין, מיטל, גרויס און עקסטרע גרויס דעוויסעס, אָבער נישט דער ערשטער xsברעאַקפּאָינט).
איר קענען נוצן פּרעדעפינעד גריד קלאסן (ווי .col-4) אָדער Sass מיקסינס פֿאַר מער סעמאַנטיק מאַרקאַפּ.

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

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

בשעת 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 פלעקסבאָקס זשוק וואָס פּריווענטיד דעם פון ארבעטן אָן אַ יקספּליסאַט 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>

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

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

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און וואָס ריכטן וואַטן יוטילאַטיז אויף די .colס. דער .containerאָדער .container-fluidפאָטער קען אויך זיין אַדזשאַסטיד צו ויסמיידן אַנוואָנטיד לויפן, ניצן ווידער וואָס ריכטן וואַטן נוצן.

דאָ איז אַ ביישפּיל פון קאַסטאַמייזינג די באָאָצטראַפּ גריד ביי די גרויס ( 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);
  }
}

אַליינמאַנט

ניצן פלעקסבאָקס אַליינמאַנט יוטילאַטיז צו ווערטיקלי און כאָריזאַנטאַלי ייַנרייען שפאלטן. Internet Explorer 10-11 שטיצן נישט ווערטיקאַל אַליינמאַנט פון פלעקס ייטאַמז ווען די פלעקס קאַנטיינער האט אַ 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;
  }
}

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

.קאָל-סמ-6 .קאָל-מד-8

.קאָל-6 .קאָל-מד-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 שפאלטן זענען געשטעלט אין אַ איין רודערן, יעדער גרופּע פון עקסטרע שפאלטן וועט, ווי איין אַפּאַראַט, ייַנוויקלען אויף אַ נייַע שורה.

.קאָל-9

.קאָל-4
זינט 9 + 4 = 13> 12, דעם 4-זייַל-ברייט דייוו איז אלנגעוויקלט אויף אַ נייַע שורה ווי איין קאַנטיגיואַס אַפּאַראַט.

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

זייַל ברייקס

ברייקינג שפאלטן צו אַ נייַע שורה אין פלעקסבאָקס ריקווייערז אַ קליין כאַק: לייגן אַן עלעמענט מיט width: 100%ווו נאָר איר ווילן צו ייַנוויקלען דיין שפאלטן צו אַ נייַע שורה. נאָרמאַללי דאָס איז פארענדיקט מיט קייפל .rowס, אָבער ניט יעדער ימפּלאַמענטיישאַן אופֿן קענען זיין אַקאַונץ פֿאַר דעם.

.קאָל-6 .קאָל-סמ-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>

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

.קאָל-6 .קאָל-סמ-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איבער פיר שפאלטן.

.קאָל-מד-4

.קאָל-מד-4 .אָפסעט-מד-4

.קאָל-מד-3 .אָפסעט-מד-3

.קאָל-מד-6 .אָפסעט-מד-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>

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

.קאָל-סמ-5 .קאָל-מד-6

.קאָל-סמ-5 .אָפסעט-סמ-2 .קאָל-מד-6 .אָפסעט-מד-0

.קאָל-סמ-6 .קאָל-מד-5 .קאָל-לג-6

.קאָל-סמ-6 .קאָל-מד-5 .אָפסעט-מד-2 .קאָל-לג-6 .אָפסעט-לג-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>

גרענעץ יוטילאַטיז

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

.קאָל-מד-4

.קאָל-מד-4 .מל-אַוטאָ

.קאָל-מד-3 .מל-מד-אַוטאָ

.קאָל-אַוטאָ .מר-אַוטאָ

.קאָל-אַוטאָ

<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: .קאָל-סמ-9

Level 2: .col-8 .col-sm-6

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

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variables

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

$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

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

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

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.

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

Main content

Secondary content

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

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual column while $grid-gutter-width sets the width for the column gutters.

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

Grid tiers

ווייַטער פון די שפאלטן זיך, איר קען אויך קאַסטאַמייז די נומער פון גריד טיערס. אויב איר ווילט בלויז פיר גריד טיערס, איר וואָלט דערהייַנטיקן די $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, אָדער %).