Introductie
Grid systemen worden gebruikt om pagina layouts te bouwen door middel van rows (rijen) en columns (kolommen) waar content in gepresenteerd wordt. Het Bootstrap grid systeem werkt op de volgende manier:
- Rows moeten binnen een
.container
geplaatst worden voor de juiste uitlijning en vulling. - Gebruik rows om horizontale groepen met columns te creëren.
- Content moet binnen een column geplaatst worden en alleen columns mogen een directe child van rows zijn.
- Voorgedefinieerde grid classes als
.row
en.col-xs-4
zijn te gebruiken om snel een grid layout samen te stellen. Sass mixins kunnen gebruikt worden een meer semantisch grid te bouwen. - columns creëren gutters (verticale witruimte tussen content en componenten) door middel van
padding
. De padding heeft een offset in rows voor de eerste en laatste column door een negatieve margin op de.row
s. - De negatieve margin is de oorzaak waarom de onderstaande voorbeelden buiten het grid lopen.
- Grid columns kunnen gecreërd worden door een aantal columns te definieren die samen optellen tot
maximaal 12 (de volledige paginabreedte). Bijvoorbeeld: Om 3 gelijke columns over de volledige
breedte te creëren gebruik je drie
.col-xs-4
. - Wanneer er meer dan 12 columns in een row geplaatst worden, vallen de laatste columns automatisch op een nieuwe regel.
- grid classes hebben uitwerking op devices met schermresoluties die gelijk en/of groter zijn dan
de breakpoints. Ze overschrijven grid classes die kleinere schermresoluties aanspreken. Wanneer
men bijvoorbeeld een
.col-md-*
class aan een element toevoegd, zal deze niet alleen de medium devices aanspreken maar ook alle grotere wanneer er geen.col-lg-*
class aanwezig is. - Het
nesten
van rows (row in een row) is tot één niveau diep toegestaan. De geneste row dient altijd uit gelijke kolommen opgebouwd te worden.
Bekijk onderstaande voorbeelden voor een uitwerking van deze principes binnen de library.
Media queries
We gebruiken de volgende media queries in onze Sass bestanden om de basis breekpunten in het grid systeem te definieren.
/* Extra kleine devices (telefoons, minder dan 768px) */
/* Geen media query omdat er vanuit mobile first gewerkt wordt in de UX Library. */
/* Kleine devices (tablets, 768px en hoger) */
@media (min-width:
@screen-sm-min) {
... }
/* Medium devices (desktops, 992px en hoger) */
@media (min-width:
@screen-md-min) {
... }
/* Grote devices (grote desktops, 1200px en hoger) */
@media (min-width: @screen-lg-min) { ... }
Het is mogelijk om de media queries uit te breiden met een max-width
om een specifiekere range aan
devices te bedienen met bepaalde CSS regels.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
grid opties
In onderstaande tabel is goed te zien hoe het grid systeem zich gedraagt op verschillende devices.
De .col-xxl-
classes zijn alleen voor medewerkersschermen en kunnen geactiveerd worden
door de class .theme--xxl-breakpoint
op de body te zetten.
Extra kleine devices Telefoons (<768px) | Kleine devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Grote devices Desktops (≥1200px) |
Extra grote devices Desktops (≥1800px) |
|
---|---|---|---|---|---|
grid gedrag | Altijd horizontaal | Uitgeklapt tot aan begin, horizontaal boven breekpunten | |||
Container breedte | Geen (auto) | 750px | 970px | 1200px | 1800px |
Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xxl- |
Aantal kolommen | 12 | ||||
Kolom breedte | Auto | ~62px | ~81px | ~97px | ~147px |
Gutter breedte | 20px (10px aan beide zijden van een column) | ||||
Nestable | |||||
Offsets | |||||
Column ordering |
Voorbeeld: gestapeld-tot-horizontaal
Met enkele .col-md-*
grid classes, kan een basis grid systeem gecreëerd worden die
gestapeld begint op mobile devices en horizontaal eindigt op de desktop. De grid columns moeten
binnen een .row
geplaatst worden.
Voorbeeld: Mobile en desktop
Wil je niet dat columns stapelen op kleinere devices? Gebruik de extra small en medium device grid classes door .col-xs-*
.col-md-*
toe te voegen aan je columns. Zie onderstaand voorbeeld voor een uitwerking van deze regels.
Voorbeeld: Mobile, tablet, desktop
Gebasseerd op het vorige voorbeeld kunnen meer dynamische en krachtige layouts gemaakt worden met de toevoeging van de .col-sm-*
classes voor tablets.
Voorbeeld: Column wrapping
Wanneer er meer dan 12 columns binnen een enkele row geplaatst worden, zal elke extra groep columns, als één onderdeel op een nieuwe regel vallen.
Omdat 9 + 4 = 13 > 12, valt deze 4-column-brede div op een nieuwe regel als een aaneensluitend element.
Opeenvolgende columns komen tegen het vorige element op de nieuwe regel.
Offsetting columns
Verplaats columns naar rechts door middel van de .col-md-offset-*
classes. Deze classes zorgen voor een toename in de linker margin van *
columns. Bijvoorbeeld, .col-md-offset-4
verplaatst .col-md-4
vier columns naar rechts.
Column sortering
Door middel van de .col-md-push-*
en
.col-md-pull-*
modifier classes kan eenvoudig de volgorde
van bestaande Grid columns worden aangepast. col-md-push-xx
duwt een element xx kolommen naar rechts. col-md-pull-xx
trekt een element xx kolommen naar links.
Let op: de elementen
'floaten' en kunnen elkaar dan overlappen.
Mobile: modal colums
Met de .col-sm-modal
modifier kan een kolom op kleine schermen
verborgen worden, en met een knop als modal getoond worden. (Maak het scherm
smaller om de werking te zien).
Geen gutters
Soms is het nodig dat kolommen direct op elkaar aansluiten, in dat geval
kunt je de modifier .row--no-gutter
toepassen.
Stippellijnen
Met de modifier .col-{screensize}-up--dotted
kan er een stippellijn tussen kolommen worden toegevoegd.
In het onderstaande voorbeeld wordt er een stippellijn toegevoegd op alle schermen, behalve mobiel (xs).
Benodigde stylesheets
/uno/components/modal/modal.css
/uno/components/table/table.css