in English

Safu

Jifunze jinsi ya kurekebisha safu wima kwa chaguo chache za upangaji, kuagiza, na kusawazisha shukrani kwa mfumo wetu wa gridi ya flexbox. Pia, angalia jinsi ya kutumia madarasa ya safuwima kudhibiti upana wa vipengee visivyo vya gridi ya taifa.

Katika ukurasa huu

Vichwa juu! Hakikisha umesoma ukurasa wa Gridi kwanza kabla ya kuzama katika jinsi ya kurekebisha na kubinafsisha safu wima zako.

Jinsi wanavyofanya kazi

Safu wima huunda kwenye usanifu wa kisanduku cha gridi. Flexbox inamaanisha tuna chaguo za kubadilisha safu wima mahususi na kurekebisha vikundi vya safu wima katika kiwango cha safu mlalo . Unachagua jinsi safu wima zinavyokua, kupungua, au vinginevyo kubadilika.
Wakati wa kuunda mipangilio ya gridi ya taifa, maudhui yote huenda kwenye safu wima. Daraja la gridi ya Bootstrap huenda kutoka kwa chombo hadi safu hadi safu hadi kwenye maudhui yako. Mara chache, unaweza kuchanganya maudhui na safu wima, lakini fahamu kuwa kunaweza kuwa na matokeo yasiyotarajiwa.
Bootstrap inajumuisha madarasa yaliyofafanuliwa awali kwa kuunda mipangilio ya haraka, inayoitikia. Ukiwa na sehemu sita za kukiuka na safu wima kadhaa katika kila daraja la gridi, tuna madarasa kadhaa ambayo tayari yameundwa kwa ajili yako ili kuunda mipangilio unayotaka. Hii inaweza kulemazwa kupitia Sass ukipenda.

Mpangilio

Tumia huduma za upatanishaji wa kisanduku chenye kubadilika ili kupanga safu wima na kimlalo.

Mpangilio wa wima

Moja ya safu wima tatu

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>

Moja ya safu wima tatu

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>

Mpangilio wa mlalo

Moja ya safu mbili

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>

Kufunga safu

Ikiwa zaidi ya safu wima 12 zimewekwa ndani ya safu mlalo moja, kila kundi la safu wima za ziada, kama kitengo kimoja, litajifunga kwenye mstari mpya.

.kol-9

.col-4
Tangu 9 + 4 = 13 > 12, div hii ya safu wima 4 inafungwa kwenye mstari mpya kama kitengo kimoja kinachoambatana.

.col-6 Safu
wima zinazofuata zinaendelea kwenye mstari mpya.

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>

Mapumziko ya safu wima

Kuvunja safu wima hadi mstari mpya katika flexbox kunahitaji udukuzi mdogo: ongeza kipengele width: 100%popote unapotaka kukunja safuwima zako kwenye mstari mpya. Kawaida hii inakamilishwa na .rows nyingi, lakini sio kila njia ya utekelezaji inaweza kuhesabu hii.

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

Unaweza pia kutumia mapumziko haya katika sehemu mahususi za kuhitimisha huduma zetu za onyesho .

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

Kupanga upya

Agiza madarasa

Tumia .order-madarasa kudhibiti mpangilio wa kuona wa maudhui yako. Madarasa haya ni msikivu, kwa hivyo unaweza kuweka orderkwa kuvunja (kwa mfano, .order-1.order-md-2). Inajumuisha usaidizi kwa 1viwango 5vyote sita vya gridi ya taifa.

Kwanza katika DOM, hakuna agizo lililotekelezwa

Ya pili katika DOM, na agizo kubwa

Ya tatu katika DOM, kwa agizo la 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>

Pia kuna madarasa sikivu .order-firstna .order-lastyanayobadilisha orderkipengele kwa kutumia order: -1na order: 6, mtawalia. Madarasa haya pia yanaweza kuchanganywa na .order-*madarasa yaliyohesabiwa kama inahitajika.

Ya kwanza katika DOM, iliagizwa mwisho

Ya pili katika DOM, bila mpangilio

Ya tatu katika DOM, iliyoagizwa kwanza

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>

Kuweka safu wima

Unaweza kurekebisha safu wima kwa njia mbili: .offset-madarasa yetu ya gridi ya jibu na huduma zetu za ukingo . Madarasa ya gridi yana ukubwa ili kuendana na safu wima ilhali pambizo ni muhimu zaidi kwa mipangilio ya haraka ambapo upana wa mkato ni tofauti.

Madarasa ya kukabiliana

Sogeza safu kulia kwa kutumia .offset-md-*madarasa. Madarasa haya huongeza ukingo wa kushoto wa safu kwa safu *wima. Kwa mfano, .offset-md-4husogea .col-md-4zaidi ya safu wima nne.

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

Kando na ufutaji wa safu wima kwenye sehemu za kukiuka zinazoitikia, huenda ukahitaji kuweka upya vipengee. Tazama hii katika vitendo katika mfano wa gridi ya taifa .

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

Huduma za pembezoni

Pamoja na hoja ya flexbox katika v4, unaweza kutumia huduma za ukingo kama vile .me-autokulazimisha safu wima kutoka kwa nyingine.

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

Madarasa ya safu wima ya pekee

Madarasa .col-*pia yanaweza kutumika nje a .rowkutoa kipengee upana maalum. Wakati wowote madarasa ya safu wima yanapotumiwa kama watoto wasio wa moja kwa moja wa safu, pedi huachwa.

.col-3: upana wa 25%

.col-sm-9: upana wa 75% juu ya 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>

Madarasa yanaweza kutumika pamoja na huduma kuunda picha zinazosikika zinazoelea. Hakikisha kuwa umefunga yaliyomo kwenye .clearfixkanga ili kufuta kuelea ikiwa maandishi ni mafupi.

Aya ya maandishi ya kishika nafasi. Tunaitumia hapa kuonyesha matumizi ya darasa la clearfix. Tunaongeza misemo michache isiyo na maana hapa ili kuonyesha jinsi safu wima zinavyoingiliana hapa na picha iliyoelea.

Kama unavyoweza kuona aya hufunika kwa uzuri kwenye picha iliyoelea. Sasa fikiria jinsi hii inavyoonekana na maudhui halisi hapa, badala ya maandishi haya ya kuchosha ya kishikilia nafasi ambayo yanaendelea na kuendelea, lakini kwa kweli hayawasilishi habari inayoonekana. Inachukua nafasi tu na haipaswi kusomwa.

Na bado, wewe hapa, bado unadumu katika kusoma maandishi haya ya kishikilia nafasi, ukitarajia maarifa zaidi, au yai la pasaka iliyofichwa ya yaliyomo. Utani, labda. Kwa bahati mbaya, hakuna hayo hapa.

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>