Grid ƒe ɖoɖo

Zã míaƒe asitelefon-gbãtɔ flexbox grid sesẽ la nàtsɔ atu ɖoɖowo ƒe nɔnɔme kple lolomewo katã akpe ɖe sɔti wuieve ƒe ɖoɖo, atɔ̃ default responsive tiers, Sass variables kple mixins, kple klass gbogbo aɖewo siwo woɖo do ŋgɔ ŋu.

Ale si wòwɔa dɔe

Bootstrap ƒe grid ɖoɖoa zãa nugoewo, fliwo, kple sɔtiwo ƒe ƒuƒoƒo tsɔ ɖoa nyatakakawo ɖe ɖoɖo nu heɖoa wo ɖe ɖoɖo nu. Wotue kple flexbox eye wòwɔa nu bliboe. Kpɔɖeŋu kple ŋkuléle ɖe alesi grid la ƒoa ƒui ŋu tsitotsito le ete.

Ame yeye le flexbox me alo mènyae nyuie oa? Xlẽ CSS Tricks flexbox mɔfiame sia hena megbenyawo, nyawo, mɔfiamewo, kple kɔda ƒe akpa aɖewo.

Sɔti etɔ̃awo dometɔ ɖeka

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

Kpɔɖeŋu si le etame la wɔa sɔti etɔ̃ siwo ƒe kekeme sɔ le mɔ̃ suewo, titina, gãwo, kple gã bubuwo dzi to míaƒe grid klass siwo míeɖo do ŋgɔ la zazã me. Kpɔti mawo le titina le axaa dzi kple dzila la .container.

Ne míegbãe la, ale si wòwɔa dɔe nye esi:

Nugoewo naa mɔnu aɖe si dzi nàto aɖo wò nyatakakadzraɖoƒea me nyawo ɖe titina ahanɔ tsia dzi. Zãe .containerna pixel ƒe kekeme si ɖoa nya ŋu alo .container-fluidna width: 100%nukpɔkpɔ kple mɔ̃ ƒe lolomewo katã me.
Fliwo nye nusiwo wotsɔ blaa sɔtiwoe. Sɔti ɖesiaɖe le tsia dzi padding(si woyɔna be gutter) hena teƒe si le wo dome la dzi kpɔkpɔ. Emegbe paddingwotsia tre ɖe esia ŋu le fli siwo ŋu axa manyomanyowo le la dzi. To mɔ sia dzi la, nusiwo katã le wò sɔtiwo me la le ɖoɖo nu le miame le nukpɔkpɔ me.
Le grid ƒe ɖoɖo me la, ele be woatsɔ nyawo ade sɔtiwo me eye sɔtiwo koe ateŋu anye fliwo ƒe viwo enumake.
Akpe na flexbox la, grid sɔti siwo me womegblɔ nya aɖeke o la widthaɖo wo ɖokui abe sɔti siwo ƒe kekeme sɔ ene. Le kpɔɖeŋu me, kpɔɖeŋu ene siwo .col-smdometɔ ɖesiaɖe akeke 25% le eɖokui si tso gbagbãƒe suea kple dziƒo. Kpɔ auto-layout columns ƒe akpaa hena kpɔɖeŋu bubuwo.
Sɔti ƒe klasswo fiaa sɔti agbɔsɔsɔme si nàdi be yeazã le 12 siwo ate ŋu anɔ fli ɖesiaɖe me la dome. Eyata, ne èdi be sɔti etɔ̃ siwo ƒe kekeme sɔ nadze la, àte ŋu azã .col-4.
Woɖo sɔti widths le alafa memamãwo me, eyata wole tsi me ɣesiaɣi eye woƒe lolome le tsɔtsɔ sɔ kple wo dzila ƒe akpa.
Sɔtiwo le tsia dzi paddingbe woawɔ gutters le sɔti ɖekaɖekawo dome, ke hã, àteŋu aɖe margintso fliwo kple paddingtso sɔtiwo me kple .no-guttersle .row.
Be grid la nawɔ dɔ la, grid ƒe gbagbãƒe atɔ̃ li, ɖeka na gbagbãƒe ɖesiaɖe si ɖoa nya ŋu : breakpoints katã (sue wu), sue, titina, gã, kple gã wu.
Grid breakpoints nɔ te ɖe minimum width media biabia dzi, si fia be wowɔa dɔ ɖe breakpoint ɖeka ma kple esiwo katã le etame dzi (le kpɔɖeŋu me, .col-sm-4ewɔa dɔ ɖe mɔ̃ suewo, titina, gã, kple gã bubuwo ŋu, gake menye xsbreakpoint gbãtɔ o).
Àteŋu azã grid klass siwo woɖo do ŋgɔ (abe .col-4) alo Sass mixins hena gɔmesese ƒe dzesidede geɖe wu.

