Содержание:
В этой статье мы расскажем о панелях Bootstrap. Компоненты панели используются, когда вы хотите поместить свой компонент DOM в коробку. Чтобы получить базовую панель, просто добавьте класс .panel в элемент div. Также добавьте класс .panel-default к этому элементу, как показано в следующем примере -
<div class = "panel panel-default">
<div class = "panel-body">
This is a Basic panel
</div>
</div>
Панель с заголовком
Есть два способа добавить заголовок панели -
- Используйте
.panel-headingкласс, чтобы легко добавить в контейнер заголовк к панели. - Используйте любой
h1 - h6с классом.panel-title, чтобы добавить заголовок с предварительным стилем.
Следующий пример демонстрирует как способы,
<div class = "panel panel-default">
<div class = "panel-heading">
Panel heading without title
</div>
<div class = "panel-body">
Panel content
</div>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">
<h3 class = "panel-title">
Panel With title
</h3>
</div>
<div class = "panel-body">
Panel content
</div>
</div>
Панель с нижним колонтитулом
Вы можете добавлять нижние колонтитулы к панелям, обертывая кнопки или вторичный текст в классе div, содержащем класс .panel-footer. Следующий пример демонстрирует это.
<div class = "panel panel-default">
<div class = "panel-body">
This is a Basic panel
</div>
<div class = "panel-footer">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">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-success">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-info">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-warning">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-danger">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>Панель с таблицами
Чтобы получить таблицу без границ в панели, используйте класс .table внутри панели. Предположим, что существует div содержащий .panel-body, мы добавляем дополнительную границу в верхнюю часть таблицы для разделения. Если нет div, содержащего .panel-body, то компонент перемещается из заголовка панели в таблицу без перерыва.
Следующий пример демонстрирует это -
<div class = "panel panel-default">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
<table class = "table">
<tr>
<th>Product</th>
<th>Price </th>
</tr>
<tr>
<td>Product A</td>
<td>200</td>
</tr>
<tr>
<td>Product B</td>
<td>400</td>
</tr>
</table>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">Panel Heading</div>
<table class = "table">
<tr>
<th>Product</th>
<th>Price </th>
</tr>
<tr>
<td>Product A</td>
<td>200</td>
</tr>
<tr>
<td>Product B</td>
<td>400</td>
</tr>
</table>
</div>
Панель со списками
Вы можете включать группы списков в любую панель. Создайте панель, добавив класс .panel в элемент div. Также добавьте класс .panel-default к этому элементу. Теперь в эту панель входят ваши группы списков. Вы можете научиться создавать группу списков из разделов Список групп.
<div class = "panel panel-default">
<div class ="panel-heading">Panel heading</div>
<div class = "panel-body">
<p>This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content.</p>
</div>
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">24*7 support</li>
<li class = "list-group-item">Renewal cost per year</li>
</ul>
</div>
