Nā kolamu

E aʻo pehea e hoʻololi ai i nā kolamu me ka liʻiliʻi o nā koho no ka hoʻolikelike ʻana, ka hoʻonohonoho ʻana, a me ka hoʻopau ʻana i ka mahalo i kā mākou ʻōnaehana flexbox grid. Eia hou, e ʻike pehea e hoʻohana ai i nā papa kolamu e hoʻokele ai i nā laula o nā mea non-grid.

Ma kēia ʻaoʻao

Nā poʻo i luna! E heluhelu mua i ka ʻaoʻao Grid ma mua o ka luʻu ʻana i ke ʻano o ka hoʻololi ʻana a me ka hoʻopilikino ʻana i kāu kolamu grid.

Pehea lākou e hana ai

Kūkulu ʻia nā kolamu ma luna o ka hoʻolālā pahu pahu hoʻololi. ʻO ka Flexbox, loaʻa iā mākou nā koho no ka hoʻololi ʻana i nā kolamu pākahi a me ka hoʻololi ʻana i nā hui o nā kolamu ma ka pae lālani . Nau e koho pehea e ulu ai, e emi ai, a e loli ai paha na kolamu.
I ke kūkulu ʻana i nā hoʻolālā mānoanoa, hele nā ʻike āpau i nā kolamu. E hele ana ka hierarchy o ka mākia o Bootstrap mai kahi pahu i kekahi lālani i ke kolamu i kāu ʻike. I nā manawa kakaikahi, hiki iā ʻoe ke hoʻohui i ka ʻike a me ke kolamu, akā e makaʻala hiki ke loaʻa nā hopena i manaʻo ʻole ʻia.
Loaʻa i ka Bootstrap nā papa i koho mua ʻia no ka hana ʻana i nā hoʻolālā wikiwiki a pane. Me ʻeono mau haʻihaʻi a me hoʻokahi kakini kolamu ma kēlā me kēia pae mānoanoa, loaʻa iā mākou nā papa he nui i kūkulu ʻia no ʻoe e hana i kāu mau hoʻolālā makemake. Hiki ke hoʻopau ʻia kēia ma o Sass inā makemake ʻoe.

Hoʻopololei

E hoʻohana i nā pono hana hoʻopololei flexbox e hoʻopololei i nā kolamu ma ke kū pololei a me ke alo.

Hoʻopololei pololei

ʻO kekahi o nā kolamu ʻekolu

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>

ʻO kekahi o nā kolamu ʻekolu

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>

Hoʻopololei hoʻopololei

Hoʻokahi o nā kolamu ʻelua

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>

ʻOpiʻi kolamu

Inā ʻoi aku ma mua o 12 kolamu i hoʻokomo ʻia i loko o ka lālani hoʻokahi, e hoʻopili ʻia kēlā me kēia hui o nā kolamu ʻē aʻe, ma ke ʻano he ʻāpana hoʻokahi, i kahi laina hou.

.col-9

.col-4
Mai ka 9 + 4 = 13 > 12, ua wili ʻia kēia div 4-kolani-ākea i kahi laina hou ma ke ʻano he ʻāpana pili.

.col-6
Hoʻomau nā kolamu ma ka laina hou.

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>

Haʻi kolamu

ʻO ka uhaki ʻana i nā kolamu i kahi laina hou i ka flexbox pono i kahi hack liʻiliʻi: e hoʻohui i kahi mea me width: 100%nā wahi āu e makemake ai e hoʻopili i kāu mau kolamu i kahi laina hou. Hoʻokō maʻamau kēia me nā .rows he nui, akā ʻaʻole hiki i kēlā me kēia ʻano hoʻokō ke helu i kēia.

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

Hiki iā ʻoe ke hoʻohana i kēia hoʻomaha ma nā wahi haʻihaʻi kikoʻī me kā mākou mau pono hōʻike pane .

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

Hoʻonohonoho hou

Kauoha papa

E hoʻohana i nā.order- papa no ka mālama ʻana i ke ʻano o kāu ʻike. Hoʻopili kēia mau papa, no laila hiki iā ʻoe ke hoʻonohonoho i ka by breakpoint (eg, ). Loaʻa i ke kākoʻo ma waena o nā pae mānoanoa ʻeono.order.order-1.order-md-215

