Grid: Extra-Large Devices ng Bootstrap 5

Halimbawa ng grid para sa malaking aparato

XSmall Small Medium Large Extra Large XXL
Pangalan ng klase .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Lapad ng screen <576px >=576px >=768px >=992px >=1200px >=1400px

Sa nakaraang kabanata, ipinapakita namin ang isang halimbawa ng grid kung saan ang mga klase ay ginamit para sa maliit, medium at malaking aparato. Ginamit namin ang dalawang div (column) at ginawa ang paghahati ng 25% / 75% sa maliit na aparato, 50% / 50% sa medium na aparato, at 33% / 66% sa malaking aparato:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

Ngunit sa xlarge aparato, ang disenyo na may paghahati ng 20% / 80% ay maaaring mas mahusay.

Ang malaking aparato ay tinukoy bilang ang lapad ng screen na 1200 pixels na mas malaki。

Para sa xlarge aparato, gagamitin namin: .col-xl-* Uri:

<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>

Ang sumusunod na halimbawa ay magiging paghahati ng 25% / 75% sa maliit na aparato, 50% / 50% sa medium na aparato, 33% / 66% sa malaking aparato, at 20% / 80% sa xlarge at xxlarge aparato. Sa maliit na aparato, ito ay magiging automatic na nagbabadyak (100%):

Mga halimbawa

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>World Wide Fund for Nature (WWF), itinatag noong Abril 29, 1961, ang logo nito ay isang panda...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>1940 taon, ang WWF ay opisyal na dumating sa Tsina, hiniling ng pamahalaan ng Tsina na magsagawa ng proteksyon sa panda at ang kanyang tirik na lugar...</p>
    </div>
  </div>
</div>

Subukan nang personal

Babala: }}Siguraduhing ang kabuuan ay palaging 12.

Lamang gamitin ang XLarge

Sa mga halimbawa sa ibaba, tinitingnan namin lamang .col-xl-6 klase (walang .col-lg-*,.col-md-* at/maaaring .col-sm-*）。Ito ay nangangahulugan na ang mga device na xlarge at xxlarge ay itutulay 50%/50%. Subalit, para sa mga device na malaki, medyo, maliit, at super-maliit, ito ay magiging patindig (100% lapad):

Mga halimbawa

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>World Wide Fund for Nature (WWF), itinatag noong Abril 29, 1961, ang logo nito ay isang panda...</p>
    </div>
    <div class="col-xl-6">
      <p>1940 taon, ang WWF ay opisyal na dumating sa Tsina, hiniling ng pamahalaan ng Tsina na magsagawa ng proteksyon sa panda at ang kanyang tirik na lugar...</p>
    </div>
  </div>
</div>

Subukan nang personal

Kolom ng awtomatikong lAYOUT

Sa Bootstrap 5, mayroong simpleng paraan upang gumawa ng kolum na may parehong lapad para sa lahat ng device: lamang mula sa .col-xl-* Alisin ang numero, at gamitin lamang sa elemento ng col .col-xl Mga klase. Ang Bootstrap ay makakakilala kung ilang kolum ang mayroon, at bawat kolum ay magkakaroon ng parehong lapad.

Kung ang sukat ng screenBabang 1200px, ang kolum ay magpapatong ng horizontal:

<!-- Dalawang kolum: ang lapad ay 50% sa mga device na mas malaki sa super-malaki -->
<div class="row">
  <div class="col-xl">1 ng 2</div>
  <div class="col-xl">2 ng 2</div>
</div>
<!-- Apat na kolum: ang lapad ay 25% sa mga device na mas malaki sa super-malaki -->
<div class="row">
  <div class="col-xl">1 ng 4</div>
  <div class="col-xl">2 ng 4</div>
  <div class="col-xl">3 ng 4</div>
  <div class="col-xl">4 ng 4</div>
</div>

Subukan nang personal