Bootstrap ruudustiku näited

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

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 töölaudadest 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 3 ruudustikusüsteemil on neli klassitaset: xs (telefonid), sm (tahvelarvutid), md (lauaarvutid) ja lg (suuremad lauaarvutid). 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-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Segatud: mobiil, tahvelarvuti ja lauaarvuti

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

Veeru tühjendamine

Läbipaistvad ujukid kindlates katkestuskohtades, et vältida ebamugavat pakkimist ebaühtlase sisuga.

.col-xs-6 .col-sm-3
Muutke oma vaateava suurust või vaadake seda näiteks oma telefonis.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Nihutamine, lükkamine ja tõmbamine lähtestab

Lähtesta nihutab, lükkab ja tõmbab teatud katkestuspunktides.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0