Lay-out

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