Пример

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

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

Разметка

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

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

Опции

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

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

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

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

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

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

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

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

Пример

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<divclass="btn-group">
<aclass="btn dropdown-toggle"data-toggle="dropdown"href="#">
 Кнопка
<spanclass="caret"></span>
</a>
<ulclass="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>

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

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

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

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

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

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

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

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

Размеры

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

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

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

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

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

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

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

Вкладки

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

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

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

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

<ulclass="nav nav-pills">
<liclass="active">
<ahref="#">Home</a>
</li>
<li><ahref="#">...</a></li>
<li><ahref="#">...</a></li>
</ul>

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

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

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

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

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

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

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

Стек вкладок

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

Стек кнопок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

"Fade in" вкладки

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

jQuery плагин

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Формы

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

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

Форма поиска

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

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

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

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

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

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

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

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

Текст

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<divclass="navbar">
<divclass="navbar-inner">
<divclass="container">
 
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<aclass="btn btn-navbar"data-toggle="collapse"data-target=".nav-collapse">
<spanclass="icon-bar"></span>
<spanclass="icon-bar"></span>
<spanclass="icon-bar"></span>
</a>
 
<!-- Be sure to leave the brand out there if you want it shown -->
<aclass="brand"href="#">Project name</a>
 
<!-- Everything you want hidden at 940px or less, place within here -->
<divclass="nav-collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
 
</div>
</div>
</div>

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

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

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

Пример

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

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

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

<divclass="pagination">
<ul>
<li><ahref="#">Prev</a></li>
<li><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
<li><ahref="#">3</a></li>
<li><ahref="#">4</a></li>
<li><ahref="#">Next</a></li>
</ul>
</div>

Дополнения

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

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

<divclass="pagination">
<ul>
<liclass="disabled"><ahref="#">Prev</a></li>
<liclass="active"><ahref="#">1</a></li>
 ...
</ul>
</div>

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

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

Размеры

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

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

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

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

<divclass="pagination pagination-centered">
 ...
</div>

<divclass="pagination pagination-right">
 ...
</div>

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

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

Пример

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

<ulclass="pager">
<li><ahref="#">Назад</a></li>
<li><ahref="#">Вперед</a></li>
</ul>

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

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

<ulclass="pager">
<liclass="previous">
<ahref="#">&larr; Назад</a>
</li>
<liclass="next">
<ahref="#">Вперед &rarr;</a>
</li>
</ul>

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

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

<ulclass="pager">
<liclass="previous disabled">
<ahref="#">&larr; Назад</a>
</li>
 ...
</ul>

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

Badges

Hero! элемент

Bootstrap поставляется с элементом Hero!, основное предназначение которого это выделение самой главной и важной информации. Этот элемент подойдет для маркетинговых и других целей.

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

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

Пример использования тега h1 с дополнительным текстом. Просто добавьте в тег h1 тег small с дополнительным текстом.

<divclass="page-header">
<h1>Заголовок страницы <small>Дополнительный текст здесь</small></h1>
</div>

Пример

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

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

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

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

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

HTML-разметка

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

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

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

Markup

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

<ulclass="thumbnails">
<liclass="span4">
<ahref="#"class="thumbnail">
<imgsrc="http://placehold.it/300x200"alt="">
</a>
</li>
 ...
</ul>

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

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

Пример 2

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

Пример

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

<divclass="alert">
<buttontype="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>.

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

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

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

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

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

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

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

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

Классы сообщений

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

Ошибка

<divclass="alert alert-error">
 ...
</div>

Успех

<divclass="alert alert-success">
 ...
</div>

Информационное сообщение

<divclass="alert alert-info">
 ...
</div>

Пример и разметка

Основной

Основной индикатор процесса с вертикальным градиентом.

<divclass="progress">
<divclass="bar"style="width:60%;"></div>
</div>

Полосатый

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

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

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

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

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

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

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

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

Дополнения

Доп. цвета

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

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

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

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

<divclass="progress progress-info progress-striped">
<divclass="bar"style="width:20%"></div>
</div>
<divclass="progress progress-success progress-striped">
<divclass="bar"style="width:40%"></div>
</div>
<divclass="progress progress-warning progress-striped">
<divclass="bar"style="width:60%"></div>
</div>
<divclass="progress progress-danger progress-striped">
<divclass="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.

<divclass="media">
<aclass="pull-left"href="#">
<imgclass="media-object"data-src="holder.js/64x64">
</a>
<divclass="media-body">
<h4class="media-heading">Медиа-заголовок</h4>
 ...
 
<!-- Nested media object -->
<divclass="media">
 ...
</div>
</div>
</div>

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

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

<ulclass="media-list">
<liclass="media">
<aclass="pull-left"href="#">
<imgclass="media-object"data-src="holder.js/64x64">
</a>
<divclass="media-body">
<h4class="media-heading">Медиа-заголовок</h4>
 ...
 
<!-- Вложенный media object -->
<divclass="media">
 ...
</div>
</div>
</li>
</ul>

.Well

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

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

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

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

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

<divclass="well well-small">
 ...
</div>

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

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

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

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

<aclass="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;
}
}