Example ng Grid ng Bootstrap 5
- Nakaraang Pahina BS5 Grid XXL
- Susunod na Pahina BS5 Basic Template
Nang magkakaroon tayo ng ilang halimbawa ng grid layout ng Bootstrap 5.
Tatlong paghahati ng linya
Gamitin sa ilang bilang ng elemento .col Ang klase, Bootstrap ay makikilala kung gaano karami ang mga elemento (at maglikha ng linya na may parehong lapad). Sa mga halimbawa na ito, ginamit namin ang tatlong col na elemento, bawat isa ay may lapad na 33.33%.
Sample
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
Tatlong magkaparehong linya gamit ang numero
Maaari mo ring gamitin ang numero upang kontrolin ang lapad ng linya. Siguraduhing ang kabuuan ay katumbas o mas mababa sa 12 (hindi kailangan gamitin ang lahat ng 12 na magagamit na linya):
Sample
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
Tatlong hindi magkaparehong linya
Upang lumikha ng hindi magkaparehong linya, dapat mong gamitin ang numero. Ang halimbawa na ito ay maglikha ng 25%/50%/25% na paghahati:
Sample
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
Itakda ang lapad ng isang linya
Gayunman, sapat na lang na itakda ang lapad ng isang linya at ipaalam sa mga kapatid na linya na mag-ayos ng laki ng awtomatiko. Ang halimbawa na ito ay maglikha ng 25%/50%/25% na paghahati:
Sample
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
Higit pang magkaparehong linya
Sample
<!-- Dalawang magkaparehong linya --> <div class="row"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <!-- Apat magkaparehong linya --> <div class="row"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <!-- Anim magkaparehong linya --> <div class="row"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Row Cols
Maaari mo ring gamitin .row-cols-* Ang kontrol ng klase ay dapat lumabas sa katabi ng mga linya (kahit gaano karami ang mga linya):
Sample
<div class="row row-cols-1"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <div class="row row-cols-2"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <div class="row row-cols-3"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Higit pang hindi magkaparehong linya
Sample
<!-- Dalawang hindi magkaparehong linya --> <div class="row"> <div class="col-8">1 of 2</div> <div class="col-4">2 of 2</div> </div> <!-- Four unequal columns --> <div class="row"> <div class="col-2">1 of 4</div> <div class="col-2">2 of 4</div> <div class="col-2">3 of 4</div> <div class="col-6">4 of 4</div> </div> <!-- Setting two column widths --> <div class="row"> <div class="col-4">1 of 4</div> <div class="col-6">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div>
Sa parehong taas
Kung ang isang kolumna ay mas mataas kaysa sa ibang kolumna (dalawa sa CSS o teksto at taas), ang iba ay magtutuloy:
Sample
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
Nakalatag na kolumna
Ang sumusunod na halimbawa ay nagpapakita kung paano gumawa ng krokis ng dalawang kolumna, kung saan ang isa sa kolumna ay may dalawang ibang kolumna:
Sample
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
Mga responsibong klase
Ang sistema ng grid ng Bootstrap 5 ay may limang klase:
.col-(maliit na aparato - lapad ng screen ay mas maliit sa 576px).col-sm-(maliit na aparato - lapad ng screen ay katumbas o mas malaki sa 576px).col-md-(medyo malaking aparato - lapad ng screen ay katumbas o mas malaki sa 768 pixel).col-lg-(malaking aparato - lapad ng screen ay katumbas o mas malaki sa 992 pixel).col-xl-(malaking aparato - lapad ng screen ay katumbas o mas malaki sa 1200px).col-xxl-(malaking aparato - lapad ng screen ay katumbas o mas malaki sa 1400px)
Maaaring pinagsama-samahin ang mga ito na klase upang gumawa ng mas dinamiko at mas malaya na krokis.
Paalala:Bawat klase ay nagpapalaki proporsyonal, kaya't kung gusto mong magkaroon ng sm at md Kung itinakda ang parehong lapad, kailangan lamang magbigay ng sm.
Mga nakalatag sa horizontal
Ang mga sumusunod na halimbawa ay nagpapakita kung paano gumawa ng krokis ng kolumna, ang krokis na ito ay nagsisimula sa pagkakalat sa maliit na aparato, at pagkatapos ay nagiging horizontal na krokis sa malalaking aparato (sm, md, lg at xl):
Sample
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
Mix and Match
Sample
<!-- Sa super maliit na aparato, 50%/50% split, sa malaking aparato, 75%/25% split --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- Sa super maliit, maliit, katumbas na aparato, 58%/42% split, sa malaking at super malaking aparato, 66.3%/33.3% split --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- Sa maliit na aparato, 25%/75% split, sa katumbas na aparato, 50%/50% split, sa malaking at super malaking aparato, 33%/66% split. Sa super maliit na aparato, awtomatikong magiging pile (100%). --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
walang gutters
Kung gusto mong baguhin ang pagitan ng halaga ng mga column (dagdag na espasyo), gamitin ang anumang .g-1|2|3|4|5 klaseng (.g-4 ay ang default na halaga).
Kung gusto mong lubusang alisin ang gutters (gutter), gamitin ang .g-0:
Sample
<div class="row g-0">
- Nakaraang Pahina BS5 Grid XXL
- Susunod na Pahina BS5 Basic Template
