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-col
klase 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.
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.
Trīs vienādu kolonnu alternatīva
Izmantojot .row-cols-*
klases, jūs varat viegli izveidot režģi ar vienādām kolonnām.
.col
bērns no
.row-cols-md-3
.col
bērns no
.row-cols-md-3
.col
bē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.
Divas kolonnas
Iegūstiet divas kolonnas , sākot ar galddatoriem un mērogojot līdz lieliem galddatoriem .
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.
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.
Jaukts: mobilais, planšetdators un galddators
Notekcaurules
Ar .gx-*
klasēm horizontālās notekas var regulēt.
.col
ar
.gx-4
notekcaurulēm
.col
ar
.gx-4
notekcaurulēm
.col
ar
.gx-4
notekcaurulēm
.col
ar
.gx-4
notekcaurulēm
.col
ar
.gx-4
notekcaurulēm
.col
ar
.gx-4
notekcaurulēm
Izmantojiet .gy-*
klases, lai kontrolētu vertikālās notekcaurules.
.col
ar
.gy-4
notekcaurulēm
.col
ar
.gy-4
notekcaurulēm
.col
ar
.gy-4
notekcaurulēm
.col
ar
.gy-4
notekcaurulēm
.col
ar
.gy-4
notekcaurulēm
.col
ar
.gy-4
notekcaurulēm
Ar .g-*
klasēm var regulēt notekas abos virzienos.
.col
ar
.g-3
notekcaurulēm
.col
ar
.g-3
notekcaurulēm
.col
ar
.g-3
notekcaurulēm
.col
ar
.g-3
notekcaurulēm
.col
ar
.g-3
notekcaurulēm
.col
ar
.g-3
notekcaurulēm
Konteineri
Papildu klases, kas pievienotas Bootstrap v4.4, ļauj konteineriem, kas ir 100% plati līdz noteiktam pārtraukuma punktam. v5 pievieno jaunu xxl
pārtraukuma punktu.