Bootstrap- Panels
Platten
Ein Panel in Bootstrap ist eine umrandete Box mit etwas Polsterung um den Inhalt:
Panels werden mit der .panelKlasse erstellt, und Inhalt innerhalb des Panels hat eine
.panel-bodyKlasse:
Beispiel
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
Die .panel-defaultKlasse wird verwendet, um die Farbe des Panels zu stylen. Weitere kontextbezogene Klassen finden Sie im letzten Beispiel auf dieser Seite.
Panel-Überschrift
Die .panel-headingKlasse fügt dem Panel eine Überschrift hinzu:
Beispiel
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
Panel-Fußzeile
Die .panel-footerKlasse fügt dem Panel eine Fußzeile hinzu:
Beispiel
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
Panel-Gruppe
Um viele Panels zu gruppieren, umschließen Sie sie mit einer <div>with-Klasse
.panel-group.
Die .panel-groupKlasse löscht den unteren Rand jedes Panels:
Beispiel
<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>
Panels mit Kontextklassen
Um das Panel einzufärben, verwenden Sie kontextbezogene Klassen ( .panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, oder .panel-danger):