Voorbeelden van Bootstrap-raster
Basisrasterlay-outs om u vertrouwd te maken met bouwen binnen het Bootstrap-rastersysteem.
In deze voorbeelden .themed-grid-col
wordt de klasse toegevoegd aan de kolommen om wat thema's toe te voegen. Dit is geen klasse die standaard beschikbaar is in Bootstrap.
Vijf rasterlagen
Het Bootstrap-rastersysteem heeft vijf niveaus, één voor elke reeks apparaten die we ondersteunen. Elke laag begint met een minimale viewport-grootte en is automatisch van toepassing op de grotere apparaten, tenzij deze wordt overschreven.
Drie gelijke kolommen
Krijg drie kolommen van gelijke breedte, beginnend bij desktops en schalen naar grote desktops . Op mobiele apparaten, tablets en lager worden de kolommen automatisch gestapeld.
Drie gelijke kolommen alternatief
Door de .row-cols-*
klassen te gebruiken, kunt u eenvoudig een raster maken met gelijke kolommen.
.col
kind van
.row-cols-md-3
.col
kind van
.row-cols-md-3
.col
kind van
.row-cols-md-3
Drie ongelijke kolommen
Krijg drie kolommen , beginnend bij desktops en schalen naar grote desktops van verschillende breedtes. Onthoud dat rasterkolommen maximaal twaalf moeten zijn voor een enkel horizontaal blok. Meer dan dat, en kolommen beginnen te stapelen, ongeacht de viewport.
Twee kolommen
Krijg twee kolommen , beginnend bij desktops en schalen naar grote desktops .
Volledige breedte, enkele kolom
Er zijn geen rasterklassen nodig voor elementen over de volledige breedte.
Twee kolommen met twee geneste kolommen
Volgens de documentatie is nesten eenvoudig: plaats gewoon een rij kolommen in een bestaande kolom. Dit geeft je twee kolommen , beginnend bij desktops en schalend naar grote desktops , met nog eens twee (gelijke breedtes) binnen de grotere kolom.
Op mobiele apparaten, tablets en lager, worden deze kolommen en hun geneste kolommen gestapeld.
Gemengd: mobiel en desktop
Het Bootstrap v4-rastersysteem heeft vijf klassen: xs (extra klein, dit klasse-tussenvoegsel wordt niet gebruikt), sm (klein), md (gemiddeld), lg (groot) en xl (extra groot). U kunt bijna elke combinatie van deze klassen gebruiken om meer dynamische en flexibele lay-outs te maken.
Elk niveau van klassen wordt opgeschaald, wat betekent dat als u van plan bent dezelfde breedtes in te stellen voor md, lg en xl, u alleen md hoeft op te geven.
Gemengd: mobiel, tablet en desktop
dakgoten
Bij .gx-*
klassen kunnen de horizontale goten worden aangepast.
.col
met
.gx-4
goten
.col
met
.gx-4
goten
.col
met
.gx-4
goten
.col
met
.gx-4
goten
.col
met
.gx-4
goten
.col
met
.gx-4
goten
Gebruik de .gy-*
klassen om de verticale goten te besturen.
.col
met
.gy-4
goten
.col
met
.gy-4
goten
.col
met
.gy-4
goten
.col
met
.gy-4
goten
.col
met
.gy-4
goten
.col
met
.gy-4
goten
Bij .g-*
klassen kunnen de goten in beide richtingen worden aangepast.
.col
met
.g-3
goten
.col
met
.g-3
goten
.col
met
.g-3
goten
.col
met
.g-3
goten
.col
met
.g-3
goten
.col
met
.g-3
goten
containers
Extra klassen toegevoegd in Bootstrap v4.4 staan containers toe die 100% breed zijn tot een bepaald breekpunt. v5 voegt een nieuw xxl
breekpunt toe.