Bootstrap- rastersysteem
Bootstrap-rastersysteem
Het rastersysteem van Bootstrap maakt maximaal 12 kolommen over de pagina mogelijk.
Als u niet alle 12 kolommen afzonderlijk wilt gebruiken, kunt u de kolommen groeperen om bredere kolommen te maken:
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| overspanning 4 | overspanning 4 | overspanning 4 | |||||||||
| overspanning 4 | overspanning 8 | ||||||||||
| overspanning 6 | overspanning 6 | ||||||||||
| spanwijdte 12 | |||||||||||
Het rastersysteem van Bootstrap is responsief en de kolommen worden opnieuw gerangschikt afhankelijk van de schermgrootte: op een groot scherm ziet het er misschien beter uit als de inhoud in drie kolommen is georganiseerd, maar op een klein scherm zou het beter zijn als de inhoudsitems waren gestapeld boven op elkaar.
Tip: onthoud dat rasterkolommen voor een rij optellen tot twaalf. Meer dan dat, kolommen worden gestapeld, ongeacht de viewport.
Rasterklassen
Het Bootstrap-rastersysteem heeft vier klassen:
xs(voor telefoons - schermen kleiner dan 768px breed)sm(voor tablets - schermen gelijk aan of groter dan 768px breed)md(voor kleine laptops - schermen gelijk aan of groter dan 992px breed)lg(voor laptops en desktops - schermen gelijk aan of groter dan 1200px breed)
De bovenstaande klassen kunnen worden gecombineerd om meer dynamische en flexibele lay-outs te creëren.
Tip: Elke klasse wordt opgeschaald, dus als u dezelfde breedtes voor xs en sm wilt instellen, hoeft u alleen xs op te geven.
Regels voor rastersysteem
Enkele regels voor het Bootstrap-rastersysteem:
- Rijen moeten binnen een
.container(vaste breedte) of.container-fluid(volledige breedte) worden geplaatst voor een juiste uitlijning en opvulling - Rijen gebruiken om horizontale groepen kolommen te maken
- Inhoud moet in kolommen worden geplaatst en alleen kolommen mogen directe onderliggende rijen zijn
- Vooraf gedefinieerde klassen zoals
.rowen.col-sm-4zijn beschikbaar voor het snel maken van rasterlay-outs - Kolommen creëren goten (gaten tussen kolominhoud) via opvulling. Die opvulling wordt in rijen gecompenseerd voor de eerste en laatste kolom via negatieve marge aan
.rows - Rasterkolommen worden gemaakt door het aantal van 12 beschikbare kolommen op te geven dat u wilt overspannen. Drie gelijke kolommen zouden bijvoorbeeld drie . gebruiken
.col-sm-4 - Kolombreedtes zijn in procenten, dus ze zijn altijd vloeiend en hebben een grootte ten opzichte van hun bovenliggende element
Basisstructuur van een Bootstrap-raster
Het volgende is een basisstructuur van een Bootstrap-raster:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
Dus om de gewenste lay-out te maken, maakt u een container ( <div
class="container">). Maak vervolgens een rij ( <div
class="row">). Voeg vervolgens het gewenste aantal kolommen toe (tags met de juiste
.col-*-*klassen). Houd er rekening mee dat getallen in .col-*-*voor elke rij altijd 12 moeten zijn.
Rasteropties
De volgende tabel geeft een overzicht van hoe het Bootstrap-rastersysteem werkt op meerdere apparaten:
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
Voorbeelden
De volgende hoofdstukken tonen voorbeelden van rastersystemen voor verschillende apparaten:
- Gestapeld-naar-horizontaal
- Kleine apparaten
- Middelgrote apparaten
- Grote apparaten
- Meer rastervoorbeelden