Panele Bootstrap
Panele
Panel w programie bootstrap to obramowane pudełko z pewnym wypełnieniem wokół jego zawartości:
Panel podstawowy
Panele są tworzone z .panel
klasą, a zawartość wewnątrz panelu ma
.panel-body
klasę:
Przykład
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
Klasa .panel-default
służy do stylizacji koloru panelu. Zobacz ostatni przykład na tej stronie, aby uzyskać więcej klas kontekstowych.
Nagłówek panelu
Nagłówek panelu
Zawartość panelu
Klasa .panel-heading
dodaje nagłówek do panelu:
Przykład
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
Stopka panelu
Zawartość panelu
Klasa .panel-footer
dodaje stopkę do panelu:
Przykład
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
Grupa paneli
Aby zgrupować wiele paneli, owiń je wokół nich <div>
klasą .
.panel-group
Klasa .panel-group
czyści dolny margines każdego panelu:
Przykład
<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 z klasami kontekstowymi
Aby pokolorować panel, użyj klas kontekstowych ( .panel-default
, .panel-primary
, .panel-success
, .panel-info
, .panel-warning
lub .panel-danger
):
Przykład
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