Imihlathi
Funda indlela yokuguqula iikholamu kunye nokhetho olumbalwa lolungelelwaniso, ukuodola, kunye nokunciphisa umbulelo kwinkqubo yethu yegridi ye-flexbox. Kwaye, bona indlela yokusebenzisa iiklasi zekholomu ukulawula ububanzi bezinto ezingezizo igridi.
Indlela abasebenza ngayo
-
Iikholamu zakha kuyilo lwebhokisi yegridi. I-Flexbox ithetha ukuba sinokhetho lokutshintsha iikholamu zomntu ngamnye kunye nokuguqula amaqela amakholomu kwinqanaba lomqolo . Ukhetha indlela amakholomu akhula ngayo, ayancipha, okanye atshintshe ngenye indlela.
-
Xa ukwakhiwa koyilo lwegridi, wonke umxholo uhamba kwiikholomu. Uluhlu lwegridi yeBootstrap isuka kwisikhongozeli ukuya kumqolo ukuya kuluhlu kumxholo wakho. Ngezihlandlo ezinqabileyo, unokudibanisa umxholo kunye nekholamu, kodwa qaphela ukuba kunokubakho iziphumo ezingalindelekanga.
-
I-Bootstrap ibandakanya iiklasi ezichazwe kwangaphambili zokudala ukukhawuleza, uhlengahlengiso oluphendulayo. Ngamagqabantshintshi amathandathu kunye neshumi elinambini leekholamu kwinqanaba ngalinye legridi, sineeklasi ezininzi esele zakhelwe ukuba wenze uyilo olufunekayo. Oku kunokucinywa nge-Sass ukuba uyafuna.
Ulungelelwaniso
Sebenzisa izinto eziluncedo zolungelelwaniso lwebhokisi eguquguqukayo ukulungelelanisa amakholomu ngokuthe nkqo nangokuthe tye.
Ulungelelwaniso oluthe nkqo
<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>
Ulungelelwaniso oluthe tye
<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>
Ukusonga ikholamu
Ukuba ngaphezu kweekholamu ezili-12 zibekwe ngaphakathi kumqolo omnye, iqela ngalinye leekholamu ezongezelelweyo liya kuthi, njengeyunithi enye, isonge kumgca omtsha.
Ukusukela ku-9 + 4 = 13 > 12, le div-ububanzi bekholamu-4 ibotshelelwa kumgca omtsha njengeyunithi enye edibanayo.
Imiqolo elandelayo iqhubeleka nomgca omtsha.
<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>
Uqhawulo lwekholamu
Ukwaphula iikholamu kumgca omtsha kwi-flexbox kufuna i-hack encinci: yongeza i-element kunye width: 100%
naphi na apho ufuna ukusonga iikholomu zakho kumgca omtsha. Ngokuqhelekileyo oku kufezekiswa ngee-multiple .row
s, kodwa ayizizo zonke iindlela zokuphunyezwa ezinokuphendula oku.
<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>
Unokusebenzisa eli khefu kwiindawo ezithile zokuqhawula kunye nezixhobo zethu zokubonisa eziphendulayo .
<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>
Ukucwangcisa ngokutsha
Iiklasi zokuodola
Sebenzisa .order-
iiklasi zokulawula ukulandelelana okubonakalayo komxholo wakho. Ezi klasi ziyaphendula, ngoko unokuseta i- order
breakpoint (umz., .order-1.order-md-2
). Ibandakanya inkxaso 1
kuwo 5
onke amanqwanqwa egridi amathandathu.
<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>
Kukwakho neeklasi eziphendulayo .order-first
kunye .order-last
neeklasi ezitshintsha i order
-elementi ngokufaka order: -1
kwaye order: 6
, ngokulandelelanayo. Ezi klasi zinokudityaniswa .order-*
neeklasi ezinamanani njengoko zifuneka.
<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>
Imihlathi yokumisela
Ungalungisa iikholamu zegridi ngeendlela ezimbini: .offset-
iiklasi zethu zegridi eziphendulayo kunye nezixhobo zethu zomda . Iiklasi zegridi zilingana ukuze zitshatise iikholamu ngelixa imida iluncedo kakhulu kuyilo olukhawulezayo apho ububanzi be-offset buyaguquguquka.
Iiklasi ze-Offset
Hambisa iikholamu ekunene usebenzisa .offset-md-*
iiklasi. Ezi klasi zonyusa umda wasekhohlo wekholam *
ngokweekholamu. Umzekelo, .offset-md-4
uhamba .col-md-4
ngaphaya kweekholamu ezine.
<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>
Ukongeza kokucocwa kweekholamu kwiindawo eziphendulayo, unokufuna ukuseta ngokutsha ii-offsets. Bona oku kwisenzo kumzekelo wegridi .
<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>
Izixhobo zomda
Ngokuya kwi-flexbox kwi-v4, ungasebenzisa izinto eziluncedo zomda njengokunyanzela .me-auto
iikholamu zabantakwabo kude kwenye.
<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>
Iiklasi zekholamu ezizimeleyo
Iiklasi .col-*
zingasetyenziswa ngaphandle a .row
ukunika isiqalelo ububanzi obuthile. Nanini na xa iiklasi zekholomu zisetyenziswa njengabantwana abangathanga ngqo kumqolo, iipadi azifakwa.
<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>
Iiklasi zingasetyenziswa kunye nezinto eziluncedo ukwenza imifanekiso ephendulayo edadayo. Qinisekisa ukusonga umxholo .clearfix
kwisonga ukucima into edadayo ukuba umbhalo umfutshane.
Umhlathi wesibambi-ndawo. Siyisebenzisa apha ukubonisa ukusetyenziswa kweklasi ecacileyo. Songeza amabinzana ambalwa angenantsingiselo apha ukubonisa indlela iikholamu ezinxibelelana ngayo apha nomfanekiso odadayo.
Njengoko unokubona imihlathi ngobubele isonge umfanekiso odadayo. Ngoku khawufane ucinge ukuba oku kuya kujongeka njani ngomxholo wokwenyani apha, kunokuba nje lo mbhalo udikayo wesibambi-ndawo oqhubekayo, kodwa eneneni awugqithisi lwazi lubambekayo kuyo. Ithatha nje indawo kwaye akufanelekanga ukuba ifundwe ngokwenene.
Kwaye okwangoku, nanku wena, usazingise ekufundeni esi sicatshulwa sesibambi-ndawo, ngethemba lokuqonda ngakumbi, okanye iqanda le-Easter elifihliweyo lomxholo. Isiqhulo, mhlawumbi. Ngelishwa, akukho nto apha.
<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>