Bootstrap 5 ruudukko esimerkki
- Edellinen sivu BS5 ruudukko XXL
- Seuraava sivu BS5 perusmalli
Tässä olemme keränneet joitakin Bootstrap 5 ruudukkoasettelun esimerkkejä.
Kolme yhtä leveää saraketta
Käytä määrättyä määrää elementtejä .col Luokka, Bootstrap tunnistaa kuinka monta elementtiä (ja luo yhtä leveitä sarakkeita). Esimerkissä käytimme kolmea col-elementtiä, jokaisen elementin leveys on 33.33%.
Esimerkki
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
Numeroiden avulla olevat kolme yhtä suurta saraketta
Voit myös käyttää numeroita hallitaksesi sarakkeen leveyttä. Varmista vain, että summa on tai pienempi kuin 12（ei tarvitse käyttää kaikkia 12 saatavilla olevaa saraketta）：
Esimerkki
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
Kolme eri suuruista saraketta
Jos haluat luoda eri suuruisia sarakkeita, sinun täytyy käyttää numeroita. Esimerkissä luodaan 25%/50%/25% jakautuminen:
Esimerkki
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
Aseta sarakkeen leveys
Kuitenkin, vain yhden sarakkeen leveyden asettaminen riittää, ja siskosarakkeet säätävät automaattisesti mittojaan ympärillä. Esimerkissä luodaan 25%/50%/25% jakautuminen:
Esimerkki
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
Lisää yhtä suuria列
Esimerkki
<!-- kaksi yhtä suurta列 --> <div class="row"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <!-- neljä yhtä suurta列 --> <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> <!-- kuusi yhtä suurta列 --> <div class="row"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Row Cols
Voit myös käyttää .row-cols-* Luokka hallinta tulisi näkyä vierekkäisissä sarakkeissa（riippumatta kuinka monta saraketta on）：
Esimerkki
<div class="row row-cols-1"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <div class="row row-cols-2"> <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> <div class="row row-cols-3"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Lisää eri列
Esimerkki
<!-- kaksi eri列 --> <div class="row"> <div class="col-8">1 of 2</div> <div class="col-4">2 of 2</div> </div> <!-- Neljä eri leveyttä --> <div class="row"> <div class="col-2">1 of 4</div> <div class="col-2">2 of 4</div> <div class="col-2">3 of 4</div> <div class="col-6">4 of 4</div> </div> <!-- Aseta kahden sarakkeen leveydet --> <div class="row"> <div class="col-4">1 of 4</div> <div class="col-6">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div>
Yhtä korkeat
Jos yksi sarakkeesta on korkeampi (tekstin tai CSS-korkeuden vuoksi), muut seuraavat:
Esimerkki
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
Sisäänrakennetut sarakkeet
Tässä esimerkissä näytetään, miten luodaan kaksi saraketta, joista toisessa on toinen kaksi saraketta:
Esimerkki
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
Vastausluokat
Bootstrap 5 -verkostojärjestelmällä on viisi luokkaa:
.col-(erittäin pienet laitteet - näytön leveys on alle 576px).col-sm-(pienet laitteet - näytön leveys on 576px tai suurempi).col-md-(keskisuuret laitteet - näytön leveys on 768 pikseliä tai suurempi).col-lg-(suuret laitteet - näytön leveys on 992 pikseliä tai suurempi).col-xl-(xlarge laitteet - näytön leveys on 1200px tai suurempi).col-xxl-(xxlarge laitteet - näytön leveys on 1400px tai suurempi)
Voit yhdistää yllä olevia luokkia luodaksesi dynaamisemman ja joustavamman asettelun.
Vinkki:Jokainen luokka suurenee suhteellisesti, joten jos haluat sm ja md Jos asetetaan samanlaiset leveydet, riittää, että määritellään sm。
Kerrostu vaakasuoraan
Tässä esimerkissä näytetään, miten luodaan sarakkeiden asettelu, joka alkaa pienten laitteiden yhteydessä kerrostuneena ja sitten muuttuu vaakasuoraan asetteluun suuremmilla laitteilla (sm, md, lg ja xl):
Esimerkki
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
Yhdistä ja sovella
Esimerkki
<!-- Supersuurilla laitteilla 50%/50% -jakautuminen, suurilla laitteilla 75%/25% -jakautuminen --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- Supersuurilla, pienillä, keskisuurilla ja suurilla laitteilla 58%/42% -jakautuminen, suurilla ja erittäin suurilla laitteilla 66.3%/33.3% -jakautuminen --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- Pienten laitteiden osalta 25%/75% -jakautuminen, keskisuurilla laitteilla 50%/50% -jakautuminen, suurilla ja erittäin suurilla laitteilla 33%/66% -jakautuminen. Supersuurilla laitteilla sisennetään automaattisesti (100%). --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
ei gutter
Jos haluat muuttaa sarakkeiden välisiä etäisyyksiä (lisätilaa), käytä mitä tahansa .g-1|2|3|4|5 luokka (.g-4 on oletusarvo).
Jos haluat poistaa täysin liitosreunuksen (gutter), käytä .g-0：
Esimerkki
<div class="row g-0">
- Edellinen sivu BS5 ruudukko XXL
- Seuraava sivu BS5 perusmalli
