Grid System ng Bootstrap 5

Sistema ng grid

Ang sistema ng grid ng Bootstrap ay binuo gamit ang flexbox, ang pinakamataas na halaga ng column na pinapayagan ay 12.

Kung hindi mo gustong gamitin ang lahat ng 12 column nang hiwalay, puwedeng ihahalo ang mga ito upang makabuo ng mas lapad na column:

Ang sistema ng grid ay madaling tumutugon, ang mga column ay magiging maayos ayon sa laki ng screen.

Tiyaking ang kabuuan ay katumbas o mas mababa sa 12 (hindi kailangan gamitin ang lahat ng 12 magagamit na column).

Mga klase ng grid

Ang sistema ng grid ng Bootstrap 5 ay nagbibigay ng anim na klase:

  • .col- (Maliliit na aparato - lapad ng screen ay mas maliit kaysa 576px)
  • .col-sm- (Maliit na aparato - lapad ng screen ay katumbas o mas malaki kaysa 576px)
  • .col-md- (Medyo malaking aparato - lapad ng screen ay katumbas o mas malaki kaysa 768px)
  • .col-lg- (Malaking aparato - lapad ng screen ay katumbas o mas malaki kaysa 992px)
  • .col-xl- (Labak na malaking aparato - lapad ng screen ay katumbas o mas malaki kaysa 1200px)
  • .col-xxl- (Malaking aparato - lapad ng screen ay katumbas o mas malaki kaysa 1400px)

Ihahalo ang mga ito ng klase upang makabuo ng mas dinamiko at malaya na layout.

Mga payo:Bawat klase ay ayon sa proporsyon na pinakalaking, kaya't kung gusto mong mag-set ng parehong lapad na width para sa sm at md, kailangan lang mong itala ang sm.

Ang pangunahing straktura ng grid ng Bootstrap 5

Ang mga pangunahing straktura ng grid ng Bootstrap 5 ay ang sumusunod:

<!-- Control ang lapad ng kolum, at kung paano sila ay ipapakita 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>
<!-- O hayaang gumana ang Bootstrap sa paghawakan ng layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Subukan nang personal

Unang halimbawa: Lumikha ng isang hilera (<div class = "row">). Pagkatapos, magdagdag ng bilang ng kolum na kailangan (may .col-*-* klase na tag na). Ang unang bitang (*) ay nagrerepresenta ng responsibilidad: sm, md, lg, xl o xxl, at ang ikalawang bitang ay nagrerepresenta ng isang numero, at ang kabuuan ng bawat hilera ay dapat magiging 12.

Ikalawang halimbawa: Hindi sa bawat col Magdagdag ng isang numero, sa halip na paghawakan ng layout ng bootstrap, upang bumuo ng kolum na may parehong lapad: dalawang "col" Elemento = 50% ng lapad ng bawat kolum, at tatlong kolum = 33.33% ng lapad ng bawat kolum. Apat na kolum = 25% ng lapad at iba pa. Maaari mo ring gamitin .col-sm|md|lg|xl|xxl Gawing responsibo ang mga kolum.

Option ng grid

Ang sumusunod na talahanayan ay naglalarawan kung paano gumagana ang sistema ng grid ng Bootstrap 5 sa iba't ibang laki ng screen:

Labaw na maliit (<576px) Maliit na malaki (>=576px) Medyo malaki (>=768px) Malaki (>=992px) Labaw na malaki (>=1200px) Malaking laki (>=1400px)
Prefix ng klase .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Behavior ng grid Palaging horizontal Pagsasama ng pagbukas, sa ibabaw ng punto ng pagbubukas ay horizontal Pagsasama ng pagbukas, sa ibabaw ng punto ng pagbubukas ay horizontal Pagsasama ng pagbukas, sa ibabaw ng punto ng pagbubukas ay horizontal Pagsasama ng pagbukas, sa ibabaw ng punto ng pagbubukas ay horizontal Pagsasama ng pagbukas, sa ibabaw ng punto ng pagbubukas ay horizontal
Width ng container None (auto) 540px 720px 960px 1140px 1320px
Magiging kasama sa Vertical screen of mobile phone Horizontal screen of mobile phone Tablet Laptop Laptop at desktop Laptop at desktop
Number ng kolum 12 12 12 12 12 12
Width ng Gutter 1.5rem (sa bawat panig ng kolum ng .75rem ) 1.5rem (sa bawat panig ng kolum ng .75rem ) 1.5rem (sa bawat panig ng kolum ng .75rem ) 1.5rem (sa bawat panig ng kolum ng .75rem ) 1.5rem (sa bawat panig ng kolum ng .75rem ) 1.5rem (sa bawat panig ng kolum ng .75rem )
Maaaring isama Yes Yes Yes Yes Yes Yes
Offset Yes Yes Yes Yes Yes Yes
Sort ng column Yes Yes Yes Yes Yes Yes