Sɔtiwo
Srɔ̃ alesi nàtrɔ asi le sɔtiwo ŋu kple tiatia ʋɛ aɖewo hena ɖoɖowɔwɔ, ɖoɖowɔwɔ, kple vovototodedeameme akpe ɖe míaƒe flexbox grid ɖoɖoa ŋu. Gakpe ɖe eŋu la, kpɔ alesi nàzã kɔlam ƒe hatsotsowo atsɔ akpɔ nusiwo menye grid o ƒe kekemewo gbɔe.
Ale si wowɔa dɔe
-
Sɔtiwo tu ɖe grid la ƒe flexbox xɔtuɖaŋu dzi. Flexbox fia be tiatia aɖewo le mía si hena sɔti ɖekaɖekawo tɔtrɔ kple sɔtiwo ƒe ƒuƒoƒowo ƒe tɔtrɔ le fli ƒe ɖoɖo nu . Ètiaa alesi sɔtiwo tsina, woɖiɖina, alo wotrɔna le mɔ bubu nu.
-
Ne wole grid ƒe ɖoɖowo tum la, emenyawo katã yia sɔtiwo me. Bootstrap ƒe grid ƒe ɖoɖo si le ɖoɖo nu la tsoa nugoe me yia fli me yia sɔti me yia wò nyatakakawo gbɔ. Le ɣeyiɣi siwo mebɔ o me la, àte ŋu aƒo emenyawo kple nyatiwo nu ƒu ɖekae, gake nyae be emetsonu siwo mèdi o ate ŋu ado tso eme.
-
Bootstrap la lɔ klass siwo woɖo ɖi do ŋgɔ hena ɖoɖowɔwɔ kabakaba, siwo ɖoa nya ŋu la ɖe eme. Esi breakpoint ade kple sɔti wuieve le grid tier ɖesiaɖe dzi ta la, míetu klass bla nanewo xoxo na wò be nàwɔ ɖoɖo siwo nèdi. Woateŋu awɔ esia nuwɔametɔe to Sass dzi ne èdi.
Ð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 class="row justify-content-evenly">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</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.
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 5
le grid tiers adeawo 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-5">
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: 6
, ɖ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 .me-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 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
</div>
<div class="row">
<div class="col-auto me-auto">.col-auto .me-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Klass siwo le wo ɖokui si
Woateŋu azã .col-*
klassawo hã le a godo .row
atsɔ ana element aɖe ƒe kekeme tɔxɛ aɖe. Ɣesiaɣi si wozã sɔti ƒe klasswo abe fli aɖe ƒe vi siwo menye tẽ o ene la, woɖea paddingawo ɖa.
<div class="col-3 bg-light p-3 border">
.col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: width of 75% above sm breakpoint
</div>
Woateŋu azã klassawo ɖekae kple dɔwɔnuwo atsɔ awɔ nɔnɔmetata siwo le tsia dzi siwo ɖoa nya ŋu. Kpɔ egbɔ be yexatsa emenyawo ɖe .clearfix
agbalẽ xatsaxatsa me be nàkɔ float la me ne nuŋɔŋlɔa le kpuie wu.
Teƒeɖoɖo ƒe nuŋɔŋlɔ ƒe memama aɖe. Míele ezãm le afisia tsɔ le clearfix ƒe klass la zazã ɖem fia. Míele nyagbe ʋee aɖewo siwo gɔmesese aɖeke mele o kpem ɖe eŋu le afisia be míatsɔ aɖe alesi sɔtiawo wɔa dɔe le afisia kple nɔnɔmetata si le tsia dzi la afia.
Abe alesi nàte ŋu akpɔe ene la, memamãawo xatsa nɔnɔmetata si le tsia dzi la nyuie. Azɔ bu alesi esia adze kple nya ŋutɔŋutɔ aɖewo le afisia ŋu kpɔ, tsɔ wu be wòanye teƒenɔla ƒe nuŋɔŋlɔ sia si tea ɖeɖi ame ŋu si yia edzi yia edzi, gake le nyateƒe me la, megblɔa nyatakaka ŋutɔŋutɔ aɖeke le. Ðeko wòxɔa teƒe eye mele be woaxlẽe ŋutɔŋutɔ o.
Eye ke hã, wòe nye esi, nègale kutri kum le teƒenɔla ƒe nuŋɔŋlɔ sia xexlẽ me, le mɔ kpɔm be gɔmesese bubu aɖewo nasu asiwò, alo easter azi ɣaɣla aɖewo siwo me nyawo le. Nukokoedoname aɖe, ɖewohĩ. Nublanuitɔe la, esiawo dometɔ aɖeke mele afisia o.
<div class="clearfix">
<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
<p>
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>
<p>
As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
</p>
<p>
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
</p>
</div>