Nya seɖoƒewo kple vodada siwo ƒo xlã flexbox , abe ŋutete be woazã HTML ƒe akpa aɖewo abe flex nugoewo ene o ene .

Grid ƒe tiatiawɔblɔɖewo

Togbɔ be Bootstrap zãa ems alo rems hena lolome akpa gãtɔ gɔmeɖeɖe hã la, pxwozãa s na grid breakpoints kple container widths. Esia le alea elabena nukpɔkpɔ ƒe kekeme le piksel me eye metrɔna kple ŋɔŋlɔdzesi ƒe lolome o .

Kpɔ alesi Bootstrap grid ɖoɖoa ƒe akpa aɖewo wɔa dɔ le mɔ̃ geɖe siwo si kplɔ̃ si le asi me le dzi.

	Susu sue aɖe kpee <576px	Sue ≥576px	Medium ≥768px ƒe didime	Gã ≥992px	Gã wu ≥1200px
Max nugoe ƒe kekeme	Ðeke meli o (auto) .	540px ƒe didime	720px ƒe didime	960px ƒe didime	1140px ƒe didime
Klass ƒe ŋgɔdonya	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# ƒe sɔtiwo	12. 12
Gutter ƒe kekeme	30px (15px le sɔti aɖe ƒe akpa ɖesiaɖe)
Nestable	Ɛ̃
Sɔtiwo ƒe ɖoɖowɔwɔ	Ɛ̃

Auto-layout sɔtiwo

Zã breakpoint-koŋ ƒe sɔtiwo ƒe klasswo hena sɔtiwo ƒe lolome ɖoɖo bɔbɔe si me xexlẽdzesiwo ƒe klass si me kɔ abe .col-sm-6.

Woƒe kekeme sɔ kple wo nɔewo

Le kpɔɖeŋu me, grid ƒe ɖoɖo eve siwo ku ɖe mɔ̃ ɖesiaɖe kple nukpɔkpɔ ƒe mɔnu ŋue nye esi, tso xsvaseɖe xl. Tsɔ unit-less class xexlẽme ɖesiaɖe kpe ɖe breakpoint ɖesiaɖe si nèhiã ŋu eye sɔti ɖesiaɖe ƒe kekeme anɔ ɖeka.

1 le 2 me

2 le 2 me

1 le 3 me

2 le 3 me

3 le 3 me

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

Fli geɖe ƒe kekeme sɔsɔe

Wɔ sɔti siwo ƒe kekeme sɔ eye wokeke fli geɖe to .w-100afisi nèdi be sɔtiawo nagbã ɖe fli yeye dzi la dede eme. Na ɖiɖiɖemeawo nawɔ dɔ to wo tsakatsaka .w-100kple ɖeɖefia ƒe dɔwɔnu aɖewo siwo wɔa dɔ nyuie me .

Safari flexbox ƒe vodada aɖe nɔ anyi si xe mɔ na esia be wòagawɔ dɔ flex-basisalo border. Dɔwɔwɔwo li na web-browser ƒe tɔtrɔ xoxowo, gake mele be woahiã ne wò web-browser siwo nèɖo taɖodzinu na la medze buggy ƒe tɔtrɔwo me o.

col

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

Sɔti ɖeka ƒe kekeme ɖoɖo

Auto-layout na flexbox grid sɔtiwo hã fia be àteŋu aɖo sɔti ɖeka ƒe kekeme eye nàna nɔvi sɔtiawo natrɔ woƒe lolome le wo ɖokui si ƒo xlãe. Àteŋu azã grid ƒe hatsotso siwo woɖo ɖi do ŋgɔ (abe alesi woɖee fia le ete ene), grid mixins, alo inline widths. De dzesii be sɔti bubuawo atrɔ woƒe lolome eɖanye titina sɔti la ƒe kekeme ka kee o.

1 le 3 me

