Bootstrap 5 ruudukko: erittäin suuret laitteet

Valtava laiteverkkosilmukan esimerkki

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

Edellisessä luvussa näytimme verkkosilmukan esimerkin, joka sopii pienille, keskisuurille ja suurille laitteille. Käytimme kahta div (saraketta) ja jakoimme pienillä laitteilla 25%/75%, keskisuurilla laitteilla 50%/50% ja suurilla laitteilla 33%/66%:

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

Mutta xlarge-laitteilla 20% / 80% jakautumisen suunnittelu saattaa olla parempi.

Valtava laite määritellään näytön leveydeltään 1200 pikseliä tai enemmän.

Xlarge-laitteille käytämme .col-xl-* Luokka:

<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>

Esimerkki johtaa 25%/75% jakautumiseen pienillä laitteilla, 50%/50% jakautumiseen keskisuurilla laitteilla, 33%/66% jakautumiseen suurilla laitteilla sekä 20%/80% jakautumiseen xlarge ja xxlarge laitteilla. Pienillä laitteilla se kootaan automaattisesti (100%):

Esimerkki

<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), perustettu 29. huhtikuuta 1961, sen tunnus on suomenaami ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>1980, WWF astui virallisesti Kiinaan ja tuli Kiinan hallituksen kutsusta Kiinaan suojellakseen suomenaamia ja niiden elinympäristöä ...</p>
    </div>
  </div>
</div>

Kokeile itse

Huomaa:Varmista, että summa on aina 12.

käytä vain XLarge

esimerkissä meillä on vain .col-xl-6 luokat (ei .col-lg-*,.col-md-* ja/tai .col-sm-*）。Tämä tarkoittaa, että xlarge- ja xxlarge-laitteet jaetaan 50/50%. Mutta suurissa, keskisuurissa, pienissä ja erittäin pienissä laitteissa ne asettuvat pystysuoraan (100% leveys):

Esimerkki

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>World Wide Fund for Nature (WWF), perustettu 29. huhtikuuta 1961, sen tunnus on suomenaami ...</p>
    </div>
    <div class="col-xl-6">
      <p>1980, WWF astui virallisesti Kiinaan ja tuli Kiinan hallituksen kutsusta Kiinaan suojellakseen suomenaamia ja niiden elinympäristöä ...</p>
    </div>
  </div>
</div>

Kokeile itse

Automaattinen asettelu sarakkeille

Bootstrap 5:ssä on yksinkertainen tapa luoda kaikille laitteille yhtä leveät sarakkeet: vain .col-xl-* poista numerot ja käytä vain col-elementissä .col-xl luokka. Bootstrap tunnistaa kuinka monta sarjaa on ja jokainen sarja saa saman leveyden.

Jos näyttökokoaalle 1200px，sarakkeet asettuvat horisontaalisesti:

<!-- Kaksi sarjaa: Yli suurissa laitteissa 50% leveys -->
<div class="row">
  <div class="col-xl">1 of 2</div>
  <div class="col-xl">2 of 2</div>
</div>
<!-- Neljä sarjaa: Yli suurissa laitteissa 25% leveys -->
<div class="row">
  <div class="col-xl">1 of 4</div>
  <div class="col-xl">2 of 4</div>
  <div class="col-xl">3 of 4</div>
  <div class="col-xl">4 of 4</div>
</div>

Kokeile itse