Bootstrap ruudustiku näited

Põhilised ruudustiku paigutused, mis aitavad teil tutvuda Bootstrapi ruudustikusüsteemis ehitamisega.

Nendes näidetes lisatakse .themed-grid-colklass veergudele, et lisada teemasse. See ei ole klass, mis on vaikimisi Bootstrapis saadaval.

Viis ruudustiku taset

Bootstrapi ruudustikusüsteemil on viis astet, üks iga toetatava seadme jaoks. Iga tasand algab minimaalse vaateava suurusega ja rakendub automaatselt suurematele seadmetele, kui seda ei tühistata.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

Kolm võrdset veergu

Hankige kolm võrdse laiusega veergu , alustades lauaarvutitest ja skaleerides suurte töölaudadeni . Mobiilseadmetes, tahvelarvutites ja allpool virnatakse veerud automaatselt.

.col-md-4
.col-md-4
.col-md-4

Kolm võrdset veergu alternatiiv

Klasside abil .row-cols-*saate hõlpsasti luua võrdsete veergudega ruudustiku.

.collaps .row-cols-md-3
.collaps .row-cols-md-3
.collaps .row-cols-md-3

Kolm ebavõrdset veergu

Hankige kolm veergu , mis algavad lauaarvutitest ja skaleeritakse erinevate laiustega suurtele töölaudadele. Pidage meeles, et ühe horisontaalse ploki puhul peaks ruudustiku veerge olema kuni kaksteist. Veelgi enam, veerge hakatakse virnastama olenemata vaateavast.

.col-md-3
.col-md-6
.col-md-3

Kaks veergu

Hankige kaks veergu , alustades lauaarvutitest ja skaleerides suurtele töölaudadele .

.col-md-8
.col-md-4

Täislaius, üks veerg

Täislaiusega elementide jaoks pole ruudustiku klasse vaja.

Kaks veergu kahe pesastatud veeruga

Dokumentatsiooni kohaselt on pesastamine lihtne – lihtsalt pange olemasolevasse veergu veergude rida. See annab teile kaks veergu , mis algavad töölaudadest ja skaleeritakse suurteks töölaudadeks , kusjuures veel kaks (võrdse laiusega) suuremas veerus.

Mobiilseadmete, tahvelarvutite ja väiksemate seadmete puhul virnatakse need veerud ja nende pesastatud veerud.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Segatud: mobiilne ja lauaarvuti

Bootstrap v4 ruudustikusüsteemil on viis klasside taset: xs (eriti väike, seda klassi infixit ei kasutata), sm (väike), md (keskmine), lg (suur) ja xl (eriti suur). Dünaamilisemate ja paindlikumate paigutuste loomiseks saate kasutada peaaegu kõiki nende klasside kombinatsioone.

Iga klasside tasand suureneb, mis tähendab, et kui kavatsete määrata md, lg ja xl jaoks samad laiused, peate määrama ainult md.

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Segatud: mobiil, tahvelarvuti ja lauaarvuti

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

Vihmaveerennid

Klasside abil .gx-*saab horisontaalseid vihmaveerennid reguleerida.

.col.gx-4vihmaveerennidega _
.col.gx-4vihmaveerennidega _
.col.gx-4vihmaveerennidega _
.col.gx-4vihmaveerennidega _
.col.gx-4vihmaveerennidega _
.col.gx-4vihmaveerennidega _

Kasutage .gy-*vertikaalsete vihmaveerennide juhtimiseks klasse.

.col.gy-4vihmaveerennidega _
.col.gy-4vihmaveerennidega _
.col.gy-4vihmaveerennidega _
.col.gy-4vihmaveerennidega _
.col.gy-4vihmaveerennidega _
.col.gy-4vihmaveerennidega _

.g-*Klassidega saab reguleerida renni mõlemas suunas .

.col.g-3vihmaveerennidega _
.col.g-3vihmaveerennidega _
.col.g-3vihmaveerennidega _
.col.g-3vihmaveerennidega _
.col.g-3vihmaveerennidega _
.col.g-3vihmaveerennidega _

Konteinerid

Täiendavad klassid, mis on lisatud versioonile Bootstrap v4.4, võimaldavad konteinereid, mis on kuni konkreetse katkestuspunktini 100% laiad. v5 lisab uue xxlkatkestuspunkti.

.konteiner
.konteiner-sm
.container-md
.container-lg
.container-xl
.container-xxl
.konteiner-vedelik