Bootstrap 5 Grid: Medium Devices

Halimbawa ng grid ng medium na aparato

XSmall Small Medium Large Extra Large XXL
Prefix 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, ipinakita namin ang isang halimbawa ng grid, na naglalaman ng klase para sa maliit na aparato. Ginamit namin ang dalawang div (kolum), at binigyan sila ng 25% / 75% na paghihiwalay:

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

Ngunit sa medium na aparato, ang disenyo na 50% / 50% na paghihiwalay ay maaaring mas mabuti.

Ang medium na aparato ay tinukoy bilang lapad ng screenMula 768 pixel hanggang 991 pixel.

Para sa medium na aparato, gagamitin namin .col-md-* Mga klase:

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

Sa maliit na aparato, gamitin ang naglalaman ng -sm- ng klase. Sa medium na aparato, gamitin ang naglalaman ng -md- ng klase.

Ang halimbawa na ito ay magiging dahilan para sa 25% / 75% na paghihiwalay sa maliit na aparato at 50% / 50% na paghihiwalay sa medium (at malaki, ultra malaki at extra large) na aparato. Sa maliit na aparato, ito ay awtomatikong nabubuo (100%):

Halimbawa

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>World Wide Fund for Nature (WWF), itinatag noong Abril 29, 1961, ang logo nito ay isang tigre panda...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>Ng 1980, ang WWF ay pormal na dumating sa Tsina, hiniling ng pamahalaan ng Tsina na magsagawa ng proteksyon sa tigre panda at ang kanyang tahanan...</p>
    </div>
  </div>
</div>

Subukan nang personal

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

Lamang gamitin ang Medium

Sa nasabing halimbawa, kaming ibinigay lamang ay .col-md-6 klase (walang .col-sm-*）。Ito ay nangangahulugan na ang malakas, malaki, labi at XXL aparato ay magsasabing 50% / 50% - dahil ang klase ay makapagpalawak. Subalit, para sa maliit at labi na aparato, ay magiging patag (100% lapad):

Halimbawa

<div class="row">
  <div class="col-md-6">
    <p>World Wide Fund for Nature (WWF), itinatag noong Abril 29, 1961, ang logo nito ay isang tigre panda...</p>
  </div>
  <div class="col-md-6">
    <p>Ng 1980, ang WWF ay pormal na dumating sa Tsina, hiniling ng pamahalaan ng Tsina na magsagawa ng proteksyon sa tigre panda at ang kanyang tahanan...</p>
  </div>
</div>

Subukan nang personal

Columns na may awtomatikong paglalaan ng lugar

Sa Bootstrap 5, mayroong simpleng paraan upang gumawa ng pantay na lapad na mga linya para sa lahat ng aparato: lamang mula sa .col-md-* Alisin ang numero, at gamitin lamang sa elemento ng col .col-md Mga klase. Ang Bootstrap ay makikilala kung ilang linya ang mayroon, at bawat linya ay makakakuha ng kaparehong lapad.

Kung ang sukat ng screenBabang 768px, ang mga linya ay magbabalik sa panghorizontal:

<!-- Dalawang linya: ang lapad ay 50% sa malalaking at mas malalaking aparato -->
<div class="row">
  <div class="col-md">1 ng 2</div>
  <div class="col-md">2 ng 2</div>
</div>
<!-- Apat na linya: ang lapad ay 25% sa malalaking at mas malalaking aparato -->
<div class="row">
  <div class="col-md">1 ng 4</div>
  <div class="col-md">2 ng 4</div>
  <div class="col-md">3 ng 4</div>
  <div class="col-md">4 ng 4</div>
</div>

Subukan nang personal

Ang susunod na kabanata ay ipapakita kung paano magdagdag ng iba't ibang porsyento ng paghihiwalay para sa malalaking aparato.