Пример

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

<ul class = "dropdown-menu" role = "menu" aria-labeledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Действие </a></li>  
  <li><a tabindex = "-1" href = "#" > Другое действие </a></li>  
  <li><a tabindex = "-1" href = "#" > Здесь что-то еще </a></li>  
  <li класс = "разделитель" ></li> 
  <li><a tabindex = "-1" href = "#" > Отдельная ссылка </a></li>  
</ul>

Разметка

Глядя только на раскрывающееся меню, вот необходимый HTML. Вам нужно обернуть триггер выпадающего списка и выпадающее меню внутри .dropdownили в другой элемент, который объявляет position: relative;. Тогда просто создайте меню.

<div class = "раскрывающийся список" > 
  <!-- Ссылка или кнопка для переключения раскрывающегося списка -->
  <ul class = "dropdown-menu" role = "menu" aria-labeledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Действие </a></li>  
    <li><a tabindex = "-1" href = "#" > Другое действие </a></li>  
    <li><a tabindex = "-1" href = "#" > Здесь что-то еще </a></li>  
    <li класс = "разделитель" ></li> 
    <li><a tabindex = "-1" href = "#" > Отдельная ссылка </a></li>  
  </ul>
</div>

Опции

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

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

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

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

Отключенные пункты меню

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

<ul class = "dropdown-menu" role = "menu" aria-labeledby = "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-labeledby = "dLabel" >   
  ...
  <li class = "выпадающее-подменю" > 
    <a tabindex = "-1" href = "#" > Дополнительные параметры </a>  
    <ul class = "раскрывающееся меню" > 
      ...
    </ul>
  </li>
</ul>

Примеры

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

Группа с одной кнопкой

Оберните ряд кнопок .btnв .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Влево </button> 
  <button class = "btn" > Средний </button> 
  <button class = "btn" > Вправо </button> 
</div>

Несколько групп кнопок

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

<div класс = "кнопка-панель инструментов" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

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

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

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

Чекбокс и радио вкусы

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

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

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

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

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

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Действие
    <span class = "каретка" ></span> 
  </a>
  <ul class = "раскрывающееся меню" > 
    <!-- ссылки в выпадающем меню -->
  </ul>
</div>

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

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

Требуется JavaScript

Для работы раскрывающихся списков кнопок требуется плагин раскрывающегося списка Bootstrap .

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

Раскрывающиеся списки кнопок разделения

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

<div class = "btn-group" > 
  <button class = "btn" > Действие </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "каретка" ></span> 
  </кнопка>
  <ul class = "раскрывающееся меню" > 
    <!-- ссылки в выпадающем меню -->
  </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 = "каретка" ></span> 
  </кнопка>
  <ul class = "раскрывающееся меню" > 
    <!-- ссылки в выпадающем меню -->
  </ul>
</div>

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

Выпадающие меню также можно переключать снизу вверх, добавляя один класс к непосредственному родителю .dropdown-menu. Он изменит направление .caretи переместит само меню так, чтобы оно перемещалось снизу вверх, а не сверху вниз.

<div class = "выпадение группы btn" > 
  <button class = "btn" > Выпадающий список </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "каретка" ></span> 
  </кнопка>
  <ul class = "раскрывающееся меню" > 
    <!-- ссылки в выпадающем меню -->
  </ul>
</div>

Облегченные значения по умолчанию Та же разметка, разные классы

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

Основные вкладки

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

<ul class = "nav nav-tabs" > 
  <li класс = "активный" > 
    <a href = "#" > Главная страница </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Основные таблетки

Возьмите тот же HTML, но .nav-pillsвместо этого используйте:

<ul class = "nav nav-таблетки" > 
  <li класс = "активный" > 
    <a href = "#" > Главная страница </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

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

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

<ul class = "nav nav-таблетки" > 
  ...
  <li class = "disabled" ><a href = "#" > Главная страница </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 класс = "раскрывающийся список" > 
    <a class = "раскрывающийся список" 
       data-toggle = "раскрывающийся список"
       ссылка = "#" >
        Падать
        <b class = "вставка" ></b> 
      </a>
    <ul class = "раскрывающееся меню" > 
      <!-- ссылки -->
    </ul>
  </li>
</ul>

Таблетки с выпадающими списками

<ul class = "nav nav-таблетки" > 
  <li класс = "раскрывающийся список" > 
    <a class = "раскрывающийся список" 
       data-toggle = "раскрывающийся список"
       ссылка = "#" >
        Падать
        <b class = "вставка" ></b> 
      </a>
    <ul class = "раскрывающееся меню" > 
      <!-- ссылки -->
    </ul>
  </li>
</ul>

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

Простой и удобный способ создания групп навигационных ссылок с необязательными заголовками. Их лучше всего использовать на боковых панелях, таких как Finder в 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 класс = "разделитель" ></li> 
  ...
</ul>

Навигация с вкладками

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

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

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

<div class = "tabbable" > <!-- Требуется только для левой/правой вкладок -->  
  <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 класс = "контент вкладки" > 
    <div class = "вкладка активна" id = "tab1" >  
      <p> Я в разделе 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Привет, я в Разделе 2. </p>
    </div>
  </div>
