Bootstrap 5 Grid: Mula sa Pagkaliligiran hanggang sa Pansariling Lebel

Halimbawa ng Grid: Pagsasapit sa Pansariling Lebel

Haging nila isang pangunahing sistema ng grid, na nagsisimula sa pagkaliligiran sa napakaliit na aparato, at pagkatapos ay magiging pahaba sa mas malaking aparato.

Ang sumusunod na halimbawa ay nagpapakita ng isang simpleng dalawang-linya na "pagsasapit sa pansariling lebel", na ibig sabihin, ito ay magiging 50%/50% na paghihiwalay sa lahat ng ekran, maliban sa napakaliit na ekran, na awtomatikong pinaliligiran (100%):

Halimbawa: Pagsasapit sa Pansariling Lebel

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Linya 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Linya 2 ...</p>
    </div>
  </div>
</div>

Subukan Muna Sa Sarili

Mga tip:.col-sm-* Ang numero sa klase ay nangangahulugan kung kailan ang div ay dapat lumampas sa ilang linya (mayroong kabuuang 12 linya). Kaya,.col-sm-1 Tapos ng 1 linya,.col-sm-4 Tapos ng 4 linya,.col-sm-6 Tapos ng 6 linya, atbp.

Pansin:Tiyaking ang kabuuan ay magiging 12 o mas mababa (hindi kailangan gamitin ang lahat ng 12 na magagamit na linya):

Mga tip:Sa pamamagitan ng paggamit ng .container-fluid klase ng .containerMaaari mong baguhin anumang full-width Ay pagbabagong LAYOUT sa fixed-width Ang responsibong lAYOUT:

Mga halimbawa: Responsibong Container

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Linya 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>Linya 2 ...</p>
    </div>
  </div>
</div>

Subukan Muna Sa Sarili

Automatikong Layout ng Linya

Sa Bootstrap 5, mayroong simpleng paraan upang gumawa ng pantay-pantay na lapad na mga linya para sa lahat ng aparato: lamang makuha mula sa .col-size-* Tanggalin ang mga numero at gamitin lamang ang kolom sa elemento ng col .col-size Mga klase. Ipinapapansin ng Bootstrap kung gaano karami ang mga linya, at bawat linya ay makakakuha ng kaparehong lapad. Ang klase ng size (sm, md, atbp.) ay nagbibigay-kita kung kailan dapat sumagot ang mga linya:

<!-- Dalawang linya: 50% ng lapad ng lahat ng screen, maliban sa sobrang maliit na aparato (100% lapad) -->
<div class="row">
  <div class="col-sm">1 of 2</div>
  <div class="col-sm">2 of 2</div>
</div>
<!-- Apat na linya: 25% ng lapad ng lahat ng screen, maliban sa sobrang maliit na aparato (100% lapad) -->
<div class="row">
  <div class="col-sm">1 of 4</div>
  <div class="col-sm">2 of 4</div>
  <div class="col-sm">3 of 4</div>
  <div class="col-sm">4 of 4</div>
</div>

Subukan Muna Sa Sarili