Bootstrap- panelen
Panelen
Een paneel in bootstrap is een omzoomde doos met wat opvulling rond de inhoud:
Een basispaneel
Panelen worden gemaakt met de .panelklasse en inhoud in het paneel heeft een
.panel-bodyklasse:
Voorbeeld
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
De .panel-defaultklasse wordt gebruikt om de kleur van het paneel te stylen. Zie het laatste voorbeeld op deze pagina voor meer contextuele lessen.
Paneelkop
Paneelkop
Paneelinhoud
De .panel-headingklasse voegt een kop toe aan het paneel:
Voorbeeld
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
Paneelvoettekst
Paneelinhoud
De .panel-footerklasse voegt een voettekst toe aan het paneel:
Voorbeeld
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
Paneelgroep
Als u veel panelen wilt groeperen, wikkelt u er een <div>met klasse
.panel-groupomheen.
De .panel-groupklasse wist de ondermarge van elk paneel:
Voorbeeld
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
</div>
</div>
Panelen met contextuele klassen
Gebruik contextuele klassen ( .panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, of .panel-danger) om het paneel te kleuren:
Voorbeeld
Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content