panele
Panel w bootstrap jest ramką pole z jakiegoś obicia wokół jego treści:
Basic panel
Panele są tworzone z .panel klasy i treść wewnątrz panelu ma .panel-body klasę:
Przykład
<div class="panel panel-default">
<div class="panel-body">A Basic
Panel</div>
</div>
Spróbuj sam " .panel-default klasa jest używana do stylu koloru panelu. Zobacz ostatni przykład na tej stronie więcej klas kontekstowych.
Nagłówek panel
Nagłówek panel
panel Content
.panel-heading klasy 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>
Spróbuj sam " Stopka panel
panel Content
.panel-footer Klasa 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>
Spróbuj sam " Grupa panelowa
Do grupy wielu paneli razem, zawinąć <div> z klasą .panel-group wokół nich.
.panel-group klasa czyści dolnym marginesie każdej tablicy:
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>
Spróbuj sam " Panele z klas kontekstowe
Aby pokolorować panel, należy użyć klasy 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
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 »