Imihlathi

Funda indlela yokuguqula iikholamu kunye nokhetho olumbalwa lolungelelwaniso, ukuodola, kunye nokunciphisa umbulelo kwinkqubo yethu yegridi ye-flexbox. Kwaye, bona indlela yokusebenzisa iiklasi zekholomu ukulawula ububanzi bezinto ezingezizo igridi.

Kweli phepha

Iintloko phezulu! Qiniseka ukuba ufunda iphepha leGridi kuqala ngaphambi kokuntywila kwindlela yokuguqula kunye nokwenza ngokwezifiso iikholamu zegridi yakho.

Indlela abasebenza ngayo

Iikholamu zakha kuyilo lwebhokisi yegridi. I-Flexbox ithetha ukuba sinokhetho lokutshintsha iikholamu zomntu ngamnye kunye nokuguqula amaqela amakholomu kwinqanaba lomqolo . Ukhetha indlela amakholomu akhula ngayo, ayancipha, okanye atshintshe ngenye indlela.
Xa ukwakhiwa koyilo lwegridi, wonke umxholo uhamba kwiikholomu. Uluhlu lwegridi yeBootstrap isuka kwisikhongozeli ukuya kumqolo ukuya kuluhlu kumxholo wakho. Ngezihlandlo ezinqabileyo, unokudibanisa umxholo kunye nekholamu, kodwa qaphela ukuba kunokubakho iziphumo ezingalindelekanga.
I-Bootstrap ibandakanya iiklasi ezichazwe kwangaphambili zokudala ukukhawuleza, uhlengahlengiso oluphendulayo. Ngamagqabantshintshi amathandathu kunye neshumi elinambini leekholamu kwinqanaba ngalinye legridi, sineeklasi ezininzi esele zakhelwe ukuba wenze uyilo olufunekayo. Oku kunokucinywa nge-Sass ukuba uyafuna.

Ulungelelwaniso

Sebenzisa izinto eziluncedo zolungelelwaniso lwebhokisi eguquguqukayo ukulungelelanisa amakholomu ngokuthe nkqo nangokuthe tye.

Ulungelelwaniso oluthe nkqo

Enye yeentsika ezintathu

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

Enye yeentsika ezintathu

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

Ulungelelwaniso oluthe tye

Enye yezintlu ezimbini

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

Ukusonga ikholamu

Ukuba ngaphezu kweekholamu ezili-12 zibekwe ngaphakathi kumqolo omnye, iqela ngalinye leekholamu ezongezelelweyo liya kuthi, njengeyunithi enye, isonge kumgca omtsha.

.col-9

.col-4
Ukusukela ku-9 + 4 = 13 > 12, le div-ububanzi bekholamu-4 ibotshelelwa kumgca omtsha njengeyunithi enye edibanayo.

.col-6
Imiqolo elandelayo iqhubeleka nomgca omtsha.

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

Uqhawulo lwekholamu

Ukwaphula iikholamu kumgca omtsha kwi-flexbox kufuna i-hack encinci: yongeza i-element kunye width: 100%naphi na apho ufuna ukusonga iikholomu zakho kumgca omtsha. Ngokuqhelekileyo oku kufezekiswa ngee-multiple .rows, kodwa ayizizo zonke iindlela zokuphunyezwa ezinokuphendula oku.

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

Unokusebenzisa eli khefu kwiindawo ezithile zokuqhawula kunye nezixhobo zethu zokubonisa eziphendulayo .

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

Ukucwangcisa ngokutsha

Iiklasi zokuodola

Sebenzisa .order-iiklasi zokulawula ukulandelelana okubonakalayo komxholo wakho. Ezi klasi ziyaphendula, ngoko unokuseta i- orderbreakpoint (umz., .order-1.order-md-2). Ibandakanya inkxaso 1kuwo 5onke amanqwanqwa egridi amathandathu.

Okokuqala kwi-DOM, akukho myalelo usetyenziswayo

Okwesibini kwi-DOM, kunye nomyalelo omkhulu

Okwesithathu kwi-DOM, kunye nomyalelo we-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>

Kukwakho neeklasi eziphendulayo .order-firstkunye .order-lastneeklasi ezitshintsha i order-elementi ngokufaka order: -1kwaye order: 6, ngokulandelelanayo. Ezi klasi zinokudityaniswa .order-*neeklasi ezinamanani njengoko zifuneka.

Okokuqala kwi-DOM, iodolwe okokugqibela

Okwesibini kwi-DOM, ayicwangciswanga

Okwesithathu kwi-DOM, eyalelwe kuqala

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

Imihlathi yokumisela

Ungalungisa iikholamu zegridi ngeendlela ezimbini: .offset-iiklasi zethu zegridi eziphendulayo kunye nezixhobo zethu zomda . Iiklasi zegridi zilingana ukuze zitshatise iikholamu ngelixa imida iluncedo kakhulu kuyilo olukhawulezayo apho ububanzi be-offset buyaguquguquka.

Iiklasi ze-Offset

Hambisa iikholamu ekunene usebenzisa .offset-md-*iiklasi. Ezi klasi zonyusa umda wasekhohlo wekholam *ngokweekholamu. Umzekelo, .offset-md-4uhamba .col-md-4ngaphaya kweekholamu ezine.

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

Ukongeza kokucocwa kweekholamu kwiindawo eziphendulayo, unokufuna ukuseta ngokutsha ii-offsets. Bona oku kwisenzo kumzekelo wegridi .

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

Izixhobo zomda

Ngokuya kwi-flexbox kwi-v4, ungasebenzisa izinto eziluncedo zomda njengokunyanzela .me-autoiikholamu zabantakwabo kude kwenye.

.col-md-4

.col-md-4 .ms-auto

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

.col-auto .me-auto

.col-auto

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

Iiklasi zekholamu ezizimeleyo

Iiklasi .col-*zingasetyenziswa ngaphandle a .rowukunika isiqalelo ububanzi obuthile. Nanini na xa iiklasi zekholomu zisetyenziswa njengabantwana abangathanga ngqo kumqolo, iipadi azifakwa.

.col-3: ububanzi be-25%

.col-sm-9: ububanzi 75% ngaphezu sm breakpoint

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

Iiklasi zingasetyenziswa kunye nezinto eziluncedo ukwenza imifanekiso ephendulayo edadayo. Qinisekisa ukusonga umxholo .clearfixkwisonga ukucima into edadayo ukuba umbhalo umfutshane.

Umhlathi wesibambi-ndawo. Siyisebenzisa apha ukubonisa ukusetyenziswa kweklasi ecacileyo. Songeza amabinzana ambalwa angenantsingiselo apha ukubonisa indlela iikholamu ezinxibelelana ngayo apha nomfanekiso odadayo.

Njengoko unokubona imihlathi ngobubele isonge umfanekiso odadayo. Ngoku khawufane ucinge ukuba oku kuya kujongeka njani ngomxholo wokwenyani apha, kunokuba nje lo mbhalo udikayo wesibambi-ndawo oqhubekayo, kodwa eneneni awugqithisi lwazi lubambekayo kuyo. Ithatha nje indawo kwaye akufanelekanga ukuba ifundwe ngokwenene.

Kwaye okwangoku, nanku wena, usazingise ekufundeni esi sicatshulwa sesibambi-ndawo, ngethemba lokuqonda ngakumbi, okanye iqanda le-Easter elifihliweyo lomxholo. Isiqhulo, mhlawumbi. Ngelishwa, akukho nto apha.

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