30 Травень 2015
26 211
Рубрика: уроки

Уроки по Bootstrap. Урок №10: текстовые панели

В Bootstrap есть элемент, называемый “панелью” (Bootstrap Panel), это обычный блок с текстом, окружённый бордюром и отступами для удобного выделения этого текста рядом с остальными элементами:

Текстовая панель в Bootstrap

Чтобы создать текстовую панель, добавьте нужному элементу класс .panel, а внутреннему блоку класс .panel-body.

<div class="panel panel-default">
 <div class="panel-body">Текст</div>
</div>

Класс .panel-default используется для стилизации панели. Кроме него есть ещё несколько классов для других цветовых вариантов оформления. Смотрите примеры.

Заголовок панели

Заголовок
Текст

Класс .panel-heading используется, чтобы добавить заголовок к вашей панели:

<div class="panel panel-default">
 <div class="panel-heading">Заголовок</div>
 <div class="panel-body">Текст</div>
</div>

Подвал панели

Текст

Подвал или footer создаётся при помощи класса .panel-footer и служит для оформления блока под содержимым панели:

<div class="panel panel-default">
 <div class="panel-body">Текст</div>
 <div class="panel-footer">Подвал</div>
</div>

Группировка панелей

Несколько панелей могут быть объеденины в одну при помощи класса .panel-group, который нужно присвоить их родительскому элементу.

Заголовок
Текст
Заголовок
Текст
Заголовок
Текст

Использование группировки уменьшает отступы снизу для каждой из панелей:

<div class="panel-group">
 <div class="panel panel-default">
 <div class="panel-heading">Заголовок</div>
 <div class="panel-body">Текст</div>
 </div>
 <div class="panel panel-default">
 <div class="panel-heading">Заголовок</div>
 <div class="panel-body">Текст</div>
 </div>
 <div class="panel panel-default">
 <div class="panel-heading">Заголовок</div>
 <div class="panel-body">Текст</div>
 </div>
</div>

Контекстные классы

Панель с классом panel-default
Текст
Панель с классом panel-primary
Текст
Панель с классом panel-success
Текст
Панель с классом panel-info
Текст
Панель с классом panel-warning
Текст
Панель с классом panel-danger
Текст

Чтобы менять стандартный цвет текстовой панели, вы можете использовать классы .panel-default, .panel-primary, .panel-success, .panel-info,.panel-warning и .panel-danger:

<div class="panel-group">
 <div class="panel panel-default">
 <div class="panel-heading">Панель с классом panel-default</div>
 <div class="panel-body">Текст</div>
 </div>
 <div class="panel panel-primary">
 <div class="panel-heading">Панель с классом panel-primary</div>
 <div class="panel-body">Текст</div>
 </div> 
 <div class="panel panel-success">
 <div class="panel-heading">Панель с классом panel-success</div>
 <div class="panel-body">Текст</div>
 </div>
 <div class="panel panel-info">
 <div class="panel-heading">Панель с классом panel-info</div>
 <div class="panel-body">Текст</div>
 </div>
 <div class="panel panel-warning">
 <div class="panel-heading">Панель с классом panel-warning</div>
 <div class="panel-body">Текст</div>
 </div>
 <div class="panel panel-danger">
 <div class="panel-heading">Панель с классом panel-danger</div>
 <div class="panel-body">Текст</div>
 </div>
</div>
Тепер я хочу бачити коментарі 1