2 le 3 me (si keke ta wu) .

3 le 3 me

1 le 3 me

2 le 3 me (si keke ta wu) .

3 le 3 me

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

Emenyawo ƒe kekeme si trɔna

Zã col-{breakpoint}-autoklasswo nàtsɔ adzidze sɔtiwo ƒe lolome le woƒe emenyawo ƒe kekeme le dzɔdzɔme nu nu.

1 le 3 me

Emenyawo ƒe kekeme si trɔna

3 le 3 me

1 le 3 me

Emenyawo ƒe kekeme si trɔna

3 le 3 me

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

Klass siwo me woɖoa nya ŋu le

Bootstrap ƒe grid la lɔ hatsotso atɔ̃ siwo woɖo ɖi do ŋgɔ hena ɖoɖo sesẽ siwo ɖoa nya ŋu la tutu ɖe eme. Trɔ asi le wò sɔtiwo ƒe lolome ŋu le mɔ̃ suewo, suewo, titinatɔwo, gãwo, alo gãwo wu dzi alesi nèkpɔe be esɔ.

Nusiwo katã gblẽa nu le ame ŋu

Le grid siwo sɔ tso mɔ̃ suetɔ dzi va ɖo gãtɔ dzi la, zã .colkple .col-*ƒe hatsotsowo. Gblɔ klass si ŋu xexlẽdzesi le ne èhiã sɔti si ƒe lolome le etɔxɛe; ne menye nenema o la, milé ɖe .col.

col

col-8 ƒe ƒuƒoƒo

col-4 ƒe ƒuƒoƒo

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

Woƒo wo nu ƒu ɖe anyigba dzi

Ne èzã .col-sm-*klass ɖeka la, àte ŋu awɔ grid ɖoɖo vevi aɖe si dzea egɔme tso ƒuƒoƒo me eye wòzua tsia dzi le breakpoint suea ( sm).

col-sm-8 ƒe ƒuƒoƒo

col-sm-4 ƒe ƒuƒoƒo

col-sm ƒe ƒuƒoƒo

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

Tsɔe tsaka eye nàtsɔe asɔ kple wo nɔewo

Mèdi be yeƒe sɔtiwo naƒo ƒu ɖe grid tiers aɖewo me ko oa? Zã klass vovovowo ƒe ƒuƒoƒo na tier ɖesiaɖe ne ehiã. Kpɔ kpɔɖeŋu si le ete hena alesi wo katã wɔa dɔe ŋuti susu nyuitɔ.

.col-md-8 ƒe ƒuƒoƒo

.kɔl-6 .kɔl-md-4

.kol-6 ƒe ƒuƒoƒo

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

Tsiɖɔɖɔɖɔƒewo

Woate ŋu atrɔ asi le gutters ŋu wòasɔ ɖe breakpoint-koŋ padding kple negative margin utility classes me. Be nàtrɔ gutters le fli si wona me la, do axa negative margin utility le .rowkple matching padding utilities le .cols la dzi. Ate ŋu ahiã be woatrɔ asi le .containeralo .container-fluiddzila la hã ŋu be wòaƒo asa na tsi si womelɔ̃ o, eye woagazã padding utility si sɔ kple wo nɔewo ake.

Kpɔɖeŋu aɖe si nye be nàtrɔ asi le Bootstrap grid la ŋu le ( lg) breakpoint gã la kple esi le etame lae nye esi. Míedzi .colpadding la ɖe edzi kple .px-lg-5, míetsi tre ɖe ema ŋu kple .mx-lg-n5le dzila la dzi .roweye emegbe míetrɔ asi le .containerwrapper la ŋu kple .px-lg-5.

Kɔlam ƒe padding si wowɔ ɖe ɖoɖo nu

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

Ðo sɔtiwo ɖe fli me

Zã .row-cols-*klass siwo ɖoa nya ŋu nàtsɔ aɖo sɔti siwo aɖe wò nyatakakawo kple ɖoɖo nyuie wu ƒe xexlẽme kaba. Togbɔ be .col-*klass siwo sɔ la ku ɖe sɔti ɖekaɖekawo ŋu (le kpɔɖeŋu me, .col-md-4), woɖo fli sɔtiwo ƒe klasswo ɖe dzila dzi .rowabe mɔ kpui ene.

