Bootstrap Панели
В этой главе объясняются панели Bootstrap. Компонент панели используется для вставки DOM-компонентов в блок. Чтобы создать базовую панель, просто добавьте класс к элементу <div>.panelи класс.panel-defaultи всё, как показано в примере ниже:
Пример
<div class="panel panel-default">
<div class="panel-body">Это базовая панель</div>
</div>
Попробуйте сами »
Результат следующий:
Заголовок панели
Мы можем добавить заголовки панели двумя способами:
- Используя.panel-heading, класс позволяет легко добавить контейнер заголовка к панели.
- Использование.panel-titleс <h1>-<h6> с классом позволяет добавить заголовок с предопределёнными стилями.
В следующем примере показаны эти два способа:
Пример
<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>, и на этом всё. Следующий пример демонстрирует это:
Пример
<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, мы можем добавить дополнительную границу сверху таблицы, чтобы отделить её. Если нет содержащего.panel-body<div>, тогда компонент будет непрерывно перемещаться от заголовка панели к таблице.
Следующий пример демонстрирует это:
Пример
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Заголовок панели</h3>
</div>
<div class="panel-body">Это базовая панель</div>
<table class="table">
<th>Товар</th><th>Цена</th>
<tr><td>Товар A</td><td>200</td></tr>
<tr><td>Товар B</td><td>400</td></tr>
</table>
</div>
<div class="panel panel-default">
<div class="panel-heading">Заголовок панели</div>
<table class="table">
<th>Товар</th><th>Цена</th>
<tr><td>Товар A</td><td>200</td></tr>
<tr><td>Товар B</td><td>400</td></tr>
</table>
</div>
Попробуйте сами »
Результат следующий:
Панели с группами списков
Мы можем включить группу списков в любую панель, добавив к элементу <div>.panelи.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">Бесплатный хостинг с пространством Window</li>
<li class="list-group-item">Количество изображений</li>
<li class="list-group-item">поддержка 24*7</li>
<li class="list-group-item">Стоимость ежегодного обновления</li>
</ul>
</div>
Попробуйте »
Результаты следующие:
Другие расширения