</div>

Исчезать во вкладках

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

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

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

Вкладка в любом направлении

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

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

<div class = "вкладки с вкладками внизу" > 
  <div класс = "контент вкладки" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

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

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

<div class = "вкладки слева" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div класс = "контент вкладки" > 
    ...
  </div>
</div>

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

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

<div class = "вкладки с вкладками справа" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div класс = "контент вкладки" > 
    ...
  </div>
</div>

Базовая панель навигации

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

<div класс = "навигационная панель" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Название </a>  
    <ул класс = "навигация" > 
      <li class = "active" ><a href = "#" > Главная страница </a></li>  
      <li><a href = "#" > Ссылка </a></li> 
      <li><a href = "#" > Ссылка </a></li> 
    </ul>
  </div>
</div>

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

Бренд

Простая ссылка, показывающая название вашего бренда или проекта, требует только тега привязки.

<a class = "бренд" href = "#" >   Название проекта </a>

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

Элементы навигации легко добавлять с помощью неупорядоченных списков.

<ул класс = "навигация" > 
  <li класс = "активный" > 
    <a href = "#" > Главная страница </a> 
  </li>
  <li><a href = "#" > Ссылка </a></li> 
  <li><a href = "#" > Ссылка </a></li> 
</ul>

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

<ул класс = "навигация" > 
  ...
  <li class = "вертикальный разделитель" ></li> 
  ...
</ul>

Формы

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

<form class = "navbar-form pull-left" > 
  < тип ввода = "текст" класс = "span2" >  
  <button type = "submit" class = "btn" > Отправить </button>  
</форма>

Форма поиска

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

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Search" >   
</форма>

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

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

Использование раскрывающихся списков

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

<ул класс = "навигация" > 
  <li класс = "раскрывающийся список" > 
    <a href = "#" класс = "раскрывающийся список" data-toggle = "раскрывающийся список" >   
      Счет
      <b class = "вставка" ></b> 
    </a>
    <ul class = "раскрывающееся меню" > 
      ...
    </ul>
  </li>
</ul>

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

Текст

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

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

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

Исправлено вверху

Добавьте .navbar-fixed-topи не забудьте учесть скрытую область под ним, добавив не менее 40 пикселей 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>

Адаптивная навигация

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

<div класс = "навигационная панель" > 
  <div class = "navbar-inner" > 
    <div класс = "контейнер" > 
 
      <!-- .btn-navbar используется как переключатель для свернутого содержимого панели навигации -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "значок-бар" ></span> 
        <span class = "значок-бар" ></span> 
        <span class = "значок-бар" ></span> 
      </a>
 
      <!-- Убедитесь, что бренд не указан, если вы хотите, чтобы он отображался -->
      <a class = "brand" href = "#" > Название проекта </a>  
 
      <!-- Все, что вы хотите скрыть в разрешении 940 пикселей или меньше, поместите сюда -->
      <div class = "коллапс навигации" > 
        <!-- .nav, .navbar-search, .navbar-form и т. д. -->
      </div>
 
    </div>
  </div>
</div>

Перевернутая вариация

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

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

Примеры

Показан один пример, поскольку он может отображаться на нескольких страницах.

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

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

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

<div класс = "разбивка на страницы" > 
  <ул>
    <li><a href = "#" > Предыдущая </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 = "#" > Далее </a></li> 
  </ul>
</div>

Опции

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

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

<div класс = "разбивка на страницы" > 
  <ул>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

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

<div класс = "разбивка на страницы" > 
  <ул>
    <li class = "отключено" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Размеры

Хотите большую или меньшую нумерацию страниц? Добавьте .pagination-large, .pagination-smallили .pagination-miniдля дополнительных размеров.

<div class = "pagination pagination-large" > 
  <ул>
    ...
  </ul>
</div>
<div класс = "разбивка на страницы" > 
  <ул>
    ...
  </ul>
</div>
<div class = "pagination-small" > 
  <ул>
    ...
  </ul>
</div>
<div class = "pagination-mini" > 
  <ул>
    ...
  </ul>
</div>

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

Добавьте один из двух необязательных классов для изменения выравнивания ссылок на страницы: .pagination-centeredи .pagination-right.

<div class = "разбивка по страницам по центру" > 
  ...
</div>

<div class = "разбивка на страницы справа" > 
  ...
</div>

Пейджер

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

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

По умолчанию пейджер центрирует ссылки.

<ul class = "пейджер" > 
  <li><a href = "#" > Предыдущий </a></li> 
  <li><a href = "#" > Далее </a></li> 
</ul>

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

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

<ul class = "пейджер" > 
  <li класс = "предыдущий" > 
    <a href = "#" > ← Старые </a> 
  </li>
  <li класс = "следующий" > 
    <a href = "#" > Новое → </a> 
  </li>
</ul>

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

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

<ul class = "пейджер" > 
  <li class = "предыдущий отключен" > 
    <a href = "#" > ← Старые </a> 
  </li>
  ...
</ul>

