Gids
<h1>Stijlgids</h1>
Kopteksten
Voorbeeld tekst
<h2>Voorbeeld tekst</h2>
Kopteksten
Voorbeeld tekst
<h3>Voorbeeld tekst</h3>
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
- li nummer 1
- li nummer 2
- li nummer 3
- 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-7890Full 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 |
<table class="table">
...
</table>
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-striped">
...
</table>
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-bordered">
...
</table>
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-hover">
...
</table>
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<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
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">«</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">»</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">×</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>