ʻO ka mua ma DOM, ʻaʻohe kauoha i kau ʻia

ʻO ka lua ma DOM, me kahi kauoha nui

ʻEkolu ma DOM, me ke kauoha o 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>

Aia pū kekahi pane .order-firsta me .order-lastnā papa e hoʻololi i ke ʻano ordero kahi mea ma ke noi ʻana order: -1a me order: 6, kēlā me kēia. Hiki ke hui pū ʻia kēia mau .order-*papa me nā papa helu e like me ka mea e pono ai.

ʻO ka mua ma DOM, kauoha hope

ʻO ka lua ma DOM, ʻaʻole i hoʻonohonoho ʻia

ʻO ke kolu ma DOM, kauoha mua

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>

Hoʻopio i nā kolamu

Hiki iā ʻoe ke hoʻokaʻawale i nā kolamu mānoanoa ma nā ʻano ʻelua: kā mākou .offset-papa hana pane pane a me kā mākou mau pono hana margin . Hoʻohālikelike ʻia nā papa Grid e hoʻohālikelike i nā kolamu a ʻoi aku ka maikaʻi o nā palena no nā hoʻolālā wikiwiki kahi e loli ai ka laulā o ka offset.

Nā papa offset

E hoʻoneʻe i nā kolamu i ka ʻākau me ka hoʻohana ʻana i .offset-md-*nā papa. Hoʻonui kēia mau papa i ka palena hema o kahi kolamu ma *nā kolamu. No ka laʻana, .offset-md-4neʻe .col-md-4ma luna o ʻehā kolamu.

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

Ma waho aʻe o ka hoʻomaʻemaʻe kolamu ma nā wahi haʻi pane, pono paha ʻoe e hoʻonohonoho hou i nā offset. E ʻike i kēia ma ka hana ma ka laʻana grid .

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

Nā pono hana palena

Me ka neʻe ʻana i ka flexbox ma v4, hiki iā ʻoe ke hoʻohana i nā pono hana e like me .me-autoka hoʻoneʻe ʻana i nā kolamu kaikuaʻana mai kekahi i kekahi.

.col-md-4

.col-md-4 .ms-auto

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

.col-auto .me-auto

.col-auto

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>

Nā papa kolamu kūʻokoʻa

Hiki .col-*ke hoʻohana ʻia nā papa ma waho o kahi .rowe hāʻawi i kahi mea i kahi ākea kikoʻī. Ke hoʻohana ʻia nā papa kolamu e like me nā keiki pololei ʻole o ka lālani, kāpae ʻia nā paddings.

.col-3: laula o 25%

.col-sm-9: laula o 75% ma luna o sm wahi haʻihaʻi

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>

Hiki ke hoʻohana pū ʻia nā papa me nā pono hana e hana i nā kiʻi lele pane. E hōʻoia e ʻōwili i ka ʻike i loko o kahi .clearfixwahī e hoʻomaʻemaʻe i ka lana inā pōkole ke kikokikona.

He paukū o kahi kikokikona wahi. Ke hoʻohana nei mākou ma aneʻi e hōʻike i ka hoʻohana ʻana i ka papa clearfix. Ke hoʻohui nei mākou i kekahi mau huaʻōlelo manaʻo ʻole ma ʻaneʻi e hōʻike i ke ʻano o ka launa ʻana o nā kolamu ma ʻaneʻi me ke kiʻi lana.

E like me kāu e ʻike ai i nā pauku me ka ʻoluʻolu a puni ke kiʻi lana. E noʻonoʻo ʻoe pehea ke ʻano o kēia me kekahi ʻike maoli ma ʻaneʻi, ʻaʻole i kēia kikokikona hoʻopaʻa inoa ʻoluʻolu e hele mau ana, akā ʻaʻole ʻike maoli i ka ʻike. Lawe wale ia i ka hakahaka a ʻaʻole pono e heluhelu ʻia.

Eia naʻe, eia ʻoe, ke hoʻomau nei i ka heluhelu ʻana i kēia kikokikona placeholder, me ka manaʻolana no kekahi mau ʻike hou aʻe, a i ʻole kekahi hua manu Easter huna o ka ʻike. He ʻakaʻaka paha. ʻO ka mea pōʻino, ʻaʻohe o ia mea ma ʻaneʻi.

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>