Zã fli sɔtiwo ƒe klass siawo nàtsɔ awɔ grid ƒe ɖoɖo veviwo kaba alo nàtsɔ akpɔ wò kaɖi ƒe ɖoɖowo dzi.

Akpa

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

Akpa

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

Akpa

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

Akpa

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

Akpa

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

Àte ŋu azã Sass mixin si kpe ɖe eŋu hã, 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);
  }
}

Ðoɖowɔwɔ ɖe ɖoɖo nu

Zã flexbox alignment utilities nàtsɔ aɖo sɔtiwo ɖe ɖoɖo nu le tsitrenu kple le tsia dzi. Internet Explorer 10-11 medoa alɔ flex nuawo ƒe ɖoɖowɔwɔ ɖe ɖoɖo nu le tsitrenu ne flex nugoe la ƒe a le min-heightabe alesi woɖee fia le ete ene o. Kpɔ Flexbugs #3 hena numeɖeɖe bubuwo.

Nusiwo woɖo ɖe ɖoɖo nu le tsitrenu

Sɔti etɔ̃awo dometɔ ɖeka

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

Sɔti etɔ̃awo dometɔ ɖeka

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

Nusiwo woɖo ɖe ɖoɖo nu le tsia dzi

Sɔti eve dometɔ ɖeka

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

Tɔdzisasrã aɖeke meli o

Woate ŋu aɖe tsiɖɔɖɔ siwo le sɔtiwo dome le míaƒe grid ƒe hatsotso siwo míeɖo do ŋgɔ me la ɖa kple .no-gutters. Esia ɖea margins manyomanyowo ɖa le ɖeviwo ƒe sɔti siwo katã le enumake .rowla me kple esiwo le tsia dzi la ɖa.padding

Atsyã siawo wɔwɔ ƒe dzɔtsoƒe ƒe nuŋɔŋlɔ enye si. De dzesii be woɖoa sɔtiwo ƒe ʋuʋu ɖe ɖeviwo ƒe sɔti gbãtɔwo ko gbɔ eye woɖoa taɖodzinu na wo to nɔnɔme tiatia dzi . Togbɔ be esia naa tiatiawɔnu aɖe si le tẽ wu dona hã la, woate ŋu atrɔ asi le sɔtiwo ƒe nutrenu ŋu geɖe wu kple dometsotso ƒe dɔwɔnuwo .

Èhiã aɖaŋu si wowɔ tso nugbɔ vaseɖe nugbɔa? Ðe dzila la ɖa .containeralo .container-fluid.

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

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

Le nuwɔna me la, alesi wòdzenae nye esi. De dzesii be àteŋu ayi edzi azã esia kple grid ƒe hatsotso bubu siwo katã woɖo ɖi do ŋgɔ (siwo dometɔ aɖewoe nye sɔtiwo ƒe kekeme, ŋuɖoɖo ƒe dzidzenuwo, ɖoɖo yeyewo, kple bubuwo).

.kɔl-sm-6 .kɔl-md-8

.kɔl-6 .kɔl-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>

Sɔtiwo ƒe agbalẽ xatsaxatsa

Ne wotsɔ sɔti siwo wu 12 da ɖe fli ɖeka me la, sɔti bubuwo ƒe ƒuƒoƒo ɖesiaɖe, abe akpa ɖeka ene, axatsa ɖe fli yeye aɖe dzi.

.kol-9 ƒe ƒuƒoƒo

.col-4
Esi wònye be 9 + 4 = 13 > 12 ta la, div sia si keke sɔti 4 la xɔa fli yeye ɖe fli yeye dzi abe xexlẽdzesi ɖeka si tsiã ɖe enu ene.

.col-6
Sɔti siwo kplɔe ɖo yi edzi le fli yeyea dzi.

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

Sɔtiwo ƒe gbagbã

Sɔtiwo gbãgbã ɖe fli yeye me le flexbox me bia hack sue aɖe: tsɔ element aɖe kpe ɖe width: 100%afisiafi si nèdi be yeaxatsa wò sɔtiwo ɖe fli yeye ŋu. Zi geɖe la, wowɔa esia kple .rows geɖe, gake menye dɔwɔwɔ ƒe mɔnu ɖesiaɖee ateŋu abu akɔnta le esia ŋu o.

.kɔl-6 .kɔl-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>

