Bootstrap-raster - Kleine apparaten
Bootstrap-rastervoorbeeld: kleine apparaten
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs |
.col-sm |
.col-md |
.col-lg |
| Screen width | <768px | >=768px | >=992px | >=1200px |
Stel dat we een eenvoudige lay-out hebben met twee kolommen. We willen dat de kolommen 25%/75% worden gesplitst voor kleine apparaten.
Tip: Kleine apparaten hebben een schermbreedte van 768 pixels tot 991 pixels .
Voor kleine apparaten zullen we de .col-sm-*klassen gebruiken.
We zullen de volgende klassen aan onze twee kolommen toevoegen:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Nu gaat Bootstrap zeggen: "zoek bij het kleine formaat naar klassen met -sm- erin en gebruik die".
Het volgende voorbeeld resulteert in een verdeling van 25%/75% op kleine (en middelgrote en grote) apparaten. Op extra kleine apparaten wordt het automatisch gestapeld (100%):
Voorbeeld
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Let op: Zorg ervoor dat de som altijd 12 is.
Voor een verdeling van 33,3%/66,6% gebruikt u .col-sm-4en .col-sm-8:
Voorbeeld
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Het volgende hoofdstuk laat zien hoe u een ander splitpercentage kunt toevoegen voor middelgrote apparaten.