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

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

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

Drie gelyke kolomme alternatief

Deur die .row-cols-*klasse te gebruik, kan jy maklik 'n rooster met gelyke kolomme skep.

.colkind van .row-cols-md-3

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

.col-md-4

Gemengd: selfoon en rekenaar

Die Bootstrap v5-roosterstelsel het ses vlakke van klasse: xs (ekstra klein, hierdie klasinvoegsel word nie gebruik nie), sm (klein), md (medium), lg (groot), xl (x-groot) en xxl (xx) -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 md, lg, xl en xxl op te stel, hoef jy net md te spesifiseer.

.kol-md-8

.kol-6 .kol-md-4

.kol-6

Gemengd: selfoon, tablet en rekenaar

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

.col-6 .col-lg-4

.col-6 .col-sm-4

Geute

Met .gx-*klasse kan die horisontale geute verstel word.

.colmet .gx-4geute

Gebruik die .gy-*klasse om die vertikale geute te beheer.

.colmet .gy-4geute

Met .g-*klasse kan die geute in beide rigtings verstel word.

.colmet .g-3geute

Houers

Bykomende klasse wat in Bootstrap v4.4 bygevoeg is, laat houers toe wat 100% wyd is tot 'n spesifieke breekpunt. v5 voeg 'n nuwe xxlbreekpunt by.

.houer

.houer-sm

.houer-md

.houer-lg

.houer-xl

.houer-xxl

.houer-vloeistof