Bootstrap 5-rakennepiirustus: suuret laitteet

Kurssivihje:

Suuri 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 >=768px >=992px >=1200px >=1400px

Edellisessä luvussa näytimme esimerkin ruudukosta, joka sisältää luokat中小型 laitteille. Käytimme kahta divia (saraketta) ja jakoimme 25%/75% pienillä laitteilla ja 50%/50% keskisuurilla laitteilla:

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

Mutta suurilla laitteilla 33% / 66% jakautumissuunnittelu voi olla parempi.

Suuret laitteet määritellään näyttöleveydellä992 pikselistä 1199 pikseliin。

Suurten laitteiden osalta käytämme .col-lg-* Luokka:

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

Pienillä laitteilla käytä sisältävää -sm- luokka. Keskimuurilla käytä sisältävää -md- luokka. Suurilla laitteilla käytä sisältävää -lg- luokka.

Esimerkki johtaa 25%/75% jakautumiseen pienillä laitteilla, 50%/50% jakautumiseen keskisuurilla laitteilla ja 33%/66% jakautumiseen suurilla, 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">
      <p>World Wide Fund for Nature (WWF), joka perustettiin 29. huhtikuuta 1961, tunnetaan suopandan logolla ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8">
      <p>1980-luvulla WWF saapui virallisesti Kiinaan, ja se pyysi Kiinan hallituksen kutsua Kiinaan suojellakseen suopandoja ja niiden elinympäristöä ...</p>
    </div>
  </div>
</div>

Kokeile itse

Huomaa:Varmista, että summa on tai pienempi kuin 12 (ei tarvitse käyttää kaikkia 12 saatavilla olevaa saraketta):

vain Large

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

Esimerkki

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <p>World Wide Fund for Nature (WWF), joka perustettiin 29. huhtikuuta 1961, tunnetaan suopandan logolla ...</p>
    </div>
    <div class="col-lg-6">
      <p>1980-luvulla WWF saapui virallisesti Kiinaan, ja se pyysi Kiinan hallituksen kutsua Kiinaan suojellakseen suopandoja ja niiden elinympäristöä ...</p>
    </div>
  </div>
</div>

Kokeile itse

Automaattinen asettelu sarakkeille

Bootstrap 5:ssä on yksinkertainen tapa luoda yhtä leveitä sarakkeita kaikille laitteille: riittää, että .col-lg-* Poista numerot ja käytä vain col-elementissä .col-lg Bootstrap tunnistaa kuinka monta saraketta on, ja jokainen saara kestää saman leveyden.

Jos näyttölaajuusalle 992pxSarakkeet asettuvat horisontaalisesti:

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

Kokeile itse