Bootstrap 5 ruudukko: keskiläpimittaiset laitteet

Keskimääräinen laiteverkkoesimerkki

XSmall Small Medium Large Extra Large XXL
Luokan etuliite .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Näyttöleveys <576px >=576px >=768px >=992px >=1200px >=1400px

Edellisessä luvussa näytimme esimerkin ruudukosta, joka sisältää pienille laitteille tarkoitetut luokat. Käytimme kahta div (saraketta) ja antoimme niille 25% / 75% jakautumisen:

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

Mutta keskimääräisissä laitteissa 50% / 50% jakautumisen suunnittelu saattaa olla parempi.

Keskimääräinen laite määritellään näyttöleveydellä768 pikselistä 991 pikseliin.

Keskimääräisissä laitteissa käytämme .col-md-* Luokka:

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

Pienissä laitteissa käytä sisältävää -sm- luokan. Keskimääräisissä laitteissa käytä sisältävää -md- luokan.

Esimerkki johtaa 25% / 75% jakautumiseen pienissä laitteissa ja 50% / 50% jakautumiseen keskisuurissa (ja suurissa, erittäin suurissa ja erittäin suurissa) laitteissa. Yli pienissä laitteissa se asettuu automaattisesti (100%):

Esimerkki

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>World Wide Fund for Nature (WWF), perustettu 29. huhtikuuta 1961, logona on suurpanda ...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>1980-luvulla WWF tuli virallisesti Kiinaan ja sai Kiinan hallituksen kutsun käynnistää suojelutyöt suurille pandalle ja sen elinympäristölle ...</p>
    </div>
  </div>
</div>

Kokeile itse

Huomio:varmista, että summa on tai pienempi kuin 12 (ei tarvitse käyttää kaikkia 12 saatavilla olevaa sarjaa):

vain keskikoko

esimerkissä meillä on määritetty vain .col-md-6 luokka (ei .col-sm-*）。Tämä tarkoittaa, että keskikokoiset, suuret, jättiläiset ja XXL-laitteet jaetaan 50% / 50% - koska luokka laajenee. Mutta pienille ja erittäin pienille laitteille ne asettuvat pystysuoraan (100% leveys):

Esimerkki

<div class="row">
  <div class="col-md-6">
    <p>World Wide Fund for Nature (WWF), perustettu 29. huhtikuuta 1961, logona on suurpanda ...</p>
  </div>
  <div class="col-md-6">
    <p>1980-luvulla WWF tuli virallisesti Kiinaan ja sai Kiinan hallituksen kutsun käynnistää suojelutyöt suurille pandalle ja sen elinympäristölle ...</p>
  </div>
</div>

Kokeile itse

Automaattinen asettelu sarjoille

Bootstrap 5:ssä on yksinkertainen tapa luoda yhtä leveitä sarjoja kaikille laitteille: vain .col-md-* poista numerot ja käytä vain col-elementillä .col-md luokka. Bootstrap tunnistaa montako sarjaa ja jokainen sarja saa saman leveyden.

Jos näyttötilaalle 768px列it horizontalisti:

<!-- Kaksi sarjaa: keskikokoisilla ja suuremmilla laitteilla 50% leveys -->
<div class="row">
  <div class="col-md">1 of 2</div>
  <div class="col-md">2 of 2</div>
</div>
<!-- Neljä sarjaa: keskikokoisilla ja suuremmilla laitteilla 25% leveys -->
<div class="row">
  <div class="col-md">1 of 4</div>
  <div class="col-md">2 of 4</div>
  <div class="col-md">3 of 4</div>
  <div class="col-md">4 of 4</div>
</div>

Kokeile itse

Seuraavassa luvussa näytetään, miten erilaisia osuusprosentteja lisätään suuriin laitteisiin.