Àte ŋu awɔ ɖiɖiɖeme sia hã ŋudɔ le ɖiɖiɖemeƒe aɖewo koŋ kple míaƒe responsive display utilities .

.kɔl-6 .kɔl-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>

Gbugbɔ ɖoɖo ɖe ɖoɖo nu

Ðoɖo ɖe klasswo ŋu

Zã .order-klasswo hena wò nyatakakawo ƒe ɖoɖo si wokpɔna le nukpɔkpɔ me dzi ɖuɖu. Klass siawo ɖoa nya ŋu, eyata àte ŋu aɖo orderby breakpoint (le kpɔɖeŋu me, .order-1.order-md-2). Kpekpeɖeŋu na 1to 12le grid tiers atɔ̃awo katã me hã le eme.

Gbã le DOM me la, womewɔ sedede aɖeke ŋudɔ o

Evelia le DOM me, kple ɖoɖo si lolo wu

Etɔ̃lia le DOM me, kple ɖoɖo si nye 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>

Azɔ hã, responsive .order-firstkple .order-lastclasses li siwo trɔa the orderof an element to dɔwɔwɔ order: -1kple order: 13( order: $columns + 1), ɖe wo nɔewo yome. Woate ŋu atsaka klass siawo hã kple .order-*klass siwo ŋu xexlẽdzesi le ne ehiã.

Gbãtɔ le DOM me, wobia mamlɛtɔ

Evelia le DOM me, si womeɖo ɖe ɖoɖo nu o

Etɔ̃lia le DOM me, woɖoe gbã

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

Sɔtiwo ƒe vovototodedeameme

Àte ŋu aɖɔ grid sɔtiwo ɖo le mɔ eve nu: míaƒe .offset-grid klass siwo ɖoa nya ŋu kple míaƒe margin utilities . Woɖoa grid klasswo ƒe lolome be woasɔ kple sɔtiwo esime margins ɖea vi wu na ɖoɖowɔwɔ kabakaba afisi offset ƒe kekeme trɔna le.

Offset ƒe klasswo

Ʋu sɔtiwo yi ɖusime to .offset-md-*klasswo zazã me. Klass siawo dzia sɔti aɖe ƒe miame ƒe akpa dzi ɖe edzi *sɔtiwo. Le kpɔɖeŋu me, .offset-md-4eʋuna .col-md-4ɖe sɔti ene dzi.

.col-md-4 ƒe ƒuƒoƒo

.col-md-4 .ɖe-md-4 ƒe ƒuƒoƒo

.col-md-3 .wo ƒe tsɔtsɔme-md-3

.col-md-6 .wo ƒe tsɔtsɔme-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>

Tsɔ kpe ɖe sɔtiwo ɖeɖeɖa le ŋuɖoɖo ƒe gbagbãƒewo ŋu la, ɖewohĩ ahiã be nàgbugbɔ aɖo offsetwo ɖe ɖoɖo nu. Kpɔ esia le dɔwɔwɔ me le grid ƒe kpɔɖeŋua me .

.kɔl-sm-5 .kɔl-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .dziɖuɖu-md-0

.kɔl-sm-6 .kɔl-md-5 .kɔl-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .vovototo-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>

Margin ƒe dɔwɔnuwo

Le ʋuʋu yi flexbox le v4 me la, àteŋu azã margin utilities abe .mr-autoalesi nàzi nɔviwo ƒe sɔtiwo dzi be woadzo le wo nɔewo gbɔ ene.

.col-md-4 ƒe ƒuƒoƒo

.col-md-4 .ml-ɖokuidziɖuɖu

.col-md-3 .ml-md-ʋu ƒe ƒuƒoƒo

.col-auto .aƒetɔ-ʋu

.col-ʋu ƒe zɔzɔ

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

Atɔwɔwɔ

Be nàtsɔ grid si woɖo ɖi la awɔ atɔ ɖe wò nyatakakawo ŋu la, tsɔ sɔti yeye .rowkple ƒuƒoƒo kpe ɖe .col-sm-*sɔti si li xoxo .col-sm-*ŋu. Ele be sɔti siwo wotsɔ ƒo ƒui va ɖo 12 alo esi mede nenema o nanɔ fli siwo wotsɔ ƒo ƒui me (mehiã be nàzã sɔti 12 siwo katã li la o).

Dzidzenu 1: .col-sm-9

