Bootstrap 5 Grid

Bootstrap 5 Grid System

Ang sistema ng grid ng Bootstrap ay binuo gamit ang flexbox, ang pinakamataas na pinahihintulutan na column sa pahina ay 12.

Kung hindi mo gustong gamitin ang lahat ng 12 na column nang hiwalay, maaari mong ipagsama ang mga ito upang lumikha ng mas lapad na column:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

Ang sistema ng grid ay madaling tumugon, ang mga column ay ayos ayon sa laki ng screen.

Tiyaking ang kabuuan ay kabilang sa 12 o mas mababa (kung hindi mo gustong gamitin ang lahat ng 12 na magagamit na column).

Mga klase ng grid

May anim na klase ang sistema ng grid ng Bootstrap 5:

  • .col- (hindi malaki na aparato - lapad ng screen ay mas maliit sa 576px)
  • .col-sm- (maliit na aparato - lapad ng screen ay kabilang sa 576px o mas maliit)
  • .col-md- (medyo malaking aparato - lapad ng screen ay kabilang sa 768 pixel)
  • .col-lg- (malaking aparato - lapad ng screen ay kabilang sa 992 pixel)
  • .col-xl- (xlarge aparato - lapad ng screen ay kabilang sa 1200px o mas malaki)
  • .col-xxl- (xxlarge aparato - lapad ng screen ay kabilang sa 1400px o mas malaki)

Maaari mong ipagsama ang mga ito sa ibang klase upang lumikha ng mas dinamiko at malaya na layout.

Mga Payo:Bawat klase ay nababagong proporsyonal, kaya't kung gusto mong magkaroon ng: sm at md Para sa pagtatakda ng parehong lapad, kailangan mong ilagay lamang: sm。

Ang pangunahing istruktura ng grid ng Bootstrap 5

Ang pangunahing istruktura ng grid ng Bootstrap 5 ay ang sumusunod:

]] Kontrolin ang lapad ng mga linya, at kung paano sila ay magiging nakikita sa iba't-ibang aparato.
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
]] Sa halip, hayaang magpaservis ang Bootstrap ang paglulugad.
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Unang halimbawa: Lumikha ng isang linya (<div class="row">). Pagkatapos, magdagdag ng kahit anong bilang ng mga linya (may magandang .col-*-* mga klase ng tag (kagamitan). Ang unang bituin (*) ay nagrerepresenta ng responsibilidad: sm, md, lg, xl o xxl, at ang ikalawang bituin ay nagrerepresenta ng numero, at dapat umabot sa 12 sa bawat linya.

Ikalawang halimbawa: Hindi magbibigay ng col Magdagdag ng isang numero, kung hindi ay magpaservis ng bootstrap ang paglulugad, upang bumuo ng pantay na lapad na linya: dalawang "col" Elemento = bawat col ay may lapad na 50%, at tatlong cols ay may lapad na 33.33%. Apat na linya = 25% lapad, at iba pa. Maaari mo ring gamitin .col-sm|md|lg|xl|xxl Gawing responsibong ang mga linya.

Nagtipon naming ilang pangunahing halimbawa ng pagsusunod ng grid sa Bootstrap 5.

Tatlong pantay na linya

Ang sumusunod na halimbawa ay nagpapakita kung paano maglikha ng tatlong pantay na lapad na linya sa lahat ng aparato at lapad ng screen:

Halimbawa

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Subukan ang iyong sarili

Responsibong linya

Ang sumusunod na halimbawa ay nagpapakita kung paano magmumula sa tablet ang paglikha ng apat na pantay na lapad na linya, pagkatapos ay lumaganap sa malalaking desktop.Sa lapad na mas mababa sa 576px ng mobile o screen, ang mga linya ay awtomatikong magbabaluktot:

Halimbawa

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

Subukan ang iyong sarili

Dalawang hindi pantay na responsibong linya

Ang sumusunod na halimbawa ay nagpapakita kung paano makakuha ng dalawang iba't-ibang lapad na linya sa tablet at lumaganap sa malalaking desktop:

Halimbawa

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Subukan ang iyong sarili

Mga Payo:Makikita mo sa susunod na bahagi ng tutorial na ito ang tungkol sa Sistemang Koryente Ng mas maraming nilalaman.