Bootstrap rooster voorbeelde

Basiese roosteruitlegte om jou vertroud te maak met die bou binne die Bootstrap-roosterstelsel.

Drie gelyke kolomme

Kry drie kolomme met gelyke breedte, begin by rekenaars en skaal na groot rekenaars . Op mobiele toestelle, tablette en onder sal die kolomme outomaties gestapel word.

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

Drie ongelyke kolomme

Kry drie kolomme wat by rekenaars begin en skaal na groot rekenaars van verskillende breedtes. Onthou, roosterkolomme behoort tot twaalf op te tel vir 'n enkele horisontale blok. Meer as dit, en kolomme begin stapel maak nie saak die viewport nie.

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

Twee kolomme

Kry twee kolomme wat by rekenaars begin en skaal na groot rekenaars .

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

Volle breedte, enkelkolom

Geen roosterklasse is nodig vir volle breedte-elemente nie.

Twee kolomme met twee geneste kolomme

Volgens die dokumentasie is nes maklik - plaas net 'n ry kolomme binne 'n bestaande kolom. Dit gee jou twee kolomme wat by rekenaars begin en skaal na groot rekenaars , met nog twee (gelyke breedtes) binne die groter kolom.

By mobiele toestelgroottes, tablette en af, sal hierdie kolomme en hul geneste kolomme gestapel word.

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

Gemengd: selfoon en rekenaar

Die Bootstrap 3-roosterstelsel het vier vlakke van klasse: xs (fone), sm (tablette), md (rekenaars) en lg (groter rekenaars). Jy kan byna enige kombinasie van hierdie klasse gebruik om meer dinamiese en buigsame uitlegte te skep.

Elke vlak van klasse skaal op, wat beteken dat as jy van plan is om dieselfde breedtes vir xs en sm op te stel, hoef jy net xs te spesifiseer.

.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

Gemengd: selfoon, tablet en rekenaar

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

Kolom skoonmaak

Duidelike drywers by spesifieke breekpunte om ongemaklike toevou met ongelyke inhoud te voorkom.

.col-xs-6 .col-sm-3
Verander die grootte van jou viewport of kyk dit op jou foon vir 'n voorbeeld.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Verstel-, druk- en trekherstellings

Herstel verstellings, stoot en trek by spesifieke breekpunte.

.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