Bootstrap- rasters
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 reageert en de kolommen worden automatisch opnieuw gerangschikt, afhankelijk van de schermgrootte.
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.
Basisstructuur van een Bootstrap-raster
Het volgende is een basisstructuur van een Bootstrap-raster:
<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>
Eerste; maak 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.
Hieronder hebben we enkele voorbeelden verzameld van eenvoudige Bootstrap-rasterlay-outs.
Drie gelijke kolommen
Het volgende voorbeeld laat zien hoe u drie kolommen van gelijke breedte krijgt, beginnend bij tablets en schalen naar grote desktops. Op mobiele telefoons of schermen die minder dan 768 px breed zijn, worden de kolommen automatisch gestapeld:
Voorbeeld
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Twee ongelijke kolommen
Het volgende voorbeeld laat zien hoe u twee kolommen met verschillende breedtes kunt krijgen, beginnend bij tablets en schalen naar grote desktops:
Voorbeeld
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Tip: Later in deze zelfstudie leert u meer over Bootstrap-rasters.