Bootstrap — Панели
В этой главе мы поговорим о панелях в Bootstrap. Компоненты панели используются, когда вы хотите, установить компонент DOM в окне. Для того, чтобы получить основную панель, просто добавьте класс .panel к элементу <div>. Кроме того, добавить класс .panel-default для этого элемента, как показано в следующем примере:
<div class = "panel panel-default">
<div class = "panel-body">
Это основная панель
</div>
</div>
Панель с заголовком
Есть два способа добавить панель заголовка:
- Используйте класс .panel-heading чтобы легко добавить контейнер заголовка панели.
- Используйте любой <h1>: <h6> с классом .panel-title, чтобы добавить предварительный стиль заголовка.
Следующий пример демонстрирует:
<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">
<h3 class = "panel-title">
Панель с заголовком
</h3>
</div>
<div class = "panel-body">
Контент панели
</div>
</div>
Панель в подвале
Вы можете добавить колонтитулы к панелям, путем оборачивания кнопки или вторичный текст в <div>, содержащий класс .panel-footer. Следующий пример демонстрирует это:
<div class = "panel panel-default">
<div class = "panel-body">
Это основная панель
</div>
<div class = "panel-footer">панель в подвале</div>
</div>
Панельные колонтитулы не наследуют цвета и границы при использовании контекстных вариантов, поскольку они не предназначены быть на переднем плане.
Панель альтернативного контента
Используйте контекстные состояния классов, такие как, panel-primary, panel-success, panel-info, panel-warning, panel-danger, чтобы сделать панель более значимой для конкретного контекста.
<div class = "panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">Заголовок панели</h3>
</div>
<div class = "panel-body">
Эта основная панель
</div>
</div>
<div class = "panel panel-success">
<div class = "panel-heading">
<h3 class = "panel-title">Заголовок панели</h3>
</div>
<div class = "panel-body">
Это основная панель
</div>
</div>
<div class = "panel panel-info">
<div class = "panel-heading">
<h3 class = "panel-title">Заголовок панели</h3>
</div>
<div class = "panel-body">
Это основная панель
</div>
</div>
<div class = "panel panel-warning">
<div class = "panel-heading">
<h3 class = "panel-title">Заголовок панели</h3>
</div>
<div class = "panel-body">
Это основная панель
</div>
</div>
<div class = "panel panel-danger">
<div class = "panel-heading">
<h3 class = "panel-title">Заголовок панели</h3>
</div>
<div class = "panel-body">
Это основная панель
</div>
</div>
Панель с таблицами
Для того, чтобы получить таблицу без бордюров в панели, используйте класс .table внутри панели. Предположим, что существует <div>, содержащий .panel-body, мы добавим дополнительные границы к верхней части таблицы для разделения. Если нет <div>, содержащего .panel-body, то компонент переходит из панели заголовка к таблице без разрыва.
Следующий пример демонстрирует это:
<div class = "panel panel-default">
<div class = "panel-heading">
<h3 class = "panel-title">Заголовок панели</h3>
</div>
<div class = "panel-body">
Это основная панель
</div>
<table class = "table">
<tr>
<th>Продукт</th>
<th>Цена </th>
</tr>
<tr>
<td>Продукт A</td>
<td>3500</td>
</tr>
<tr>
<td>Продукт B</td>
<td>3200</td>
</tr>
</table>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">Заголовок панели</div>
<table class = "table">
<tr>
<th>Продукт</th>
<th>Цена </th>
</tr>
<tr>
<td>Продукт A</td>
<td>5500</td>
</tr>
<tr>
<td>Продукт B</td>
<td>3500</td>
</tr>
</table>
</div>
Панель групп со списками
Вы можете включать список групп в любой панели. Создается панель путем добавления класса .panel к элементу <div>. Кроме того, добавить класс .panel-default для этого элемента. В настоящее время в этой панели будет включен список ваших группы. Вы можете научиться создавать список группы из главы списки групп.
<div class = "panel panel-default">
<div class ="panel-heading">Панель в заголовке</div>
<div class = "panel-body">
<p>Это контент основной панели. Это контент основной панели.
Это контент основной панели. Это контент основной панели.
Это контент основной панели. Это контент основной панели.
Это контент основной панели.</p>
</div>
<ul class = "list-group">
<li class = "list-group-item">Бесплатная регистрация доменных имен</li>
<li class = "list-group-item">Бесплатное оконное пространство хостинга</li>
<li class = "list-group-item">Количество изображений</li>
<li class = "list-group-item">Поддержка 24*7</li>
<li class = "list-group-item">Стоимость продления в год</li>
</ul>
</div>
Какой-то бред… У меня не работает и всё запутанно рассказано.
Интересней было бы привести пример в стиле ООП
Нормально всё расписано.
В моей компании многие используют эту статью.