in English

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.

Ntawm nplooj ntawv no

Tau taub hau! Nco ntsoov nyeem nplooj phiaj ua ntej ua ntej dhia mus rau hauv yuav ua li cas hloov thiab kho koj daim phiaj kab.

Lawv ua haujlwm li cas

Kem tsim rau ntawm daim phiaj flexbox architecture. Flexbox txhais tau hais 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 rau kab rau koj cov ntsiab lus. Muaj qee zaus, koj tuaj yeem ua ke cov ntsiab lus thiab kab ke, 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

Ib ntawm peb kab

<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>

Ib ntawm peb kab

<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

Ib ntawm ob kab

<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.

.cov-9

.col-4
Txij li thaum 9 + 4 = 13 > 12, no 4-kem-div div tau qhwv mus rau ib kab tshiab ua ib chav sib txuas.

.col-6
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 &gt; 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 .rows, tab sis tsis yog txhua txoj kev siv yuav suav rau qhov no.

.col-6 .col-sm-3

<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 .

.col-6 .col-sm-4

<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 orderlos ntawm kev tawg (xws li, .order-1.order-md-2). Nws suav nrog kev txhawb nqa rau 1thoob 5plaws rau tag nrho rau qib kab sib chaws.

Ua ntej hauv DOM, tsis muaj kev txiav txim

Thib ob hauv DOM, nrog kev txiav txim loj dua

Thib peb hauv DOM, nrog kev txiav txim ntawm 1

<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-firstthiab .order-lastcov chav kawm uas hloov cov orderntsiab lus los ntawm kev thov order: -1thiab order: 6, feem. Cov chav kawm no tseem tuaj yeem sib xyaw nrog cov .order-*chav kawm lej raws li xav tau.

Ua ntej hauv DOM, xaj kawg

Thib ob hauv DOM, tsis tau xaj

Thib peb hauv DOM, xaj ua ntej

<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-4txav .col-md-4dhau plaub kab.

.col-md-4

txz | | |-- .col-md-4 .offset-md-4

txz -> ../All-md-3 .offset-md-3

txz -> ../All-md-6 .offset-md-3

<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 .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<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-autoli yuam cov kwv tij sib nrug deb ntawm ib leeg.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

<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 .rowlos 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.

.col-3: dav ntawm 25%

.col-sm-9: dav ntawm 75% saum sm breakpoint

<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 .clearfixwrapper 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>