Пример

Выпадающее, контекстное меню для отображения списков ссылок. Сделано интерактивным с помощью плагина JavaScript для выпадающих меню.

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

Разметка

Рассмотрим только выпадающее меню, вот необходимая HTML. Вам нужно обернуть триггер и выпадающее меню в .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>

Отключенные опции меню

Добавьте .disabled к <li> в выпадающем меню, чтобы отключить ссылку.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Обычная ссылка</a></li>
  <li class="disabled"><a tabindex="-1" href="#">Отключенная ссылка</a></li>
  <li><a tabindex="-1" href="#">Другая ссылка</a></li>
</ul>

Подменю на выпадающих меню

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

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">Больше опций</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

Примеры

Две основные опции, а также две более специфические вариации.

Одна группа кнопок

Оберните серию кнопок с .btn в .btn-group.

<div class="btn-group">
  <button class="btn">Left</button>
  <button class="btn">Middle</button>
  <button class="btn">Right</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>

Варианты с чекбоксами и радиокнопками

Группы кнопок также могут функционировать как радиокнопки, где может быть активна только одна кнопка, или как чекбоксы, где может быть активна любая кнопка. См. документацию по JavaScript для этого.

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

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

Обзор и примеры

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

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Работает с любыми размерами кнопок

Выпадающие меню работают на любом размере: .btn-large, .btn-small, или .btn-mini.

Требуется JavaScript

Выпадающие меню требуют плагина Bootstrap для выпадающих меню для работы.

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

Выпадающие меню

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

<div class="btn-group">
  <button class="btn">Action</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">Action</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>

Выпадающие меню

Меню выпадающих меню также можно переключать снизу вверх, добавив один класс к родительскому элементу .dropdown-menu. Это изменит направление .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>

Легкие дефолты Тот же синтаксис, разные классы

Все компоненты навигации здесь—вкладки, табы и списки—делят один базовый синтаксис и стили через .nav класс.

Базовые вкладки

Возьмите обычный <ul> ссылок и добавьте .nav-tabs:

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

Базовые табы

Возьмите тот же HTML, но используйте .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="#">Home</a></li>
  ...
</ul>

Выравнивание компонентов

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

Настраиваемые

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

Настроенные вкладки

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

Настроенные табы

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

Выпадающие меню

Добавьте выпадающие меню с небольшим дополнительным HTML и плагином JavaScript для выпадающих меню.

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

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

Списки навигации

С простым дополнительным HTML вы можете использовать медиа внутри списка (полезно для потоков комментариев или списков статей).

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

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

<ul class="nav nav-list">
  <li class="nav-header">List header</li>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  ...
</ul>

Note Для вложенности в списке навигации включите class="nav nav-list" на любом вложенном <ul>.

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

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

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

Таббируемая навигация

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

Пример таббируемой навигации

Чтобы сделать вкладки таббируемыми, создайте .tab-pane с уникальным ID для каждой вкладки и заключите их в .tab-content.

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

Вкладки с затуханием

Чтобы сделать вкладки затухающими, добавьте .fade к каждому .tab-pane.

Требуется плагин jQuery

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

Таббируемая в любом направлении

Вкладки внизу

Переверните порядок HTML и добавьте класс, чтобы поставить вкладки внизу.

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

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

Поменяйте класс, чтобы поставить вкладки слева.

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

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

Поменяйте класс, чтобы поставить вкладки справа.

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

Базовый навигационный бар

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

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

Компоненты навигационного бара

Бренд

Простая ссылка, чтобы показать название вашего проекта или имени только требуется тег <a>.

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

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

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

<ul class="nav">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

Вы можете легко добавить разделители между вашими навигационными ссылками, добавив пустой элемент списка и простой класс. Просто добавьте это между ссылками:

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

Формы

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

<form class="navbar-form pull-left">
  <input type="text" class="span2">
  <button type="submit" class="btn">Submit</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 в указанном направлении.

Использование выпадающих меню

Добавьте выпадающие меню и выпадающие меню в навигацию с помощью небольшого HTML и плагина 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>

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

Текст

Оберните строки текста в элемент с .navbar-text, обычно на теге <p> для правильного лидирования и цвета.

Необязательные вариации отображения

Исправьте навигационный бар, чтобы он был прикреплен к верхней или нижней части видимой области с помощью дополнительного класса на внешнем .navbar.

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

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

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

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

