Bootstrap 4 rasters
Bootstrap 4 rastersysteem
Het rastersysteem van Bootstrap is gebouwd met flexbox en 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 | ||||||||||
| overspanning 12 | |||||||||||
Het rastersysteem reageert en de kolommen worden automatisch opnieuw gerangschikt, afhankelijk van de schermgrootte.
Zorg ervoor dat de som 12 of minder is (het is niet vereist dat u alle 12 beschikbare kolommen gebruikt).
Rasterklassen
Het Bootstrap 4-rastersysteem heeft vijf klassen:
.col-(extra kleine apparaten - schermbreedte kleiner dan 576px).col-sm-(kleine apparaten - schermbreedte gelijk aan of groter dan 576px).col-md-(gemiddelde apparaten - schermbreedte gelijk aan of groter dan 768px).col-lg-(grote apparaten - schermbreedte gelijk aan of groter dan 992px).col-xl-(xgrote apparaten - schermbreedte gelijk aan of groter dan 1200px)
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
smen wilt instellen md, hoeft u alleen op te geven sm.
Basisstructuur van een Bootstrap 4-raster
Het volgende is een basisstructuur van een Bootstrap 4-raster:
<!-- Control the column width, and how they should appear on different
devices -->
<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>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Eerste voorbeeld: maak een rij ( <div
class="row">). Voeg vervolgens het gewenste aantal kolommen toe (tags met de juiste
.col-*-*klassen). De eerste ster (*) staat voor het reactievermogen: sm, md, lg of xl, terwijl de tweede ster een getal vertegenwoordigt, dat voor elke rij tot 12 moet oplopen.
Tweede voorbeeld: in plaats van een nummer aan elk toe te voegen col, laat Bootstrap de lay-out af om kolommen met gelijke breedte te maken: twee "col"elementen = 50% breedte voor elke kolom. drie cols = 33,33% breedte voor elke col. vier cols = 25% breedte, enz. U kunt ook gebruiken .col-sm|md|lg|xlom de kolommen responsief te maken.
Hieronder hebben we enkele voorbeelden verzameld van standaard Bootstrap 4-rasterlay-outs.
Drie gelijke kolommen
Het volgende voorbeeld laat zien hoe u drie kolommen van gelijke breedte maakt, op alle apparaten en schermbreedtes:
Voorbeeld
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Responsieve kolommen
Het volgende voorbeeld laat zien hoe u vier kolommen van gelijke breedte kunt maken, beginnend bij tablets en schalen naar extra grote desktops. Op mobiele telefoons of schermen die minder dan 576px breed zijn, worden de kolommen automatisch op elkaar gestapeld :
Voorbeeld
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Twee ongelijke responsieve kolommen
Het volgende voorbeeld laat zien hoe u twee kolommen met verschillende breedtes kunt krijgen, beginnend bij tablets en schalen naar grote extra 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 4-rasters.