Safu
Jifunze jinsi ya kurekebisha safu wima kwa chaguo chache za upangaji, kuagiza, na kusawazisha shukrani kwa mfumo wetu wa gridi ya flexbox. Pia, angalia jinsi ya kutumia madarasa ya safuwima kudhibiti upana wa vipengee visivyo vya gridi ya taifa.
Jinsi wanavyofanya kazi
-
Safu wima huunda kwenye usanifu wa kisanduku cha gridi. Flexbox inamaanisha tuna chaguo za kubadilisha safu wima mahususi na kurekebisha vikundi vya safu wima katika kiwango cha safu mlalo . Unachagua jinsi safu wima zinavyokua, kupungua, au vinginevyo kubadilika.
-
Wakati wa kuunda mipangilio ya gridi ya taifa, maudhui yote huenda kwenye safu wima. Daraja la gridi ya Bootstrap huenda kutoka kwa chombo hadi safu hadi safu hadi kwenye maudhui yako. Mara chache, unaweza kuchanganya maudhui na safu wima, lakini fahamu kuwa kunaweza kuwa na matokeo yasiyotarajiwa.
-
Bootstrap inajumuisha madarasa yaliyofafanuliwa awali kwa kuunda mipangilio ya haraka, inayoitikia. Ukiwa na sehemu sita za kukiuka na safu wima kadhaa katika kila daraja la gridi, tuna madarasa kadhaa ambayo tayari yameundwa kwa ajili yako ili kuunda mipangilio unayotaka. Hii inaweza kulemazwa kupitia Sass ukipenda.
Mpangilio
Tumia huduma za upatanishaji wa kisanduku chenye kubadilika ili kupanga safu wima na kimlalo.
Mpangilio wa wima
<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>
Mpangilio wa mlalo
<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>
Kufunga safu
Ikiwa zaidi ya safu wima 12 zimewekwa ndani ya safu mlalo moja, kila kundi la safu wima za ziada, kama kitengo kimoja, litajifunga kwenye mstari mpya.
Tangu 9 + 4 = 13 > 12, div hii ya safu wima 4 inafungwa kwenye mstari mpya kama kitengo kimoja kinachoambatana.
wima zinazofuata zinaendelea kwenye mstari mpya.
<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>
Mapumziko ya safu wima
Kuvunja safu wima hadi mstari mpya katika flexbox kunahitaji udukuzi mdogo: ongeza kipengele width: 100%
popote unapotaka kukunja safuwima zako kwenye mstari mpya. Kawaida hii inakamilishwa na .row
s nyingi, lakini sio kila njia ya utekelezaji inaweza kuhesabu hii.
<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>
Unaweza pia kutumia mapumziko haya katika sehemu mahususi za kuhitimisha huduma zetu za onyesho .
<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>
Kupanga upya
Agiza madarasa
Tumia .order-
madarasa kudhibiti mpangilio wa kuona wa maudhui yako. Madarasa haya ni msikivu, kwa hivyo unaweza kuweka order
kwa kuvunja (kwa mfano, .order-1.order-md-2
). Inajumuisha usaidizi kwa 1
viwango 5
vyote sita vya gridi ya taifa.
<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>
Pia kuna madarasa sikivu .order-first
na .order-last
yanayobadilisha order
kipengele kwa kutumia order: -1
na order: 6
, mtawalia. Madarasa haya pia yanaweza kuchanganywa na .order-*
madarasa yaliyohesabiwa kama inahitajika.
<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>
Kuweka safu wima
Unaweza kurekebisha safu wima kwa njia mbili: .offset-
madarasa yetu ya gridi ya jibu na huduma zetu za ukingo . Madarasa ya gridi yana ukubwa ili kuendana na safu wima ilhali pambizo ni muhimu zaidi kwa mipangilio ya haraka ambapo upana wa mkato ni tofauti.
Madarasa ya kukabiliana
Sogeza safu kulia kwa kutumia .offset-md-*
madarasa. Madarasa haya huongeza ukingo wa kushoto wa safu kwa safu *
wima. Kwa mfano, .offset-md-4
husogea .col-md-4
zaidi ya safu wima nne.
<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>
Kando na ufutaji wa safu wima kwenye sehemu za kukiuka zinazoitikia, huenda ukahitaji kuweka upya vipengee. Tazama hii katika vitendo katika mfano wa gridi ya taifa .
<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>
Huduma za pembezoni
Pamoja na hoja ya flexbox katika v4, unaweza kutumia huduma za ukingo kama vile .me-auto
kulazimisha safu wima kutoka kwa nyingine.
<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>
Madarasa ya safu wima ya pekee
Madarasa .col-*
pia yanaweza kutumika nje a .row
kutoa kipengee upana maalum. Wakati wowote madarasa ya safu wima yanapotumika kama watoto wasio wa moja kwa moja wa safu mlalo, pedi huachwa.
<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>
Madarasa yanaweza kutumika pamoja na huduma kuunda picha zinazosikika zinazoelea. Hakikisha kuwa umefunga yaliyomo kwenye .clearfix
kanga ili kufuta kuelea ikiwa maandishi ni mafupi.
Aya ya maandishi ya kishika nafasi. Tunaitumia hapa kuonyesha matumizi ya darasa la clearfix. Tunaongeza misemo michache isiyo na maana hapa ili kuonyesha jinsi safu wima zinavyoingiliana hapa na picha iliyoelea.
Kama unavyoweza kuona aya hufunika kwa uzuri kwenye picha iliyoelea. Sasa fikiria jinsi hii inavyoonekana na maudhui halisi hapa, badala ya maandishi haya ya kuchosha ya kishikilia nafasi ambayo yanaendelea na kuendelea, lakini kwa kweli hayawasilishi habari inayoonekana. Inachukua nafasi tu na haipaswi kusomwa.
Na bado, wewe hapa, bado unadumu katika kusoma maandishi haya ya kishikilia nafasi, ukitarajia maarifa zaidi, au yai la pasaka iliyofichwa ya yaliyomo. Utani, labda. Kwa bahati mbaya, hakuna hayo hapa.
<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>