Новая финальная версия - Bootstrap 4!

Компоненты

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

Пример

Два основных примера, в двух вариантах для применения.

Одиночная группа кнопок

Поместите кнопки с классом .btn в элемент с классом .btn-group.

<div class="btn-group">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
</div>

Множественные группы кнопок

Объедините группы кнопок <div class="btn-group"> в одном баре <div class="btn-toolbar"> для создания более сложных элементов.

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

Вертикальные группы кнопок

Создавайте группы кнопок расположенные по вертикали.

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

Кнопки с функционалом checkbox или radio

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

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

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

Описание и примеры

Вы можете добавить выпадающее меню к любой кнопке поместив элементы выпадающего списка и меню в элемент с классом .btn-group.

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Кнопка
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </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">
    <!-- dropdown menu links -->
  </ul>
</div>

Размеры

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

<div class="btn-group">
  <button class="btn btn-mini">Кнопка</button>
  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

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

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

<div class="btn-group dropup">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Стандартная нумерация страниц.

<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li><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="#">Next</a></li>
  </ul>
</div>

Дополнения

Неактивные и активные состояния

Используйте класс .disabled для создания некликабельных элементов, и .active для отображения текущего номера страницы.

<div class="pagination">
  <ul>
    <li class="disabled"><a href="#">Prev</a></li>
    <li class="active"><a href="#">1</a></li>
    ...
  </ul>
</div>

Для того что бы убрать элемент a не изменяя внешний вид используйте элемент span.

<div class="pagination">
  <ul>
    <li class="disabled"><span>Prev</span></li>
    <li class="active"><span>1</span></li>
    ...
  </ul>
</div>

Размеры

Подберите размер подходящий именно вашему проекту при помощи следующих классов: .pagination-large, .pagination-small или .pagination-mini.

<div class="pagination pagination-large">
  <ul>
    ...
  </ul>
</div>
<div class="pagination">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-small">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-mini">
  <ul>
    ...
  </ul>
</div>

Выравнивание

Для изменения выравнивания элементов используйте следующие классы: .pagination-centered или .pagination-right.

<div class="pagination pagination-centered">
  ...
</div>
<div class="pagination pagination-right">
  ...
</div>

Постраничная навигация

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

Пример

По умолчанию постраничная навигация выравнивается по центру.

<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>

Неактивное состояние

Вы можете применить стиль неактивного состояние посредством класса .disabled.

<ul class="pager">
  <li class="previous disabled">
    <a href="#">&larr; Назад</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>

Badges

Имя Пример Код
По умолчанию 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!, основное предназначение которого это выделение самой главной и важной информации. Этот элемент подойдет для маркетинговых и других целей.

Да будет мир!

Это пример Hero! элемента с кнопочкой и каким-либо рекламным текстом здесь в строке для ключевого текста.

Узнать больше

<div class="hero-unit">
  <h1>Heading</h1>
  <p>Tagline</p>
  <p>
    <a class="btn btn-primary btn-large">
      Learn more
    </a>
  </p>
</div>

Заголовок страницы

Пример использования тега 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.

    Action Action

  • Заголовок

    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.

    Action Action

  • Заголовок

    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.

    Action Action

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

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

HTML-разметка

Миниатюры представлены в виде списка— ul с любым количеством вложенных li элементов.

Используйте размеры сетки шаблона

Миниатюры используют классы размеров от сетки шаблона—такие как .span2 или .span3.

Markup

Базовый пример для миниатюр-ссылок:

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/300x200" alt="">
    </a>
  </li>
  ...
</ul>

Другой пример, для статичного контента мы поменяли тег <a> на <div>:

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img src="http://placehold.it/300x200" alt="">
      <h3>Заголовок</h3>
      <p>Описание и текст…</p>
    </div>
  </li>
  ...
</ul>

Пример 2

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

Пример

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

Предупреждение! Best check yo self, you're not looking too good.
<div class="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Предупреждение!</strong> Best check yo self, you're not looking too good.
</div>

Кнопка скрытия

В мобильных браузерах Safari и Opera, в дополнение к атрибуту data-dismiss="alert", необходимо добавить href="#" для корректной работы элемента <a>.

<a href="#" class="close" data-dismiss="alert">&times;</a>

В другом случае Вы можете использовать элемент <button> с дата-атрибутом. При использовании элемента <button>, не забывайте включить атрибут type="button", в противном случае это не будет работать.

<button type="button" class="close" data-dismiss="alert">&times;</button>

Кнопка скрытия форсированная через JS

Используйте jQuery-плагин сообщений как альтернативу, для более простого управления кнопкой скрытия сообщений.


Дополнительно

Для крупных сообщений содержащих много текста, используйте класс .alert-block.

Внимание!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <h4>Внимание!</h4>
  Best check yo self, you're not...
</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>

Полосатый

Используется градиент для создания полосатого эффекта (IE7-8 не поддерживается).

<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>

Анимированный

Добавьте класс .active в дополнение к .progress-striped. Используется полосатый пример и анимируется через CSS (во всех версиях IE не поддерживается).

<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

Комбинированный

Поместите множество прогресс-баров в .progress для их комбинации.

<div class="progress">
  <div class="bar bar-success" style="width: 35%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>

Дополнения

Доп. цвета

Прогресс-бар использует одинаковую цветовую палитру с кнопками и сообщениями.

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

Полосатые прогресс-бары

Так же как и в стандартном баре мы имеем версии цветных полосатых прогресс-баров.

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

Поддержка браузерами

Индикатор загрузки для эффектов использует CSS3 gradient, transition, и animation. Эти опции не работают в IE7-9, а так же в старых версиях Firefox.

Версии вышедшие раньше Opera 12 и IE 10 не поддерживают анимацию.

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

Пример

Пример ниже показывает возможное размещение медиа (картинок, видео, аудио) слева или справа относительно текста.

Заголовок

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Медиа-заголовок

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Медиа-заголовок

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Медиа-заголовок</h4>
    ...

    <!-- Nested media object -->
    <div class="media">
      ...
    </div>
  </div>
</div>

Медиа-список

Пример ниже показывает возможность использования медиа компонента в качестве списка (например для комментариев или связанных статей).

  • Медиа-заголовок

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Вложенный Медиа-заголовок

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Вложенный Медиа-заголовок

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Вложенный Медиа-заголовок

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • Медиа-заголовок

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Медиа-заголовок</h4>
      ...

      <!-- Вложенный media object -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

.Well

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

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

Дополнительные классы

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

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

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

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

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

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

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

Полезные классы

Просты в использовании и очень полезные классы.

.pull-left

Перемещение элемента налево

class="pull-left"
.pull-left {
  float: left;
}

.pull-right

Перемещение элемента направо

class="pull-right"
.pull-right {
  float: right;
}

.muted

Изменяет цвет элемента на #999

class="muted"
.muted {
  color: #999;
}

.clearfix

Убирает значение float в любом элементе

class="clearfix"
.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}