Десятки полезных компонентов встроены в Bootstrap, такие как навигация, сообщения, инфоблоки и т.д.
Навигация по нумерованным страницам отлично подходит для результатов поиска или приложения богатого контентом. Крупный блок невозможно не заметить, он легко настраиваемый и отлично впишется в Ваш дизайн.
Состояния ссылок легко настраиваются при помощи классов .disabled
Для некликабельного элемента и .active
для текущей страницы.
Используйте два класса для настройки отображения и выравнивания блока навигации: .pagination-centered
и .pagination-right
.
В родительском <div>
элементе нумерация страниц - это просто список <ul>
.
<div class="pagination"> <ul> <li><a href="#">Пред</a></li> <li class="active"> <a href="#">1</a> </li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">След</a></li> </ul> </div>
Простой элемент, позволяющий создать две навигационные кнопки, для перемещения между следующими и предыдущими страницами. Отлично подойдет для блога или журнала.
Постраничная навигация использует класс .disabled
для отключения элемента.
По умолчанию постраничная навигация выравнивается по центру.
<ul class="pager"> <li> <a href="#">Назад</a> </li> <li> <a href="#">Вперед</a> </li> </ul>
Этикетка | Код |
---|---|
По умолчанию |
<span class="label">По умолчанию</span>
|
Успех |
<span class="label label-success">Успех</span>
|
Предупреждение |
<span class="label label-warning">Предупреждение</span>
|
Важно |
<span class="label label-important">Важно</span>
|
Информация |
<span class="label label-info">Информация</span>
|
Темно-серый |
<span class="label label-inverse">Темно-серый</span>
|
Бейдж - это маленький и простой элемент для отображения состояния или счета чего-либо. Данные бейджы могут быть найдены в приложениях например в Mail.app или в мобильных приложениях.
Имя | Пример | Код |
---|---|---|
По умолчанию | 1 |
<span class="badge">1</span>
|
Успех | 2 |
<span class="badge badge-success">2</span>
|
Предупреждение | 4 |
<span class="badge badge-warning">4</span>
|
Важно | 6 |
<span class="badge badge-important">6</span>
|
Информация | 8 |
<span class="badge badge-info">8</span>
|
Темно-серый | 10 |
<span class="badge badge-inverse">10</span>
|
Bootstrap поставляется с элементом Hero!, основное предназначение которого это выделение самой главной и важной информации. Этот элемент подойдет для маркетинговых и других целей.
Поместите текст в div
элемент вот таким образом:
<div class="hero-unit"> <h1>Заголовок</h1> <p>Ключевой текст</p> <p> <a class="btn btn-primary btn-large"> Узнать больше </a> </p> </div>
Это пример Hero! элемента с кнопочкой и каким-либо рекламным текстом здесь в строке для ключевого текста.
Пример использования тега h1
с дополнительным текстом. Просто добавьте в тег h1
тег small
с дополнительным текстом, смотрите пример справа.
<div class="page-header"> <h1>Пример заголовка страницы <small>Дополнительный текст здесь</small></h1> </div>
При помощи дополнительной разметки можно добавить любой контент к миниатюре, например заголовок, текст, кнопки.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Миниатюры отлично подходят для видео или картинок, результат поиска по картинкам, маркетинговых целей, портфолио. Миниатюры могут быть представлены как ссылка или статичный контент.
Миниатюры представлены в виде списка— ul
с любым количеством вложенных li
элементов.
Миниатюры используют классы размеров от сетки шаблона—такие как .span2
или .span3
.
Базовый пример для миниатюр-ссылок:
<ul class="thumbnails"> <li class="span3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/260x180" alt=""> </a> </li> ... </ul>
Другой пример, для статичного контента мы поменяли тег <a>
на <div>
:
<ul class="thumbnails"> <li class="span3"> <div class="thumbnail"> <img src="http://placehold.it/260x180" alt=""> <h5>Заголовок</h5> <p>Описание и текст….</p> </div> </li> ... </ul>
В Bootstrap 2 для сообщений используется класс .alert
. Внутри тела сообщения тег <p>
не является обязательным, текст сообщения можно просто поместить в <div>
.
Для простого сообщения, содержащего большее количество текста, мы предлагаем использовать элемент с классом .alert-block
.
В Bootstrap входит jQuery плагин, который поддерживает сообщения и позволяет скрывать их в один клик.
Поместите сообщение и дополнительную кнопку скрытия в div элемент с классом alert.
<div class="alert"> <button class="close" data-dismiss="alert">×</button> <strong>Предупреждение!</strong> Nulla vitae elit libero, a pharetra augue. </div>
Внимание! iOS-устройства требуют атрибут href="#"
для элемента скрывающего сообщение. не забудьте добавить аттрибут для корректной работы иконки скрытия сообщения. В другом случае Вы можете использовать элемент button
.
Вы можете расширить стандартное сообщение c помощью дополнительныз классов: для больших отступов и читабельного текста используйте .alert-block
. Для заголовка используйте .alert-heading
.
Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div class="alert alert-block"> <a class="close" data-dismiss="alert" href="#">×</a> <h4 class="alert-heading">Предупреждение!</h4> Nulla vitae elit libero, a pharetra augue. Praesent commodo... </div>
<div class="alert alert-error"> ... </div>
<div class="alert alert-success"> ... </div>
<div class="alert alert-info"> ... </div>
Основной индикатор процесса с вертикальным градиентом.
<div class="progress"> <div class="bar" style="width: 60%;"></div> </div>
Используется градиент для создания полосатого эффекта (IE не поддерживается).
<div class="progress progress-striped"> <div class="bar" style="width: 20%;"></div> </div>
Используется полосатый пример и анимируется через CSS (IE не поддерживается).
<div class="progress progress-striped active"> <div class="bar" style="width: 40%;"></div> </div>
Индикаторы процесса используют такие же цвета, как кнопки и сообщения.
Так же как в предыдущем примере, только в полосочку.
Индикатор загрузки использует CSS3 transitions, так что при изменении размера это произойдет плавно, например через javascript.
Если вы используете класс .active
, совместно с .progress-striped
индикатор загрузки будет анимирован слева на право.
Индикатор загрузки для эффектов использует CSS3 gradient, transition, и animation. Эти опции не работают в IE7-9, а так же в старых версиях Firefox.
Opera и IE не поддерживают анимацию на текущий момент.
Используйте класс .well для создания просто эффекта впуклости элемента.
<div class="well"> ... </div>
Используйте для скрытия всплывающих окон и сообщений.
<button class="close">×</button>
iOS-устройства требуют использование атрибута href="#" для вызова событий, см. пример ниже.
<a class="close" href="#">×</a>