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.

<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ɔe le mɔ̃ geɖe siwo si kplɔ̃ si le asi me le dzi.

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.

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

Woateŋu ama sɔti siwo ƒe kekeme sɔ ɖe fli geɖe me, gake 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 ènya nu yeyewo o.

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</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.

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

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

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

Wɔ sɔti siwo ƒe kekeme sɔ eye wokeke ɖe fli geɖe dzi 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 kple ɖeɖefia dɔwɔnu.w-100 aɖewo siwo ɖoa nya ŋu me .

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

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.

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

Woƒo wo nu ƒu ɖe anyigba dzi

Ne èzã .col-sm-*klass ɖeka la, àte ŋu awɔ gɔmedzenu grid ɖoɖo si dzea egɔme tso ƒuƒoƒo me hafi va zua horizontal kple le breakpoint sue ( sm).

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

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

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

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

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

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

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

<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ɔti ƒe kekeme, ŋuɖoɖo ƒe dzidzenuwo, ɖoɖo yeyewo, kple bubuwo).

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .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 dzi.

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

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.

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

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

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

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.

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </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ã.

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but 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.

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

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 .

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

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.

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

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

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

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 míeɖo do ŋgɔ la zãa tɔtrɔ kple mixins siawo ke 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 {
  width: 800px;
  @include make-container();
}

.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 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 kekemewo (le alafa memamã me) esime $grid-gutter-widthwòɖea mɔ ɖe kekeme siwo ku ɖe gbagbãƒe koŋ ŋu siwo woma sɔsɔe le sɔtiawo ƒe tsidzɔƒewo padding-leftkple na wo ŋu.padding-right

$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 %).