Gids

<h1>Stijlgids</h1>

Kopteksten

Voorbeeld tekst

<h2>Voorbeeld tekst</h2>

Kopteksten

Voorbeeld tekst

<h3>Voorbeeld tekst</h3>

Kopteksten

Test link 
<a href="#test">Test link</a>

Paragraaf

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. 
<p>Lorem ipsum dolor sit amet</p>

UL Basic

  • li nummer 1
  • li nummer 2
  • li nummer 3
  • li nummer 4
<ul>
      <li>li nummer 1</li>
      <li>li nummer 2</li>
      <li>li nummer 3</li>
      <li>li nummer 4</li>
    </ul>

UL List-stijling

  • li nummer 1
  • li nummer 2
  • li nummer 3
  • li nummer 4
<ul class="bullet">
      <li>li nummer 1</li>
      <li>li nummer 2</li>
      <li>li nummer 3</li>
      <li>li nummer 4</li>
    </ul>

OL List-stijling

  1. li nummer 1
  2. li nummer 2
  3. li nummer 3
  4. li nummer 4
<ol>
      <li>li nummer 1</li>
      <li>li nummer 2</li>
      <li>li nummer 3</li>
      <li>li nummer 4</li>
    </ol>

UL Basic

  • li nummer 1
  • li nummer 2
  • li nummer 3
    • li nummer 1
    • li nummer 2
    • li nummer 3
    • li nummer 4
  • li nummer 4
<ul>
    <li>li nummer 1</li>
    <li>li nummer 2</li>
    <li>li nummer 3
        <ul>
            <li>li nummer 1</li>
            <li>li nummer 2</li>
            <li>li nummer 3</li>
            <li>li nummer 4</li>
        </ul>
    </li>
    <li>li nummer 4</li>
</ul>

Adressen

Twitter, Inc. 1355 Market Street, Suite 900 San Francisco, CA 94103 P: (123) 456-7890
Full Name first.last@example.com
<address>
      <strong>Twitter, Inc.</strong>
      1355 Market Street, Suite 900
      San Francisco, CA 94103
      <abbr title="Phone">P:</abbr> (123) 456-7890
    </address>

    <address>
      <strong>Full Name</strong>
      <a href="mailto:#">first.last@example.com</a>
    </address>

Descriptions

Bal
Lorem Ipsum Dalechh
Grasveld
Lorem Ipsum Dalechh Lorem
Afrekening
Lorem Ipsum Dalechh Lorem Ipsum
<dl class="dl-horizontal">
      <dt>...</dt>
      <dd>...</dd>
    </dl>

Tekst Helpers

Dit is een tekst helper Muted

Dit is een tekst helper Primary

Dit is een tekst helper Success

Dit is een tekst helper Info

Dit is een tekst helper Warning

Dit is een tekst helper Danger

<p class="text-muted">...</p>
    <p class="text-primary">...</p>
    <p class="text-success">...</p>
    <p class="text-info">...</p>
    <p class="text-warning">...</p>
    <p class="text-danger">...</p>

Tables

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
      ...
    </table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped">
      ...
    </table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered">
      ...
    </table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-hover">
      ...
    </table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-condensed">
      ...
    </table>

Tables Contextual Classes

# First Name Last Name Username
1 Pascal van Gelder Pascal
2 Stanley Man @stan
3 Joep van der Linden @joep
4 Athbi Mohammed @athbi
5 Franklin Burgers @burger 
<tr class="active">...</tr>
    <tr class="success">...</tr>
    <tr class="warning">...</tr>
    <tr class="danger">...</tr>
    <tr class="info">...</tr>

Buttons

<button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    
<button type="button" class="btn btn-primary btn-lg">Large button</button>
    <button type="button" class="btn btn-primary">Default button</button>
    <button type="button" class="btn btn-primary btn-sm">Small button</button>
    <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
    
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
    <button type="button" class="btn btn-default btn-lg active">Button</button>
    
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
    <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Dropdown

<div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

Page Navigation

<nav aria-label="Page navigation">
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>

Jumbotron

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. Learn more 
<div class="jumbotron">
      <h1>Hello, world!</h1>
      <p>...</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>

Modal

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>