Bootstrap režģa piemēri

Pamata režģa izkārtojumi, lai jūs iepazītos ar veidošanu Bootstrap režģa sistēmā.

Šajos piemēros .themed-grid-colklase tiek pievienota kolonnām, lai pievienotu kādu tēmu. Šī nav klase, kas pēc noklusējuma ir pieejama programmā Bootstrap.

Pieci režģa līmeņi

Bootstrap režģa sistēmai ir pieci līmeņi — viens katram mūsu atbalstīto ierīču diapazonam. Katrs līmenis sākas ar minimālo skatvietas izmēru un automātiski attiecas uz lielākām ierīcēm, ja vien tas netiek ignorēts.

.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

Trīs vienādas kolonnas

Iegūstiet trīs vienāda platuma kolonnas , sākot no galddatoriem un mērogojot līdz lieliem galddatoriem . Mobilajās ierīcēs, planšetdatoros un zemāk kolonnas tiks automātiski sakrautas.

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

Trīs nevienlīdzīgas kolonnas

Iegūstiet trīs kolonnas , sākot ar galddatoriem un mērogojot līdz lielām dažāda platuma galddatoriem. Atcerieties, ka vienam horizontālajam blokam režģa kolonnām vajadzētu būt līdz divpadsmit. Turklāt kolonnas sāk sakraut neatkarīgi no skatvietas.

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

Divas kolonnas

Iegūstiet divas kolonnas , sākot ar galddatoriem un mērogojot līdz lieliem galddatoriem .

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

Pilna platuma, viena kolonna

Pilna platuma elementiem nav nepieciešamas režģa klases.

Divas kolonnas ar divām ligzdotām kolonnām

Saskaņā ar dokumentāciju ligzdošana ir vienkārša — vienkārši ievietojiet kolonnu rindu esošajā kolonnā. Tas dod jums divas kolonnas , sākot no galddatoriem un mērogojot līdz lieliem galddatoriem , bet vēl divas (vienāda platuma) lielākajā kolonnā.

Mobilo ierīču izmēros, planšetdatoros un uz leju, šīs kolonnas un to ligzdotās kolonnas tiks sakrautas.

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

Jaukts: mobilais un galddators

Bootstrap v4 režģa sistēmai ir pieci klašu līmeņi: xs (īpaši mazs), sm (mazs), md (vidējs), lg (liels) un xl (īpaši liels). Varat izmantot gandrīz jebkuru šo klašu kombināciju, lai izveidotu dinamiskākus un elastīgākus izkārtojumus.

Katrs klašu līmenis palielinās, tas nozīmē, ka, ja plānojat iestatīt vienādus platumus xs un sm, jums jānorāda tikai 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

Jaukts: mobilais, planšetdators un galddators

.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