Добавьте .navbar-fixed-bottom вместо.

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

Статичный верхний навигационный бар

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

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

Отзывчивый навигационный бар

Чтобы реализовать схлопывающийся отзывчивый навигационный бар, оберните содержимое навигационного бара в содержащий элемент, .nav-collapse.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 collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>

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

Инвертированный вариант

Измените внешний вид навигационного бара, добавив .navbar-inverse.

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

Примеры

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

<ul class="breadcrumb">
  <li><a href="#">Home</a> <span class="divider">/</span></li>
  <li><a href="#">Library</a> <span class="divider">/</span></li>
  <li class="active">Data</li>
</ul>

Стандартная пагинация

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

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

Опции

Состояния отключенных и активных элементов

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

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

Вы можете по желанию заменить активные или отключенные ссылки на элементы <span>, чтобы не терять возможность кликать, сохраняя при этом стили.

<div class="pagination">
  <ul>
    <li class="disabled"><span>&laquo;</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="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

Выровненные ссылки

Альтернативно, вы можете выровнять каждую ссылку по сторонам:

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; Older</a>
  </li>
  <li class="next">
    <a href="#">Newer &rarr;</a>
  </li>
</ul>

Необязательное состояние отключенности

Ссылки пагинатора также используют общий класс .disabled утилиты.

<ul class="pager">
  <li class="previous disabled">
    <a href="#">&larr; Older</a>
  </li>
  ...
</ul>

Надписи

Значки

Легко сворачиваемые

Для простого использования, надписи и значки просто сократятся (через CSS's :empty селектор) при отсутствии содержимого внутри.

Единичный компонент

Легкий, гибкий компонент для демонстрации ключевого контента на вашем сайте. Он хорошо подходит для маркетинга и сайтов с большим объемом контента.

<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's default small, а также большинство других компонентов (с дополнительными стилями).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Миниатюры по умолчанию

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

Высоко настраиваемые

С небольшим дополнительным HTML можно добавить любые виды HTML-контента, такие как заголовки, абзацы или кнопки в миниатюрах.

Зачем использовать миниатюры

Миниатюры (ранее .media-grid до версии 1.4) отлично подходят для сеток фотографий или видео, результатов поиска изображений, розничных товаров, портфолио и многого другого. Они могут быть ссылками или статическим контентом.

Простая, гибкая разметка

Разметка миниатюр проста—ul с любым количеством li элементов достаточно. Также она очень гибкая, позволяя вам добавить любой тип контента с немного большей разметкой для обертки вашего контента.

Использование классов сетки

Наконец, компонент миниатюр использует существующие классы системы сетки—например, .span2 или .span3—для контроля размеров миниатюр.

Разметка

Как уже упоминалось ранее, необходимая разметка для миниатюр проста и прямая. Вот пример базовой настройки для ссылок на изображениях:

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>
  ...
</ul>

Для пользовательского HTML-контента в миниатюрах разметка изменяется незначительно. Чтобы позволить блочному контенту в любом месте, мы меняем <a> на <div> вот так:

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
      <h3>Надпись миниатюры</h3>
      <p>Подпись миниатюры...</p>
    </div>
  </li>
  ...
</ul>

Другие примеры

Исследуйте все свои варианты с различными классами сетки, доступными вам. Вы также можете смешивать и сочетать различные размеры.

По умолчанию

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

<div class="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Warning!</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>

Закрытие алертов через JavaScript

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

Опции

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

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <h4>Warning!</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, чтобы анимировать полоски слева направо. Не поддерживается во всех версиях 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 градиенты, переходы и анимации для достижения всех своих эффектов. Эти функции не поддерживаются в IE7-9 или старых версиях Firefox.

Версии, предшествующие Internet Explorer 10 и Opera 12, не поддерживают анимации.

Абстрактные стили объектов для создания различных типов компонентов (например, комментариев блога, Твитов и т.д.) с изображением слева или справа от текстового контента.

Пример по умолчанию

По умолчанию объект медиа позволяет плавать объекту медиа (изображения, видео, аудио) влево или вправо от блока контента.

Heading media

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.

Heading media

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.

Heading media

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">Heading media</h4>
    ...

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

Список медиа

С небольшим дополнительным HTML вы можете использовать медиа внутри списка (полезно для потоков комментариев или списков статей).

<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">Heading media</h4>
      ...

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

Well

Используйте 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>.

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