Bootstrap panele
Panele
'n Paneel in bootstrap is 'n omringde boks met 'n bietjie vulling rondom die inhoud:
'n Basiese Paneel
Panele word saam met die .panel
klas geskep, en inhoud binne die paneel het 'n
.panel-body
klas:
Voorbeeld
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
Die .panel-default
klas word gebruik om die kleur van die paneel te stileer. Sien die laaste voorbeeld op hierdie bladsy vir meer kontekstuele klasse.
Paneelopskrif
Paneelopskrif
Paneelinhoud
Die .panel-heading
klas voeg 'n opskrif by die paneel:
Voorbeeld
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
Paneelvoetskrif
Paneelinhoud
Die .panel-footer
klas voeg 'n voetskrif by die paneel:
Voorbeeld
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
Paneelgroep
Om baie panele saam te groepeer, draai 'n <div>
klas
.panel-group
om hulle.
Die .panel-group
klas maak die onderste kantlyn van elke paneel skoon:
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>
Panele met kontekstuele klasse
Om die paneel in te kleur, gebruik kontekstuele klasse ( .panel-default
, .panel-primary
, .panel-success
, .panel-info
, .panel-warning
, of .panel-danger
):
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