Этикетки

Значки

Легко складывается

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

Герой

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

<div class = "герой-юнит" > 
  <h1> Заголовок </h1>
  <p> Слоган </p>
  <р>
    <a class = "btn btn-primary btn-large" > 
      Учить больше
    </a>
  </p>
</div>

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

Простая оболочка для h1надлежащего размещения и сегментации разделов контента на странице. Он может использовать элемент h1default small, а также большинство других компонентов (с дополнительными стилями).

<div класс = "заголовок страницы" > 
  <h1> Пример заголовка страницы <small> Подтекст для заголовка </small></h1>
</div>

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

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

Широкие возможности настройки

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

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

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

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

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

Использует размеры столбцов сетки

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

Разметка

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

<ul class = "миниатюры" > 
  <li класс = "span4" > 
    <a href = "#" класс = "миниатюра" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "миниатюры" > 
  <li класс = "span4" > 
    <div класс = "миниатюра" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Ярлык миниатюры </h3>
      <p> Заголовок миниатюры... </p>
    </div>
  </li>
  ...
</ul>

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

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

Оповещение по умолчанию

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

<div класс = "предупреждение" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </кнопка>   
  <strong> Внимание! </strong> Лучше проверьте себя, вы не слишком хорошо выглядите.
</div>

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

Браузеры Mobile Safari и Mobile Opera, помимо data-dismiss="alert"атрибута, требуют href="#"для отклонения предупреждений при использовании <a>тега.

<a href = "#" class = "close" data-dismiss = "alert" > × </a>   

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

<button type = "button" class = "close" data-dismiss = "alert" > × </кнопка>   

Отклонить оповещения через JavaScript

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

Опции

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

<div class = "предупреждающий блок-предупреждение" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </кнопка>   
  <h4> Внимание! </h4>
  Лучше проверь себя, ты не...
</div>

Контекстные альтернативы

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

Ошибка или опасность

<div class = "оповещение об ошибке" > 
  ...
</div>

Успех

<div class = "успех предупреждения" > 
  ...
</div>

Информация

<div class = "оповещение о предупреждении-информация" > 
  ...
</div>

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

Базовый

Индикатор выполнения по умолчанию с вертикальным градиентом.

<div класс = "прогресс" > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</div>

Полосатый

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

<div class = "прогресс полосатый прогресс" > 
  <div class = "bar" style = " width : 20 %; " ></div>   
</div>

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

Добавьте .active, чтобы .progress-stripedанимировать полосы справа налево. Доступно не во всех версиях IE.

<div class = "прогресс с чередованием прогресса активен" > 
  <div class = "bar" style = " width : 40 %; " ></div>   
</div>

Сложены

Поместите несколько стержней в одно и то же .progress, чтобы сложить их.

<div класс = "прогресс" > 
  <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 = "информация о прогрессе" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "прогресс прогресс-успех" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "предупреждение о прогрессе" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "прогресс прогресс-опасность" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Полосатые бары

Как и в случае со сплошными цветами, у нас есть различные полосатые индикаторы выполнения.

<div class = "прогресс, информация о прогрессе, полосатый прогресс" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "прогресс прогресс-успех прогресс-полосатый" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "прогресс, предупреждение о прогрессе, полосатый прогресс" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "прогресс прогресс-опасность прогресс-полосатый" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

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

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

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

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

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

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

Заголовок СМИ

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в 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, преддверие в 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, преддверие в vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div класс = "медиа" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "медиа-тело" > 
    <h4 class = "media-heading" > Заголовок мультимедиа </h4> 
    ...
 
    <!-- Вложенный медиа-объект -->
    <div класс = "медиа" > 
      ...
    </div>
  </div>
</div>

Список СМИ

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

<ul class = "медиа-список" > 
  <li класс = "медиа" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "медиа-тело" > 
      <h4 class = "media-heading" > Заголовок мультимедиа </h4> 
      ...
 
      <!-- Вложенный медиа-объект -->
      <div класс = "медиа" > 
        ...
     </div>
    </div>
  </li>
</ul>

Уэллс

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

<div класс = "хорошо" > 
  ...
</div>

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

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

<div class = "хорошо-большой" > 
  ...
</div>

<div class = "ну-ну-маленький" > 
  ...
</div>

Значок закрытия

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

<button class = "закрыть" > × </кнопка> 

Устройствам iOS требуются href="#"события for click, если вы предпочитаете использовать привязку.

<a class = "close" href = "#" > × </a>  

Вспомогательные классы

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

.pull-left

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

класс = "левый"

. тянуть - влево {
  поплавок : слева ;
}

.тянуть вправо

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

класс = "тянуть вправо"

. тянуть - вправо {
  поплавок : справа ;
}

.приглушено

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

класс = "приглушенный"

. отключен {
  цвет : #999; 
}

.clearfix

Очистить floatлюбой элемент

класс = "clearfix"

. яснофикс {
  * масштаб : 1 ; 
  &: перед ,
  &: после {
    дисплей : таблица ;
    содержание : "" ; 
  }
  &: после {
    ясно : оба ;
  }
}