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

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 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), 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 xs ja sm jaoks samad laiused, peate määrama ainult xs.

.col-12 .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-12 .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