Bootstrap -rastervoorbeelden
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 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>
Drie ongelijke kolommen
Het volgende voorbeeld laat zien hoe u drie kolommen met verschillende breedtes kunt krijgen, beginnend bij tablets en schalen naar grote desktops:
Voorbeeld
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</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>
Geen goten
Gebruik de .row-no-guttersklasse om de goten uit een rij en de bijbehorende kolommen te verwijderen:
Voorbeeld
<div class="row row-no-gutters">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Twee kolommen met twee geneste kolommen
Het volgende voorbeeld laat zien hoe u twee kolommen kunt krijgen, beginnend bij tablets en schalen naar grote desktops, met nog twee kolommen (gelijke breedtes) binnen de grotere kolom (op mobiele telefoons worden deze kolommen en hun geneste kolommen gestapeld):
Voorbeeld
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Gemengd: mobiel en desktop
Het Bootstrap-rastersysteem heeft vier klassen: xs (telefoons), sm (tablets), md (desktops) en lg (grotere desktops). De 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.
Voorbeeld
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Tip: onthoud dat rasterkolommen voor een rij optellen tot twaalf. Meer dan dat, kolommen worden gestapeld, ongeacht de viewport.
Gemengd: mobiel, tablet en desktop
Voorbeeld
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
Duidelijke drijvers
Wis floats (met de .clearfixklasse) op specifieke breekpunten om vreemde verpakkingen met ongelijke inhoud te voorkomen:
Voorbeeld
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
Kolommen verschuiven
Verplaats kolommen naar rechts met behulp van .col-md-offset-*klassen. Deze klassen vergroten de linkermarge van een kolom met * kolommen:
Voorbeeld
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
</div>
Duwen en trekken - Kolomvolgorde wijzigen
Wijzig de volgorde van de rasterkolommen met .col-md-push-*en
.col-md-pull-*klassen:
Voorbeeld
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>