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