Dzidzenu 2 lia: .col-8 .col-sm-6

Dzidzenu 2 lia: .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 ƒe mixins

Ne èle Bootstrap ƒe dzɔtsoƒe Sass faɛlwo zãm la, tiatia le asiwò be nàzã Sass ƒe tɔtrɔwo kple mixins atsɔ awɔ axa ƒe ɖoɖo siwo wowɔ ɖe ɖoɖo nu, gɔmesese, kple ŋuɖoɖo. Míaƒe grid klass siwo woɖo do ŋgɔ la zãa tɔtrɔ siawo ke kple mixins tsɔ naa klass siwo sɔ na zazã ƒe ƒuƒoƒo blibo aɖe na ɖoɖo siwo ɖoa nya ŋu kabakaba.

Nusiwo trɔna

Tɔtrɔwo kple anyigbatatawoe ɖoa sɔtiwo ƒe xexlẽme, gutter ƒe kekeme, kple media biabia teƒe si woadze sɔti siwo le tsia dzi gɔme le. Míezãa esiawo tsɔ wɔa grid ƒe hatsotso siwo woɖo ɖi do ŋgɔ siwo woŋlɔ ɖe etame, kpakple na mixins tɔxɛ siwo woŋlɔ ɖe ete.

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

Nusiwo wotsɔ tsakae

Wozãa mixins kpe ɖe grid ƒe tɔtrɔwo ŋu tsɔ wɔa gɔmesese ƒe CSS na grid ƒe sɔti ɖekaɖekawo.

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

Kpɔɖeŋu zazã

Àteŋu atrɔ asi le tɔtrɔawo ŋu ɖe wò ŋutɔ wò asixɔxɔ tɔxɛwo nu, alo nàzã mixins kple woƒe asixɔxɔ gbãtɔwo ko. Kpɔɖeŋu aɖee nye esi le ɖoɖo siwo woɖo ɖi zazã atsɔ awɔ sɔti eve ƒe ɖoɖo si me dometsotso le le dome.

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

Nya vevi siwo le eme

Emenyawo evelia

<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 la ƒe tɔtrɔ ɖe nɔnɔmewo ŋu

Ne míezã míaƒe grid Sass tɔtrɔwo kple anyigbatata siwo wotu ɖe eme la, anya wɔ be míatrɔ asi le grid ƒe hatsotso siwo woɖo ɖi do ŋgɔ ŋu keŋkeŋ. Trɔ tiers ƒe xexlẽme, media biabia ƒe didimewo, kple nugoe ƒe kekeme—emegbe nàgbugbɔ aƒo ƒu.

Sɔtiwo kple tsiɖɔɖɔɖɔƒewo

Woateŋu atrɔ asi le grid sɔtiwo ƒe xexlẽme ŋu to Sass ƒe tɔtrɔwo dzi. $grid-columnswozãna tsɔ wɔa sɔti ɖesiaɖe ƒe kekeme (le alafa memama me) esime $grid-gutter-widthwòɖoa sɔti ƒe tsidzɔƒewo ƒe kekeme.

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

Grid ƒe ƒuƒoƒoawo

Ne èyi ŋgɔ wu sɔtiawo ŋutɔ la, àte ŋu atrɔ asi le grid tiers ƒe xexlẽme hã ŋu. Ne èdi be yeakpɔ grid tiers ene ko la, àwɔ asitɔtrɔ le $grid-breakpointskple $container-max-widthsŋu wòazu nane si le abe esia ene:

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

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

Ne èle tɔtrɔ aɖewo wɔm le Sass ƒe tɔtrɔwo alo anyigbatatawo ŋu la, ahiã be nàdzra wò tɔtrɔwo ɖo eye nàgbugbɔ aƒo wo nu ƒu. Esia wɔwɔ ana grid ƒe hatsotso siwo woɖo ɖi do ŋgɔ ƒe ƒuƒoƒo yeye aɖe nadze na sɔti ƒe kekeme, vovototodedeameme, kple ɖoɖowɔwɔ. Woatrɔ asi le nukpɔkpɔ ƒe dɔwɔnu siwo ɖoa nya ŋu hã ŋu be woazã vovototodedeameme siwo wowɔ ɖe ɖoɖo nu. Kpɔ egbɔ be yeɖo grid ƒe asixɔxɔwo ɖe px(menye rem, em, alo %).