Bootstrap rooster voorbeelde
Basiese roosteruitlegte om jou vertroud te maak met die bou binne die Bootstrap-roosterstelsel.
In hierdie voorbeelde .themed-grid-col
word 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.
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.
Drie gelyke kolomme alternatief
Deur die .row-cols-*
klasse te gebruik, kan jy maklik 'n rooster met gelyke kolomme skep.
.col
kind van
.row-cols-md-3
.col
kind van
.row-cols-md-3
.col
kind 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.
Twee kolomme
Kry twee kolomme wat by rekenaars begin en skaal na groot rekenaars .
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.
Gemengd: selfoon en rekenaar
Die Bootstrap v4-roosterstelsel het vyf vlakke van klasse: xs (ekstra klein, hierdie klasinvoegsel word nie gebruik nie), 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 md, lg en xl op te stel, hoef jy net md te spesifiseer.
Gemengd: selfoon, tablet en rekenaar
Geute
Met .gx-*
klasse kan die horisontale geute verstel word.
.col
met
.gx-4
geute
.col
met
.gx-4
geute
.col
met
.gx-4
geute
.col
met
.gx-4
geute
.col
met
.gx-4
geute
.col
met
.gx-4
geute
Gebruik die .gy-*
klasse om die vertikale geute te beheer.
.col
met
.gy-4
geute
.col
met
.gy-4
geute
.col
met
.gy-4
geute
.col
met
.gy-4
geute
.col
met
.gy-4
geute
.col
met
.gy-4
geute
Met .g-*
klasse kan die geute in beide rigtings verstel word.
.col
met
.g-3
geute
.col
met
.g-3
geute
.col
met
.g-3
geute
.col
met
.g-3
geute
.col
met
.g-3
geute
.col
met
.g-3
geute
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 xxl
breekpunt by.