Bootstrap 5 ruudukko: erittäin pienet laitteet
- Edellinen sivu BS5-pystysuuntainen
- Seuraava sivu BS5-rasteri Small
Erittäin pieni 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 |
Oletetaan, että meillä on yksinkertainen asettelu, joka sisältää kaksi saraketta. Toivomme, että sarakkeet ovatKaikkiLaitteiden jakautuminen 25% / 75%.
Lisäämme seuraavat luokat kahteen sarakkeeseen:
<div class="col-3">....</div> <div class="col-9">....</div>
Seuraava esimerkki johtaa kaikkiin laitteisiin (erittäin pienet, pienet, keskisuuret, suuret, erittäin suuret ja jättiläiset) 25% / 75% jakautumiseen.
Esimerkki
<div class="container-fluid"> <div class="row"> <div class="col-3 bg-primary"> <p>World Wide Fund for Nature (WWF), perustettu 29. huhtikuuta 1961, logona on suurpeikko ...</p> </div> <div class="col-9 bg-dark"> <p>1980-luvulla WWF saapui virallisesti Kiinaan, kutsuttiin Kiinan hallituksen toimesta ja aloitti suojelutyön suurpeikkojen ja niiden elinympäristöjen hyväksi ...</p> </div> </div> </div>
Huomioitavaa:Varmista, että summa on tai pienempi kuin 12 (ei tarvitse käyttää kaikkia 12 saatavilla olevaa saraketta):
33.3% / 66.6% erottelussa sinun tulisi käyttää .col-4
ja .col-8
(50% / 50% erottelussa sinun tulisi käyttää .col-6
ja .col-6
):
Esimerkki
<!-- 33.3%/66.6% erottelu --> <div class="container-fluid"> <div class="row"> <div class="col-4 bg-primary"> <p>World Wide Fund for Nature (WWF), perustettu 29. huhtikuuta 1961, logona on suurpeikko ...</p> </div> <div class="col-8 bg-dark"> <p>1980-luvulla WWF saapui virallisesti Kiinaan, kutsuttiin Kiinan hallituksen toimesta ja aloitti suojelutyön suurpeikkojen ja niiden elinympäristöjen hyväksi ...</p> </div> </div> </div> <!-- 50%/50% erottelu --> <div class="container-fluid"> <div class="row"> <div class="col-6 bg-primary"> <p>World Wide Fund for Nature (WWF), perustettu 29. huhtikuuta 1961, logona on suurpeikko ...</p> </div> <div class="col-6 bg-dark"> <p>1980-luvulla WWF saapui virallisesti Kiinaan, kutsuttiin Kiinan hallituksen toimesta ja aloitti suojelutyön suurpeikkojen ja niiden elinympäristöjen hyväksi ...</p> </div> </div> </div>
Automaattinen asettelu sarjoille
Bootstrap 5:ssä on yksinkertainen tapa luoda automaattinen asettelu kaikille laitteilleyhtä leveät sarjatVain .col-*
Poista numerot ja käytä vain col-elementissä .col
Luokat. Bootstrap tunnistaa kuinka monta sarjaa on, ja jokainen sarja saa saman leveyden:
<!-- Kaksi sarjaa: 50% leveys --> <div class="row"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <!-- Neljä sarjaa: 25% leveys --> <div class="row"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div>
Seuraavassa luvussa näytetään, miten erilaisia osuusprosentteja lisätään pieniin laitteisiin.
- Edellinen sivu BS5-pystysuuntainen
- Seuraava sivu BS5-rasteri Small