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-sm-4

.col-md-4

.col-lg-4

.col-xl-4

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

Trīs vienādu kolonnu alternatīva

Izmantojot .row-cols-*klases, jūs varat viegli izveidot režģi ar vienādām kolonnām.

.colbērns no .row-cols-md-3

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šā 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-4

Jaukts: mobilais un galddators

Bootstrap v4 režģa sistēmai ir pieci klašu līmeņi: xs (īpaši mazs, šis klases infikss netiek izmantots), 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 md, lg un xl, jums ir jānorāda tikai md.

.col-md-8

.col-6 .col-md-4

.col-6

Jaukts: mobilais, planšetdators un galddators

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

.col-6 .col-lg-4

.col-6 .col-sm-4

Notekcaurules

Ar .gx-*klasēm horizontālās notekas var regulēt.

.colar .gx-4notekcaurulēm

Izmantojiet .gy-*klases, lai kontrolētu vertikālās notekcaurules.

.colar .gy-4notekcaurulēm

Ar .g-*klasēm var regulēt notekas abos virzienos.

.colar .g-3notekcaurulēm

Konteineri

Papildu klases, kas pievienotas Bootstrap v4.4, ļauj konteineriem, kas ir 100% plati līdz noteiktam pārtraukuma punktam. v5 pievieno jaunu xxlpārtraukuma punktu.

.konteiners

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.konteiners-šķidrums