Bootstrap režģa piemēri

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

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šā 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 3 režģa sistēmai ir četri klašu līmeņi: xs (tālruņi), sm (planšetdatori), md (galddatori) un lg (lielāki galddatori). 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-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

Jaukts: mobilais, planšetdators un galddators

.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

Kolonnu notīrīšana

Caurspīdīgi pludiņi noteiktos pārtraukuma punktos, lai novērstu neērtu iesaiņošanu ar nevienmērīgu saturu.

.col-xs-6 .col-sm-3
Mainiet skata loga izmēru vai pārbaudiet to savā tālrunī, lai iegūtu piemēru.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Nobīde, stumšana un vilkšana atiestata

Atiestatīt nobīdes, stumšanas un vilkšanas konkrētos pārtraukuma punktos.

.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