Voor meer informatie zie Bootstrap Grid system documentatie
<h1>Horizontale layout</h1>
<p>Om structuur en consistentie te creëren wordt voor de horizontale verdeling de 12 columns structuur uit Bootstrap 3 gebruikt.</p>
<p>12 columns</p>
<p>Column width auto</p>
<p>Gutter width 32px (16px on each side of a column)</p>
<h2>Breakpoints</h2>
<dl class="dso-vertical">
<dt>Extra small (mobiele telefoons) smaller than 768px</dt>
<dd>Max container width none (auto)</dd>
<dt>Small (tablets) bigger or equal to 768px</dt>
<dd>Max container width none (auto)</dd>
<dt>Medium (desktops) bigger or equal to 992px</dt>
<dd>Max container width 922px</dd>
<dt>Large (desktops) bigger or equal to 1200px</dt>
<dd>Max container width 1152</dd>
</dl>
<h2>Verticale layout</h2>
<p>Voor de verticale layout en hiërarchie wordt het 8px grid gebruikt. Het 8px grid betekent het volgende: Gebruik increments van 8px om de grootte van en ruimte tussen de elementen te tonen op een pagina. Dus height, width, padding, margin bestaan allemaal uit increments van 8.</p>
<h2>Voorbeeld grid layout</h2>
<section class="grid-example">
<div class="row">
<div class="col-xs-12">
<div class="col">xs-12</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="col">xs-6</div>
</div>
<div class="col-xs-6">
<div class="col">xs-6</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="col">xs-4</div>
</div>
<div class="col-xs-4">
<div class="col">xs-4</div>
</div>
<div class="col-xs-4">
<div class="col">xs-4</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="col">xs-3</div>
</div>
<div class="col-xs-3">
<div class="col">xs-3</div>
</div>
<div class="col-xs-3">
<div class="col">xs-3</div>
</div>
<div class="col-xs-3">
<div class="col">xs-3</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div class="col">xs-12 sm-12 md-10 md-offset-1 lg-8 lg-offset-2</div>
</div>
</div>
</section>
<h1>Horizontale layout</h1>
<p>Om structuur en consistentie te creëren wordt voor de horizontale verdeling de 12 columns structuur uit Bootstrap 3 gebruikt.</p>
<p>12 columns</p>
<p>Column width auto</p>
<p>Gutter width 32px (16px on each side of a column)</p>
<h2>Breakpoints</h2>
<dl class="dso-vertical">
<dt>Extra small (mobiele telefoons) smaller than 768px</dt>
<dd>Max container width none (auto)</dd>
<dt>Small (tablets) bigger or equal to 768px</dt>
<dd>Max container width none (auto)</dd>
<dt>Medium (desktops) bigger or equal to 992px</dt>
<dd>Max container width 922px</dd>
<dt>Large (desktops) bigger or equal to 1200px</dt>
<dd>Max container width 1152</dd>
</dl>
<h2>Verticale layout</h2>
<p>Voor de verticale layout en hiërarchie wordt het 8px grid gebruikt. Het 8px grid betekent het volgende: Gebruik increments van 8px om de grootte van en ruimte tussen de elementen te tonen op een pagina. Dus height, width, padding, margin bestaan allemaal uit increments van 8.</p>
<h2>Voorbeeld grid layout</h2>
<section class="grid-example">
{% for row in rows %}
<div class="row">
{% for column in row.columns %}
<div {{ className(column | prefix('col-') | join(' ')) }}>
<div class="col">{{ column | join(' ') }}</div>
</div>
{% endfor %}
</div>
{% endfor %}
</section>
rows:
- columns:
- - xs-12
- columns:
- - xs-6
- - xs-6
- columns:
- - xs-4
- - xs-4
- - xs-4
- columns:
- - xs-3
- - xs-3
- - xs-3
- - xs-3
- columns:
- - xs-12
- sm-12
- md-10
- md-offset-1
- lg-8
- lg-offset-2