Kolòn

Aprann kijan pou modifye kolòn ak yon ti ponyen opsyon pou aliyman, kòmande, ak konpanse gras a sistèm griy flexbox nou an. Anplis, gade kijan pou itilize klas kolòn pou jere lajè eleman ki pa kadriyaj yo.

Nan paj sa a

Tèt leve! Asire w ou li paj Grid la an premye anvan ou plonje nan fason pou modifye ak pèrsonalize kolòn kadriyaj ou yo.

Ki jan yo travay

Kolòn yo bati sou achitekti flexbox griy la. Flexbox vle di nou gen opsyon pou chanje kolòn endividyèl ak modifye gwoup kolòn nan nivo ranje a . Ou chwazi fason kolòn grandi, retresi, oswa chanje.
Lè w ap bati fòm griy, tout kontni ale nan kolòn. Yerachi kadriyaj Bootstrap la ale soti nan veso an ranje nan kolòn nan kontni ou. Nan okazyon ki ra, ou ka konbine kontni ak kolòn, men ou dwe konsyan ke ka gen konsekans envolontè.
Bootstrap gen ladan klas predefini pou kreye rapid, layout reponn. Avèk sis pwen rupture ak yon douzèn kolòn nan chak nivo kadriyaj, nou gen plizyè douzèn klas ki deja bati pou ou kreye layout ou vle. Sa a ka enfim atravè Sass si ou vle.

Aliyman

Sèvi ak sèvis piblik aliyman flexbox pou aliman kolòn vètikal ak orizontal.

Aliyman vètikal

Youn nan twa kolòn

html

<div class="container text-center">
  <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>

Youn nan twa kolòn

html

<div class="container text-center">
  <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>

Aliyman orizontal

Youn nan de kolòn

html

<div class="container text-center">
  <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>

Anbalaj kolòn

Si plis pase 12 kolòn yo mete nan yon sèl ranje, chak gwoup kolòn siplemantè pral, kòm yon sèl inite, vlope sou yon nouvo liy.

.col-9

.col-4
Depi 9 + 4 = 13 > 12, div 4 kolòn lajè sa a vin vlope sou yon nouvo liy kòm yon sèl inite kontigu.

.col-6
Kolòn ki vin apre yo kontinye sou nouvo liy lan.

html

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

Kolòn kraze

Kraze kolòn nan yon nouvo liy nan flexbox mande pou yon ti Hack: ajoute yon eleman ak width: 100%tout kote ou vle vlope kolòn ou nan yon nouvo liy. Nòmalman sa a se akonpli ak plizyè .rows, men se pa tout metòd aplikasyon ka kont pou sa.

.col-6 .col-sm-3

html

<div class="container text-center">
  <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>

Ou ka aplike repo sa a tou nan pwen pause espesifik ak sèvis piblik ekspozisyon sansib nou yo .

.col-6 .col-sm-4

html

<div class="container text-center">
  <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>

Rekòmande

Lòd klas yo

Sèvi ak .order-klas pou kontwole lòd vizyèl kontni ou. Klas sa yo reponn, kidonk ou ka fikse orderpa pwen rupture (egzanp, .order-1.order-md-2). Gen ladann sipò pou 1atravè 5tout sis nivo kadriyaj.

Premye nan DOM, pa gen okenn lòd aplike

Dezyèm nan DOM, ak yon pi gwo lòd

Twazyèm nan DOM, ak yon lòd 1

html

<div class="container text-center">
  <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>

Genyen tou responsive .order-firstak .order-lastklas ki chanje a ordernan yon eleman lè yo aplike order: -1ak order: 6, respektivman. Klas sa yo kapab tou melanje ak klas nimewote .order-*yo jan sa nesesè.

Premye nan DOM, kòmande dènye

Dezyèm nan DOM, san lòd

Twazyèm nan DOM, kòmande an premye

html

<div class="container text-center">
  <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>

Kolòn konpanse

Ou ka konpanse kolòn kadriyaj yo nan de fason: .offset-klas griy ki reponn ak sèvis piblik Marge nou yo . Klas kadriyaj yo gwosè pou matche ak kolòn pandan y ap maj yo pi itil pou layouts rapid kote lajè konpanse a varyab.

Klas konpanse

Deplase kolòn sou bò dwat yo lè l sèvi avèk .offset-md-*klas yo. Klas sa yo ogmante maj gòch yon kolòn pa *kolòn. Pou egzanp, .offset-md-4deplase .col-md-4sou kat kolòn.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

html

<div class="container text-center">
  <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>

Anplis netwayaj kolòn nan pwen rupture ki reponn, ou ka bezwen reset konpanse yo. Gade sa an aksyon nan egzanp kadriyaj la .

.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

html

<div class="container text-center">
  <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>

Marge sèvis piblik

Avèk mouvman flexbox nan v4, ou ka itilize sèvis piblik Marge tankou .me-autofòse kolòn frè ak sè yo lwen youn ak lòt.

.col-md-4

.col-md-4 .ms-oto

.col-md-3 .ms-md-oto

.col-oto .me-oto

.col-oto

html

<div class="container text-center">
  <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>

Klas kolòn otonòm

Klas .col-*yo ka itilize deyò tou .rowpou bay yon eleman yon lajè espesifik. Chak fwa yo itilize klas kolòn kòm pitit ki pa dirèk nan yon ranje, paddings yo omisyon.

.col-3: lajè 25%

.col-sm-9: lajè 75% pi wo pase sm breakpoint

html

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

Klas yo ka itilize ansanm ak sèvis piblik yo pou kreye imaj k ap flote reponn. Asire w ou vlope kontni an nan yon .clearfixanbalaj pou netwaye flote a si tèks la pi kout.

Yon paragraf tèks anplasman. Nou itilize li isit la pou montre itilizasyon klas clearfix la. Nou ap ajoute byen kèk fraz san sans isit la yo demontre ki jan kolòn yo kominike isit la ak imaj la flote.

Kòm ou ka wè paragraf yo grasyeuz vlope nan imaj la flote. Koulye a, imajine ki jan sa a ta gade ak kèk kontni aktyèl nan isit la, olye ke jis sa a tèks raz kote sa a ki ale sou yo ak sou, men aktyèlman transmèt pa gen okenn enfòmasyon byen mèb nan. Li tou senpleman pran espas epi li pa ta dwe reyèlman li.

Men, isit la ou ye, toujou pèsevere nan lekti tèks sa a anplasman, espere jwenn kèk plis lide, oswa kèk ze Pak kache nan kontni. Yon blag, petèt. Malerezman, pa gen okenn nan sa isit la.

html

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