Пример

Вызываемое, контекстное меню со списком ссылок. Работает совместно с JS-плагином: dropdown javascript plugin.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Действие</a></li>
  <li><a tabindex="-1" href="#">Другое действие</a></li>
  <li><a tabindex="-1" href="#">Еще ссылка</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">Доп. ссылка</a></li>
</ul>

Разметка

Поместите код в элемент с классом .dropdown, или другой элемент со свойством position: relative;. Затем создайте меню.

<div class="dropdown">
  <!-- Link or button to toggle dropdown -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Действие</a></li>
    <li><a tabindex="-1" href="#">Другое действие</a></li>
    <li><a tabindex="-1" href="#">Еще ссылка</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Доп. ссылка</a></li>
  </ul>
</div>

Опции

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

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

Добавьте класс .pull-right к элементу с классом .dropdown-menu для выравнивания меню по правому краю.

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

Вложенный выпадающий список

Добавьте включенный выпадающий под-список, выпадающий при наведении курсора в стиле OS X. Добавьте класс .dropdown-submenu к любому элементу li в уже существующем выпадающем списке.

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

Пример пример редактора

Пример

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

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

Поместите кнопки с классом .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>

Изначальные установки Одинаковая разметка, разные классы

Все навигационные компоненты—вкладки, кнопки и списки—имеют одинаковую HTML-разметку и родительский класс .nav.

Вкладки

Используйте в качестве вкладок <ul> список, и дополнительный класс в родительском элементе .nav-tabs:

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">Главная</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Навигационные кнопки

Используйте HTML-код из предыдущего примера, но вместо класса .nav-tabs используйте .nav-pills:

<ul class="nav nav-pills">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Отключенное состояние

Для любого элемента навигации (вкладки, кнопки или списки), добавьте класс .disabled для изменения стилей - серый шрифт и отсутвие анимации при наведении курсора. Тем не менее ссылки и элементы останутся кликабельными, до тех пор пока Вы не уберете атрибут href. Либо управляя элементами через JavaScript.

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">Главная</a></li>
  ...
</ul>

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

Для выравнивания навигации используйте классы .pull-left или .pull-right. Оба класса добавляют условие CSS float left или right.

Навигационный стек

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

Стек вкладок

<ul class="nav nav-tabs nav-stacked">
  ...
</ul>

Стек кнопок

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Выпадающие списки

Выпадающее меню в Bootstrap вкладках и навигационных кнопках. Незабудте добавить jQuery плагин.

JS-плагин выпадающих списков dropdowns JS-плагин.

Вкладки с выпадающим списком

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Dropdown
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
    </ul>
  </li>
</ul>

Кнопки с выпадающим списком

<ul class="nav nav-pills">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Dropdown
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
    </ul>
  </li>
</ul>

Навигационный список Он же Сайдбар

Навигационный список позволяет создать легкую и удобную в использовании навигацию с дополнительными заголовками. Такой сайдбар используется в Finder в MAC OS X.

Пример навигационного списка

К списку ссылок и добавьте классы - class="nav nav-list":

<ul class="nav nav-list">
  <li class="nav-header">Заголовок</li>
  <li class="active"><a href="#">На главную</a></li>
  <li><a href="#">Библиотека</a></li>
  ...
</ul>

Замечание Для вложения в навигационные списки, применяйте классы class="nav nav-list" только к вложенным элементам - <ul>.

Горизонтальный разделитель

Добавьте горизонтальный разделитель с помощью пустого элемента списка с классом .divider, пример:

<ul class="nav nav-list">
  ...
  <li class="divider"></li>
  ...
</ul>

Вкладки как навигация

Оживим наши вкладки при помощи JS-плагина для простого переключения между контентом. Bootstrap включает в себя четыре стиля расположения вкладок: вверху (по умолчанию), справа, внизу и слева от контента.

Пример вкладок

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Вкладка 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Вкладка 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>Я первая секция.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Привет, я 2-я секция.</p>
    </div>
  </div>
</div>

"Fade in" вкладки

Для плавного переключения между вкладками, добавьте класс .fade к каждому с классом .tab-pane.

jQuery плагин

Все вкладки управляются jQuery плагином. Изучите больше о javascript плагине.

Пример стилей вкладок

Расположение внизу

Переверните представление посетителей Ваших проектов о вкладках. Разместив их снизу.

