Что такое текстовые панели?
Панели — это простые блоки, выделяемые на сайте с помощью стилей. Они позволяют задать заголовок и содержимое блока, создавая аккуратный и привлекательный внешний вид.
Создание базовой панели
Для создания панели необходимо прописать основной <div> блок с классами panel и panel-default (тема по умолчанию — серый и белый цвет):
<div class="panel panel-default">
<!-- Содержимое панели -->
</div>Внутри этого блока создадим ещё один <div> для текста:
<div class="panel-body">
<p>Здесь будет некий текст.</p>
</div>Для улучшения внешнего вида добавим отступы:
.panel-body {
padding: 20px;
}Результат: блок с закруглёнными углами и приятным внешним видом.
Добавление заголовка
Для добавления заголовка используем тег <h> (например, <h3>) внутри блока панели, перед panel-body:
<div class="panel panel-default">
<h3>Заголовок</h3>
<div class="panel-body">
<p>Текст панели</p>
</div>
</div>Заголовок будет выделяться цветом и границами.
Подвал панели (Footer)
Помимо заголовка и основной части, можно добавить подвал (footer) с помощью класса panel-footer:
<div class="panel panel-default">
<h3>Заголовок</h3>
<div class="panel-body">
<p>Текст панели</p>
</div>
<div class="panel-footer">Подвал</div>
</div>Подвал визуально отличается от заголовка и основной части, обычно имеет другой цвет.
Дополнительные темы панелей
Помимо темы panel-default, существуют и другие:
- panel-success (для успешных операций) — зелёный цвет.
- panel-info (для информации).
- panel-warning (для предупреждений).
- panel-danger (для ошибок).
Например, панель с темой panel-success:
<div class="panel panel-success">
<h3>Успешно!</h3>
<div class="panel-body">
<p>Операция выполнена успешно.</p>
</div>
</div>Группирование панелей
Для группировки нескольких панелей используется <div> с классом panel-group. Это позволяет уменьшить отступы между панелями, создавая ощущение единого блока.
Пример группировки трёх панелей с разными темами:
<div class="panel-group">
<div class="panel panel-info"></div>
<div class="panel panel-warning"></div>
<div class="panel panel-danger"></div>
</div>В этом уроке мы рассмотрели создание и использование текстовых панелей в Bootstrap. Панели — универсальный инструмент для организации контента на сайте, и их освоение значительно улучшит качество вашей верстки.