Ngā tīwae

Akohia me pehea te whakarereke i nga pou me te maha o nga whiringa mo te tirohanga, te ota, me te whakakore i te mihi ki ta maatau punaha matiti pouaka. Hei taapiri, tirohia me pehea te whakamahi i nga karaehe pou hei whakahaere i nga whanui o nga huānga matiti kore.

I tenei wharangi

Mahunga ake! Me panui te wharangi Matiti i te tuatahi i mua i te ruku me pehea te whakarereke me te whakarite i o pou matiti.

Pehea ta ratou mahi

Ka hangaia nga pou ki runga i te hoahoanga pouaka ngawari o te matiti. Ko te tikanga o te Flexbox kei a tatou nga whiringa mo te whakarereke i nga pou takitahi me te whakarereke i nga roopu o nga pou i te taumata haupae . Ka whiriwhiri koe me pehea te tipu, te whakaheke, te rereke ranei o nga pou.
I te wa e hanga ana i nga whakatakotoranga matiti, ka uru nga ihirangi katoa ki nga pou. Ko te raupapa o te matiti a Bootstrap ka haere mai i tetahi ipu ki tetahi rarangi ki tetahi pou ki to ihirangi. I nga wa onge, ka taea e koe te whakakotahi i nga ihirangi me nga pou, engari kia mohio koe tera pea nga hua ohorere.
Kei roto i a Bootstrap nga karaehe kua tautuhia mo te hanga tere, tahora aro. E ono nga waahi pakaru me te tekau ma rua nga pou i ia taumata tukutuku, he maha nga karaehe kua oti te hanga maau hei hanga i o whakatakotoranga e hiahia ana koe. Ka taea te whakakore ma te Sass mena ka hiahia koe.

Tirohanga

Whakamahia nga taputapu tirohanga flexbox ki te tiaaro poutū me te whakapae i nga pou.

Tirohanga poutū

Ko tetahi o nga pou e toru

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

Ko tetahi o nga pou e toru

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

Tirohanga whakapae

Ko tetahi o nga pou e rua

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

Te takai tīwae

Ki te neke atu i te 12 nga pou ka whakauruhia ki roto i te rarangi kotahi, ka takai ia roopu o nga pou taapiri, hei waeine kotahi, ki tetahi raina hou.

.col-9

.col-4
Mai i te 9 + 4 = 13 > 12, ka takaia tenei wehenga 4-tīwae-whanui ki tetahi raina hou hei wae piri tahi.

.col-6 Ka
haere tonu nga pou o muri mai i te raina hou.

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

Ka pakaru te pou

Ko te pakaru i nga pou ki tetahi raina hou i roto i te pouaka whakaraerae me mahi iti: taapirihia he huānga ki nga waahi width: 100%katoa e hiahia ana koe ki te takai i o pou ki tetahi raina hou. Ko te tikanga ka tutuki tenei me te maha o nga .rows, engari kaore e taea e nga tikanga whakatinana katoa te korero mo tenei.

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

Ka taea ano e koe te tono i tenei wehenga ki nga waahi wehenga motuhake me o maatau taputapu whakaatu urupare .

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

Te whakaraupapa ano

Whakaritea nga karaehe

Whakamahia .order-nga karaehe hei whakahaere i te raupapa ataata o to ihirangi. He urupare enei karaehe, na reira ka taea e koe te whakarite i te ordermaataki maataki (hei tauira, .order-1.order-md-2). Kei roto ko te tautoko 1puta 5noa i nga reanga matiti e ono.

Tuatahi i DOM, karekau he ota i tono

Tuarua i DOM, me te raupapa nui ake

Tuatoru i DOM, me te raupapa 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>

He karaehe whakautu .order-firstme .order-lastnga karaehe ka huri i te ordero te huānga ma te tono order: -1me te order: 6, ia. Ka taea hoki te whakakotahi i enei karaehe me nga .order-*karaehe kua tau ina hiahiatia.

Tuatahi i DOM, i ota whakamutunga

Tuarua i roto i te DOM, kaore i raupapa

Tuatoru i roto i DOM, whakahau tuatahi

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

Whangai nga pou

Ka taea e koe te whakatiki i nga pou matiti ma nga huarahi e rua: .offset-a maatau akomanga matiti urupare me a maatau taputapu tawhē . Ko te rahi o nga karaehe matiti kia rite ki nga pou, engari he pai ake nga tawhē mo nga whakatakotoranga tere e rereke ana te whanui o te taapiri.

Wehenga akomanga

Nukuhia nga pou ki te taha matau ma te whakamahi i .offset-md-*nga karaehe. Ka whakanuia e enei karaehe te tawhē mauī o te tīwae mā ngā *tīwae. Hei tauira, .offset-md-4neke .col-md-4atu i nga pou e wha.

.col-md-4

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

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

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

I tua atu i te whakakore i nga pou i nga waahi pakaru urupare, ka hiahia pea koe ki te tautuhi i nga waahanga. Tirohia tenei mahi i roto i te tauira matiti .

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

Nga taputapu tawhē

Ma te neke ki te pouaka whakarorohiko i te v4, ka taea e koe te whakamahi i nga taputapu tawhē penei .me-autoi te turaki i nga pou teina kia matara atu tetahi ki tetahi.

.col-md-4

.col-md-4 .ms-aunoa

.col-md-3 .ms-md-aunoa

.col-auto .me-auto

.col-aunoa

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

Ko nga karaehe poupou takitahi

Ka .col-*taea hoki te whakamahi i nga karaehe i waho o te .rowhei hoatu i tetahi huānga he whanui motuhake. I nga wa katoa ka whakamahia nga karaehe pou hei tamariki kore tika o te rarangi, ka waihohia nga papa.

.col-3: te whanui o te 25%

.col-sm-9: te whanui o te 75% i runga ake i te waahi wehenga sm

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

Ka taea te whakamahi tahi nga karaehe me nga taputapu ki te hanga whakaahua maanu aro. Kia mau ki te takai i te ihirangi ki roto i te .clearfixtakai hei whakawātea i te mānu mena he poto ake te kuputuhi.

He kōwae o te kuputuhi puriwāhi. Kei te whakamahia e matou i konei hei whakaatu i te whakamahinga o te karaehe clearfix. Kei te taapirihia e matou etahi kianga horihori ki konei hei whakaatu i te pahekoheko o nga pou ki konei me te ahua maanu.

I a koe e kite ana i nga kowae e takai ana i te ahua maanu. Whakaarohia ka pehea te ahua o tenei me etahi korero pono i konei, kaua ko tenei tuhinga tuumotu hoha e haere tonu ana, engari karekau he korero tino kitea. Ka pau noa te waahi kaore e tika kia panuihia.

Heoi ano, kei konei koe, e tohe tonu ana ki te panui i tenei tuhinga waahi, me te tumanako mo etahi atu mohiotanga, he hua huna ranei o nga korero. He katakata, pea. Kia aroha mai, karekau he mea penei i konei.

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