<div class="tabbable tabs-below">
  <div class="tab-content">
    ...
  </div>
  <ul class="nav nav-tabs">
    ...
  </ul>
</div>

Вкладки слева

Добавьте класс .tabs-left для размещения вкладок слева относительно контента.

<div class="tabbable tabs-left">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

Вкладки справа

Добавьте класс .tabs-right для размещения вкладок справа относительно контента.

<div class="tabbable tabs-right">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

Стандартный Navbar

Для начала создадим статичный navbar (не фиксированный вверху страницы) добавим поддержку для названия проекта и минимальную навигацию. Разместите .container, который установит ширину страницы и контента по умолчанию.

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Имя проекта</a>
    <ul class="nav">
      <li class="active"><a href="#">На главную</a></li>
      <li><a href="#">Ссылка 1</a></li>
      <li><a href="#">Ссылка 2</a></li>
    </ul>
  </div>
</div>

Компоненты в navbar'е

Брендирование

Ссылка в виде Вашего бренда или имени проекта.

<a class="brand" href="#">Project name</a>

Навигационные ссылки

Навигационные ссылки легко добавить через неупорядоченый список.

<ul class="nav">
  <li class="active">
    <a href="#">На главную</a>
  </li>
  <li><a href="#">Ссылка 1</a></li>
  <li><a href="#">Ссылка 2</a></li>
</ul>

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

<ul class="nav">
  ...
  <li class="divider-vertical"></li>
  ...
</ul>

Формы

Для использования форм в Navbar'е, добавьте необходимые классы как в примере ниже. Для создания формы по умолчанию добавьте класс .navbar-form и .pull-left или .pull-right для выравнивания по левому или правому краю.

<form class="navbar-form pull-left">
  <input type="text" class="span2">
  <button type="submit" class="btn">Отправить</button>
</form>

Форма поиска

Для формы поиска добавьте класс .navbar-search к тегу form и класс .search-query к input элементу.

<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Search">
</form>

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

Для выравнивания навигации, формы поиска или текста используйте классы .pull-left и .pull-right. Оба класса добавляют условие CSS float.

Добавление выпадающего меню

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

<ul class="nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Account
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

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

Текст

Поместите строку текста в <.navbar-text>, хорошо если текст будет в параграфе <p>.

Дополнительные варианты расположения

Расположите фиксированный navbar вверху или внизу страницы применяя дополнительные классы к элементу navbar.

Фиксированный вверху страницы

Добавьте класс .navbar-fixed-top имейте ввиду что под фиксированным navbar'ом скрыто минимум 40px вашей страницы - используйте padding для элемента <body> для создания отступа вверху страницы. Добавьте дополнительные CSS-правила после основного Bootstrap CSS-файла, но перед responsive CSS.

<div class="navbar navbar-fixed-top">
  ...
</div>

Фиксированный внизу страницы

Добавьте класс .navbar-fixed-bottom к элементу navbar.

<div class="navbar navbar-fixed-bottom">
  ...
</div>

Статичный расположенный вверху

Создайте статичный navbar расположенный вверху, который будет скроллиться вместе со страницей .navbar-static-top. В отличие от класса .navbar-fixed-top, у вас нет необходимости добавлять отступ (padding) к элементу body.

<div class="navbar navbar-static-top">
  ...
</div>

Динамический Navbar

В зависимости от количества контента, Вы можете задать скрытие некоторых элементов. Для этого, поместите контент в дополнительный div элемент с классом .nav-collapse, и добавьте кнопку с классом .btn-navbar.

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" href="#">Project name</a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>

    </div>
  </div>
</div>

Темная расцветка для navbar'а

Измените внешний вид navbar'а добавив класс .navbar-inverse.

<div class="navbar navbar-inverse">
  ...
</div>

Пример

Пример показывает последовательность перехода по страницам..

<ul class="breadcrumb">
  <li><a href="#">Главная</a> <span class="divider">/</span></li>
  <li><a href="#">Библиотека</a> <span class="divider">/</span></li>
  <li class="active">Данные</li>
</ul>

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

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

Строчные этикетки

Badges

Hero! элемент

Bootstrap поставляется с элементом 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>

Пример

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

Легко изменяемые

При помощи дополнительной разметки можно добавить любой контент к миниатюре, например заголовок, текст, кнопки.

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

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

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.

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

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

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

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

<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

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

<div class="well">
  ...
</div>

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

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

<div class="well well-large">
  ...
</div>

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