Cov kab
Kawm yuav ua li cas hloov cov kab nrog ib tug puv tes ntawm kev xaiv rau kev sib tw, kev txiav txim, thiab offsetting ua tsaug rau peb flexbox grid system. Ntxiv rau, saib yuav ua li cas siv cov chav kawm kab ke los tswj qhov dav ntawm cov ntsiab lus uas tsis yog kab sib chaws.
Lawv ua haujlwm li cas
-
Kem tsim rau ntawm daim phiaj flexbox architecture. Flexbox txhais tau tias peb muaj kev xaiv rau kev hloov cov kab ke ib leeg thiab hloov kho cov kab ke ntawm kab kab . Koj xaiv yuav ua li cas cov kab loj hlob, txo qis, lossis hloov lwm yam.
-
Thaum tsim daim phiaj layouts, tag nrho cov ntsiab lus mus rau hauv kab. Lub hierarchy ntawm Bootstrap daim phiaj mus los ntawm lub thawv rau kab mus rau kab rau koj cov ntsiab lus. Muaj qee zaus, koj tuaj yeem muab cov ntsiab lus thiab kab ke sib txuas, tab sis yuav tsum paub tias muaj peev xwm ua rau tsis muaj qhov tshwm sim.
-
Bootstrap suav nrog cov chav kawm uas tau teev ua ntej rau kev tsim cov txheej txheem ceev, teb. Nrog rau 6 lub ntsiab lus thiab kaum ob kab ntawm txhua kab kab sib chaws, peb muaj kaum ob chav kawm uas twb tau tsim rau koj los tsim koj qhov kev xav tau layouts. Qhov no tuaj yeem cuam tshuam los ntawm Sass yog tias koj xav tau.
Kev sib tw
Siv flexbox alignment utilities rau vertically thiab horizontally dlhos kab.
Vertical alignment
<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>
Kab rov tav alignment
<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>
Kem wrapping
Yog tias ntau tshaj 12 kab tau muab tso rau hauv ib kab, txhua pawg ntawm cov kab ntxiv yuav, raws li ib chav tsev, qhwv rau ib kab tshiab.
Txij li thaum 9 + 4 = 13 > 12, no 4-kem-div div tau qhwv mus rau ib kab tshiab ua ib chav sib txuas.
Cov kab tom ntej txuas ntxiv raws kab tshiab.
<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>
Kem so
Kev tawg kab mus rau kab tshiab hauv flexbox yuav tsum muaj lub hack me me: ntxiv cov khoom nrog width: 100%
txhua qhov chaw koj xav qhwv koj cov kab rau kab tshiab. Feem ntau qhov no ua tiav nrog ntau yam .row
s, tab sis tsis yog txhua txoj kev siv yuav suav rau qhov no.
<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>
Koj tseem tuaj yeem siv qhov kev so no ntawm cov ntsiab lus tshwj xeeb nrog peb cov khoom siv hluav taws xob ua haujlwm .
<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>
Reordering
Txiav cov chav kawm
Siv .order-
cov chav kawm los tswj qhov kev txiav txim pom ntawm koj cov ntsiab lus. Cov chav kawm no yog teb, yog li koj tuaj yeem teeb tsa order
los ntawm kev tawg (xws li, .order-1.order-md-2
). Nws suav nrog kev txhawb nqa rau 1
thoob 5
plaws rau tag nrho rau qib kab sib chaws.
<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>
Kuj tseem muaj cov lus teb .order-first
thiab .order-last
cov chav kawm uas hloov cov order
ntsiab lus los ntawm kev thov order: -1
thiab order: 6
, feem. Cov chav kawm no tseem tuaj yeem sib xyaw nrog cov .order-*
chav kawm lej raws li xav tau.
<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>
Offsetting kab
Koj tuaj yeem offset kab kab hauv ob txoj hauv kev: peb .offset-
cov chav kawm kab sib txuas lus thiab peb cov khoom siv hluav taws xob . Cov chav kawm kab sib chaws yog qhov loj me kom phim cov kab thaum cov npoo muaj txiaj ntsig zoo dua rau cov txheej txheem nrawm uas qhov dav ntawm qhov offset sib txawv.
Cov chav kawm offset
Txav cov kab mus rau sab xis siv .offset-md-*
cov chav kawm. Cov chav kawm no nce sab laug ntawm ib kab los ntawm *
kab. Piv txwv li, .offset-md-4
txav .col-md-4
dhau plaub kab.
<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>
Ntxiv nrog rau kev tshem tawm kab ntawm cov ntsiab lus teb, koj yuav tsum tau rov pib dua offsets. Saib qhov no hauv kev nqis tes ua hauv daim phiaj piv txwv .
<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>
Cov khoom siv dav dav
Nrog rau kev txav mus rau flexbox hauv v4, koj tuaj yeem siv cov khoom siv paj nruag zoo .me-auto
li yuam cov kwv tij sib nrug deb ntawm ib leeg.
<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>
Cov chav kawm nyob ib leeg
Cov .col-*
chav kawm kuj tseem siv tau sab nraud .row
los muab cov ntsiab lus tshwj xeeb dav. Thaum twg cov chav kawm kem raug siv los ua cov menyuam tsis ncaj ntawm ib kab, cov paddings raug tshem tawm.
<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>
Cov chav kawm tuaj yeem siv ua ke nrog cov khoom siv los tsim cov duab floated teb. Nco ntsoov qhwv cov ntsiab lus hauv lub .clearfix
wrapper kom tshem cov ntab yog tias cov ntawv luv luv.
Ib kab lus ntawm qhov chaw cov ntawv nyeem. Peb tab tom siv nws ntawm no los qhia txog kev siv cov chav kawm clearfix. Peb tab tom ntxiv ob peb nqe lus tsis muaj ntsiab lus ntawm no los ua kom pom tias kab ntawv cuam tshuam li cas ntawm no nrog cov duab ntab.
Raws li koj tuaj yeem pom cov kab lus gracefully qhwv ncig cov duab ntab. Tam sim no xav txog yuav ua li cas qhov no yuav zoo nrog qee cov ntsiab lus tseeb hauv no, tsis yog tsuas yog cov ntawv nyeem qhov tho txawv no uas mus rau thiab mus, tab sis qhov tseeb qhia tsis muaj cov ntaub ntawv tangible ntawm. Nws tsuas siv qhov chaw thiab yuav tsum tsis txhob nyeem tiag tiag.
Thiab tseem, ntawm no koj yog, tseem ua siab ntev nyeem cov ntawv sau qhov chaw no, vam tias muaj qee qhov kev nkag siab ntxiv, lossis qee qhov zais easter qe ntawm cov ntsiab lus. Ib tug tso dag, tej zaum. Hmoov tsis zoo, tsis muaj ib qho ntawm no.
<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>