Bootstrap rooster voorbeelde

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

In hierdie voorbeelde .themed-grid-colword die klas by die kolomme gevoeg om 'n tema by te voeg. Dit is nie 'n klas wat by verstek in Bootstrap beskikbaar is nie.

Vyf roostervlakke

Daar is vyf vlakke vir die Bootstrap-roosterstelsel, een vir elke reeks toestelle wat ons ondersteun. Elke vlak begin by 'n minimum viewport-grootte en is outomaties van toepassing op die groter toestelle, tensy dit oorskryf word.

.kol-4
.kol-4
.kol-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

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.

.kol-md-3
.kol-md-6
.kol-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
.kol-md-6
.kol-md-6
.col-md-4

Gemengd: selfoon en rekenaar

Die Bootstrap v4-roosterstelsel het vyf vlakke van klasse: xs (ekstra klein), sm (klein), md (medium), lg (groot) en xl (ekstra groot). 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-12 .col-md-8
.kol-6 .kol-md-4
.kol-6 .kol-md-4
.kol-6 .kol-md-4
.kol-6 .kol-md-4
.kol-6
.kol-6

Gemengd: selfoon, tablet en rekenaar

.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