Адаптивные панели · Bootstrap 3

Адаптивные панели - Bootstrap 3

Компонент фреймворка bootstrap 3 в виде адаптивных панелей, сделано подробное описание используемым классам для элементов и приведены примеры их реального использования.

Применение панелей bootstrap 3

Адаптивные панели bootstrap 3 созданы для размещения контента и чаще всего используются для создания вида материалов, для них созданы class="" селекторы со своими именами. В каркас панелей можно помещать любые адаптивные элементы дизайна, таких как картинки видео, аудио, таблицы, кнопки и тд..

Базовые классы панелей bootstrap 3

В качестве базового класса применяется class="panel", при использовании стандартной таблицы стилей плагина bootstrap 3, рекомендуется указывать цвет панели, например class="panel panel-default", а также обязательно наличие класса тела панели, в котором будет находиться контент, для него создан class="panel-body".

Содержимое панели

<div class="panel panel-default">
<div class="panel-body">
Содержимое панели
</div>
</div>

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

Для размещения заголовков панели используется class="panel-title", он помещается внутри верхней части панели с class="panel-heading", заголовок можно разместить и в другой части панели, берётся стандартный вариант.

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

Содержимое панели

<article class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Заголовок панели</h2>
</div>
<div class="panel-body">
Содержимое панели
</div>
</article>

Нижняя часть панели

Панель, при необходимости может быть дополнена футером, для добавления нижней части используйте class="panel-footer".

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

Содержимое панели

<article class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Заголовок панели</h2>
</div>
<div class="panel-body">
Содержимое панели
</div>
<div class="panel-footer">
Нижняя часть панели
</div>
</article>

Цвет панели

При использовании стандартного файла стилей фреймворка bootstrap 3 используйте селекторы изменяющие цвета, в примере использованы естественные цвета плагина.

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

Содержимое панели

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

Содержимое панели

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

Содержимое панели

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

Содержимое панели

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

Содержимое панели

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

Содержимое панели

<article class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Заголовок панели</h2>
</div>
<div class="panel-body">
Содержимое панели
</div>
<div class="panel-footer">
Нижняя часть панели
</div>
</article>
<article class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">Заголовок панели</h2>
</div>
<div class="panel-body">
Содержимое панели
</div>
<div class="panel-footer">
Нижняя часть панели
</div>
</article>
<article class="panel panel-success">
<div class="panel-heading">
<h2 class="panel-title">Заголовок панели</h2>
</div>
<div class="panel-body">
Содержимое панели
</div>
<div class="panel-footer">
Нижняя часть панели
</div>
</article>
<article class="panel panel-info">
<div class="panel-heading">
<h2 class="panel-title">Заголовок панели</h2>
</div>
<div class="panel-body">
Содержимое панели
</div>
<div class="panel-footer">
Нижняя часть панели
</div>
</article>
<article class="panel panel-warning">
<div class="panel-heading">
<h2 class="panel-title">Заголовок панели</h2>
</div>
<div class="panel-body">
Содержимое панели
</div>
<div class="panel-footer">
Нижняя часть панели
</div>
</article>
<article class="panel panel-danger">
<div class="panel-heading">
<h2 class="panel-title">Заголовок панели</h2>
</div>
<div class="panel-body">
Содержимое панели
</div>
<div class="panel-footer">
Нижняя часть панели
</div>
</article>

Установка видимости панели и её элементов

Управляйте служебными классами видимости \ скрытости панелей или их отдельных частей для устройств с разным размером.

class="" Устройства (<768px) Устройства (≥768px) Устройства (≥992px) Устройства (≥1200px)
.visible-xs Видно Скрыто Скрыто Скрыто
.visible-sm Скрыто Видно Скрыто Скрыто
.visible-md Скрыто Скрыто Видно Скрыто
.visible-lg Скрыто Скрыто Скрыто Видно
.hidden-xs Скрыто Видно Видно Видно
.hidden-sm Видно Скрыто Видно Видно
.hidden-md Видно Видно Скрыто Видно
.hidden-lg Видно Видно Видно Скрыто

Видимость панели и её элементов для печати

Контролируйте отображение панели для печатающих устройств и браузеров используя классы.

class="" В браузере При печати
.visible-print Скрыто Видно
.hidden-print Видно Скрыто

Пример использования 2 панелей

Для примера продемонстрируем использование двух панелей с содержимым в виде таблицы и списка групп.

Пример 2 панелей

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

Тема 1 Тема 2 Тема 3
Описание темы 1 Описание темы 2 Описание темы 3
Описание темы 1 Описание темы 2 Описание темы 3
Описание темы 1 Описание темы 2 Описание темы 3

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

  • Элемент группы 1
  • Элемент группы 2
  • Элемент группы 3

<section class="col-md-12">
<h1 class="text-center">Пример 2 панелей</h1>
<article class="panel panel-default col-md-6">
<div class="panel-heading">
<h2 class="panel-title">Заголовок панели</h2>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Тема 1</th>
<th>Тема 2</th>
<th>Тема 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Описание темы 1</td>
<td>Описание темы 2</td>
<td>Описание темы 3</td>
</tr>
<tr>
<td>Описание темы 1</td>
<td>Описание темы 2</td>
<td>Описание темы 3</td>
</tr>
<tr>
<td>Описание темы 1</td>
<td>Описание темы 2</td>
<td>Описание темы 3</td>
</tr>
</tbody>
</table>
</div>
</article>
<article class="panel panel-default col-md-6">
<div class="panel-heading">
<h2 class="panel-title">Заголовок панели</h2>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">Элемент группы 1</li>
<li class="list-group-item">Элемент группы 2</li>
<li class="list-group-item">Элемент группы 3</li>
</ul>
</div>
</article>
</section>
Панели bootstrap 3 могут иметь любое содержимое и использоваться в качестве как отдельных элементов так и компонентов других родительских блоков, помещаемый в них контент должен так же обладать адаптивными свойствами.

Испытание панелей

Вы можете самостоятельно провести испытание панелей, а заодно попробовать использовать полученную информацию в реальном применении. Для этого вносите изменения в код, размещённый в редакторе и проверяйте результат нажимая на кнопку выполнения в поле редактора, если Вы не закроете страницу результата, то после очередного изменения и выполнения данные на ней изменятся.


Рейтинг: 5.0/5 из 5



Добавлено Автор Ник Источник Просмотров Комментариев Теги
03-12-2014 Михаил Меренков aTmpl © 1182 0 панели бутстрап 3, panels bootstrap 3