Bootstrap Панели
Панели
Панель в Bootstrap представляет собой рамку с некоторой обивкой вокруг ее содержимого:
A Basic Panel
Панели создаются с помощью .panel класса, а содержимое внутри панели имеет .panel-body класс:
Пример
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
.panel-default класс используется для стиля цвета панели. Смотрите последний пример на этой странице для более контекстуальных классов.
Panel Heading
Panel Heading
Panel Content
.panel-heading класс добавляет заголовок на панель:
Пример
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
Нижний колонтитул панели
Panel Content
.panel-footer класс добавляет нижний колонтитул на панель:
Пример
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
Группа панелей
Чтобы сгруппировать много панелей вместе, оберните <div> с классом
.panel-group вокруг них.
.panel-group класс очищает нижний край каждой панели:
Пример
<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>
Панели с контекстными классами
Чтобы раскрасить панель, используйте контекстные классы (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning или .panel-danger):
Пример
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
