in English

Mizati

Phunzirani momwe mungasinthire zipilala ndi zosankha zingapo zoyanika, kuyitanitsa, ndikusintha chifukwa cha gridbox yathu ya flexbox. Kuphatikiza apo, onani momwe mungagwiritsire ntchito makalasi amzanja kuti muzitha kuyang'anira makulidwe azinthu zomwe si za gridi.

Patsamba ili

Mungodziwiratu! Onetsetsani kuti mwawerenga tsamba la Gridi kaye musanalowe m'mene mungasinthire ndikusintha mizati yanu.

Momwe amagwirira ntchito

Mizati imamanga pamapangidwe a flexbox a grid. Flexbox imatanthauza kuti tili ndi zosankha zosinthira mizati payokha ndikusintha magulu amizere pamizere . Mumasankha momwe mizati imakulira, kuchepera, kapena kusintha kwina.
Mukamapanga masanjidwe a gridi, zonse zimapita m'mizere. Ulamuliro wa gulu la Bootstrap umapita kuchokera ku chidebe kupita ku mzere kupita ku gawo kupita ku zomwe zili. Nthawi zina, mutha kuphatikiza zomwe zili ndi gawo, koma dziwani kuti pakhoza kukhala zotsatira zosayembekezereka.
Bootstrap imaphatikizapo makalasi okonzedweratu kuti apange masanjidwe achangu, omvera. Ndi magawo asanu ndi limodzi ndi magawo khumi ndi awiri pagawo lililonse la gridi, tili ndi makalasi ambiri omwe adakupangirani kuti mupange masanjidwe omwe mukufuna. Izi zitha kuzimitsidwa kudzera pa Sass ngati mukufuna.

Kuyanjanitsa

Gwiritsani ntchito zida zoyankhulirana za flexbox kuti mulumikizane molunjika komanso mopingasa.

Kuyanjanitsa koyima

Chimodzi mwa magawo atatu

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>

Chimodzi mwa magawo atatu

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>

Kuyanjanitsa kopingasa

Chimodzi mwa mizati iwiri

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>

Kuzimata ndime

Ngati mizati yopitilira 12 yayikidwa pamzere umodzi, gulu lililonse la zigawo zowonjezera, ngati gawo limodzi, likulungidwa pamzere watsopano.

.col-9

.col-4
Popeza 9 + 4 = 13 > 12, div ya 4-column-wide iyi imakutidwa pamzere watsopano ngati gawo limodzi lolumikizana.

.col-6
Mizati yotsatira ikupitilira pamzere watsopano.

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>

Kuthyoka kwa magawo

Kuthyola mizati ku mzere watsopano mu flexbox kumafuna kuthyolako pang'ono: onjezani chinthu ndi width: 100%paliponse pamene mukufuna kukulunga mizati yanu ku mzere watsopano. Kawirikawiri izi zimachitika ndi ma multiples .row, koma si njira zonse zogwiritsira ntchito zomwe zingathe kuwerengera izi.

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

Mutha kugwiritsanso ntchito nthawi yopumirayi pakanthawi kochepa ndi zida zathu zowonetsera .

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

Kuyitanitsanso

Onjezani makalasi

Gwiritsani ntchito .order-makalasi kuwongolera mawonekedwe azinthu zanu. Maphunzirowa ndi omvera, kotero mutha kukhazikitsa orderndi breakpoint (mwachitsanzo, .order-1.order-md-2). Zimaphatikizapo chithandizo chamagulu onse asanu 1ndi 5limodzi a gridi.

Choyamba mu DOM, palibe kuyitanitsa kochitidwa

Chachiwiri mu DOM, ndi dongosolo lalikulu

Chachitatu mu DOM, ndi dongosolo 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>

Palinso makalasi omvera .order-firstkomanso .order-lastomwe amasintha orderchinthucho pogwiritsa ntchito order: -1ndi order: 6, motsatana. Maphunzirowa amathanso kusakanikirana ndi .order-*makalasi owerengeka ngati pakufunika.

Choyamba mu DOM, choyitanitsa komaliza

Chachiwiri ku DOM, chosayendetsedwa

Chachitatu mu DOM, cholamulidwa poyamba

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>

Kuchepetsa mizati

Mutha kusintha magawo a gridi m'njira ziwiri: .offset-makalasi athu omvera a gridi ndi zida zathu zam'mphepete . Magulu a gridi amakula kuti agwirizane ndi mipingo pomwe m'mphepete mwake ndi othandiza kwambiri pamasanjidwe ofulumira pomwe m'lifupi mwake ndikusintha.

Maphunziro a Offset

Sunthani mizati kumanja pogwiritsa ntchito .offset-md-*makalasi. Makalasi awa amawonjezera malire akumanzere kwa gawo ndi magawo *. Mwachitsanzo, .offset-md-4amasuntha .col-md-4mizati inayi.

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

Kuphatikiza pa kukonza magawo pazigawo zongoyankha, mungafunike kukonzanso zosintha. Onani izi muzochitika mu grid chitsanzo .

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

Zida zam'mphepete

Ndi kusunthira ku flexbox mu v4, mutha kugwiritsa ntchito zida zam'mphepete monga .me-autokukakamiza mizere ya abale kutali.

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

Standalone column makalasi

Maphunzirowa .col-*atha kugwiritsidwanso ntchito kunja kwa a .rowkuti apereke chinthu m'lifupi mwake. Nthawi zonse makalasi amzati akagwiritsidwa ntchito ngati ana osalunjika pamzere, zotchingira zimasiyidwa.

.col-3: m'lifupi mwa 25%

.col-sm-9: m'lifupi mwake 75% pamwamba pa 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>

Makalasi atha kugwiritsidwa ntchito limodzi ndi zofunikira kupanga zithunzi zoyandama zomvera. Onetsetsani kuti mwakulunga zomwe zili mu .clearfixkapu kuti muchotse zoyandama ngati mawuwo ndi aafupi.

Ndime ya mawu ogwirizira malo. Tikugwiritsa ntchito pano kuwonetsa kugwiritsa ntchito kalasi ya clearfix. Tikuwonjezera mawu opanda tanthauzo apa kuti tiwonetse momwe zipilala zimagwirira ntchito pano ndi chithunzi choyandama.

Monga mukuwonera ndimezo zikukulunga mokoma chithunzi choyandama. Tsopano lingalirani momwe izi zingawonekere ndi zomwe zili mkati muno, m'malo mongolemba mawu otopetsa awa omwe amapitilira, koma osapereka chidziwitso chogwirika. Zimangotenga malo ndipo siziyenera kuwerengedwa kwenikweni.

Ndipo komabe, nanu, mukulimbikirabe kuwerenga zolemba zapamalozi, ndikuyembekeza kuti mudzazindikiranso zina, kapena zina zobisika za Isitala. Nthabwala, mwina. Tsoka ilo, palibe mwa izo pano.

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>