Компоненты

Десятки полезных компонентов встроены в Bootstrap такие как навигация, сообщения, инфоблоки и т.д.

Группы кнопок

Применяются для объединения различных по назначению кнопок в единый элемент. Возможно построение из элементов <a> или <button>.

Как использовать?

Примеры и идеи для использования:

  • Используйте одинаковые элементы для создания группы кнопок, <a> или <button>.
  • Не используйте разные по цвету кнопки.
  • Используйте кнопки в дополнение к тексту или вместо текста, не забудьте добавлять alt и title атрибуты при необходимости.

Дополнение Группы кнопок с выпадающим списком (см. ниже) включают в себя отдельный блок вызываемый при нажатии.

Пример

В этом примере обычный HTML со стандартной кнопкой обозначенной только тегом button:

<div class="btn-group">
  <button class="btn">Лево</button>
  <button class="btn">Середина</button>
  <button class="btn">Право</button>
</div>

Пример объединенных групп кнопок

Комбинируйте группы кнопок <div class="btn-group"> при помощи <div class="btn-toolbar"> для отображения в строку.

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

Кнопки как checkbox или radio

Группы кнопок могут иметь функционал радио-кнопок, когда только одна кнопка может быть активирована, или как флажок, когда ряд кнопок может быть активирован. Ознакомьтесь с Javascript плагином управляющим этим действием.

Ознакомиться с Javascript »

Выпадающие списки в группах кнопок

Внимание! Кнопки с выпадающими списками должны быть помещены в индивидуальный родительский элемент .btn-group и включать .btn-toolbar для корректного отображения.

Кнопка-список

Объяснение примера

Так же как в группах кнопок, мы используем стандартную разметку для кнопок, но с использованием jQuery плагина от Bootstrap для имитации выпадающего списка.

<div class="btn-group">
  <button class="btn dropdown-toggle" data-toggle="dropdown">Действие <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Еще и еще</a></li>
    <li class="divider"></li>
    <li><a href="#">Отделенный пункт</a></li>
  </ul>
</div>

Работает со всеми размерами

Выпадающий список работает с кнопками любого размера. Изменяйте размер кнопок при помощи классов .btn-large, .btn-small, или .btn-mini.

Требования к javascript

Выпадающие списки требуют Bootstrap dropdown плагина.

Иногда—на мобильных устройствах—выпадающие списки могут вылезать за пределы body. Вам необходимо решать эту проблему самостоятельно используя дополнительную разметку или javascript.


Кнопка + Кнопка-список

Пример и описание

Используя стили и разметку группы кнопок, мы можем разделить кнопку с кнопкой-списком. По умолчанию кнопка-список будет добавлена справа по отношению к основной кнопке.

Объяснение примера

В данном примере мы просто дополнили обычную кнопку второй кнопкой отвечающей за вызов выпадающего списка.

<div class="btn-group">
  <button class="btn">Действие</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Еще и еще</a></li>
    <li class="divider"></li>
    <li><a href="#">Отделенный пункт</a></li>
  </ul>
</div>

Размеры

Используйте классы размеров кнопок .btn-mini, .btn-small или .btn-large.

<div class="btn-group">
  <button class="btn btn-large">.large кнопка</button>
  <button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  <ul class="dropdown-menu pull-right">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Еще и еще</a></li>
    <li class="divider"></li>
    <li><a href="#">Отделенный пункт</a></li>
  </ul>
</div>

Выпадающие вверх

Выпадающие вверх списки могут созданы путем добавления класса .dropup к родительскому элементу .btn-group. Наример class="btn-group dropup". Это изменит отображение элемента .caret и изменит направление выпадающего списка вверх.

<div class="btn-group dropup">
  <button class="btn primary">Вверх по правому краю</button>
  <button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  <ul class="dropdown-menu pull-right">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Еще и еще</a></li>
    <li class="divider"></li>
    <li><a href="#">Отделенный пункт</a></li>
  </ul>
</div>

Когда использовать?

Навигация по нумерованным страницам отлично подходит для результатов поиска или приложения богатого контентом. Крупный блок невозможно не заметить, легко настраиваемый и отлично впишется в Ваш дизайн.

Состояние ссылок

Состояния ссылок легко настраиваются при помощи классов .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>

Выравнивание элемента

Вы так же можете выранять элементы по краям блока:

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; Назад</a>
  </li>
  <li class="next">
    <a href="#">Вперед &rarr;</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>

Hero! элемент

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.

    Подробнее Поделиться

Зачем использовать?

Миниатюры отлично подходят для видео или картинок, результат поиска по картинкам, маркетинговых целей, портфолио. Миниатюры могут быть представлены как ссылка или статичный контент.

HTML-разметка

Миниатюры представлены в виде списка— 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>

Размеры

Мы преминили разные размеры миниатюр в пределах одного ul списка. Как Вы видите миниатюры располагаются таким образом чтобы максимально заполнить родительский элемент.

Основной класс

В Bootstrap 2 для сообщений используется класс .alert. Внутри тела сообщения тег <p> не является обязательным, текст сообщения можно просто поместить в <div>.

Простые сообщения

Для простого сообщения содержащего большее количество текста мы предлагаем использовать элемент с классом .alert-block.


Поставляется с javascript

В Bootstrap входит jQuery плагин который поддерживает сообщения и позволяет скрывать из в один клик.

Ознакомиться с плагином »

Пример

Поместите сообщение и дополнительную кнопку скрытия в div элемент с классом alert.

Предупреждение! Nulla vitae elit libero, a pharetra augue.
<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

Используйте класс .well для создания просто эффекта впуклости элемента.

Смотрите, я впуклый well!
<div class="well">
  ...
</div>

Иконка скрытия

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

<button class="close">&times;</button>

iOS-устройства требуют использование атрибута href="#" для вызова событий, см. пример ниже.

<a class="close" href="#">&times;</a>