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
.container
na pixel ƒe kekeme si ɖoa nya ŋu alo.container-fluid
nawidth: 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ɔ. Emegbepadding
wotsia 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
width
aɖo wo ɖokui abe sɔti siwo ƒe kekeme sɔ ene. Le kpɔɖeŋu me, kpɔɖeŋu ene siwo.col-sm
dometɔ ɖ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
width
s 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
padding
be woawɔ gutters le sɔti ɖekaɖekawo dome, ke hã, àteŋu aɖemargin
tso fliwo kplepadding
tso sɔtiwo me kple.no-gutters
le.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-4
ewɔa dɔ ɖe mɔ̃ suewo, titina, gã, kple gã bubuwo ŋu, gake menyexs
breakpoint 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 em
s alo rem
s hena lolome akpa gãtɔ gɔmeɖeɖe hã la, px
wozã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 xs
vaseɖ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>
Fli geɖe ƒe kekeme sɔsɔe
Wɔ sɔti siwo ƒe kekeme sɔ eye wokeke fli geɖe to .w-100
afisi nèdi be sɔtiawo nagbã ɖe fli yeye dzi la dede eme. Na ɖiɖiɖemeawo nawɔ dɔ to wo tsakatsaka .w-100
kple ɖ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-basis
alo 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.
<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.
<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}-auto
klasswo 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>
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ã .col
kple .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="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
).
<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ɔ.
<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 .row
kple matching padding utilities le .col
s la dzi. Ate ŋu ahiã be woatrɔ asi le .container
alo .container-fluid
dzila 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 .col
padding la ɖe edzi kple .px-lg-5
, míetsi tre ɖe ema ŋu kple .mx-lg-n5
le dzila la dzi .row
eye emegbe míetrɔ asi le .container
wrapper la ŋu kple .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>
Ð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 .row
abe 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.
<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>
À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-height
abe 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
<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 margin
s manyomanyowo ɖa le ɖeviwo ƒe sɔti siwo katã le enumake .row
la 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 .container
alo .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).
<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.
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.
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 > 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 .row
s geɖe, gake menye dɔwɔwɔ ƒe mɔnu ɖesiaɖee ateŋu abu akɔnta le esia ŋu o.
<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 .
<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 order
by breakpoint (le kpɔɖeŋu me, .order-1.order-md-2
). Kpekpeɖeŋu na 1
to 12
le grid tiers atɔ̃awo katã me hã le eme.
<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-first
kple .order-last
classes li siwo trɔa the order
of an element to dɔwɔwɔ order: -1
kple 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 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-4
eʋuna .col-md-4
ɖe sɔti ene dzi.
<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 .
<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-auto
alesi nàzi nɔviwo ƒe sɔtiwo dzi be woadzo le wo nɔewo gbɔ ene.
<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 .row
kple ƒ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="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);
}
}
<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-columns
wozãna tsɔ wɔa sɔti ɖesiaɖe ƒe kekeme (le alafa memama me) esime $grid-gutter-width
wòɖ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-breakpoints
kple $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 %
).