Обзор

Индивидуально или скомпилированно

Плагины могут быть включены индивидуально (используя Bootstrap's отдельные *.js файлы), или все сразу (используя bootstrap.js или сжатый bootstrap.min.js).

Атрибуты данных

Вы можете использовать все плагины Bootstrap исключительно через API разметки без написания даже одной строки JavaScript. Это первый класс API Bootstrap и должен быть вашим первым соображением при использовании плагина.

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

$(document).off('.data-api')

Альтернативно, чтобы выбрать конкретный плагин, просто включите имя плагина в пространство имен вместе с пространством имен data-api, как это:

$(document).off('.alert.data-api')

Программный API

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

$('.btn.danger').button('toggle').addClass('fat')

Все методы должны принимать необязательный объект опций, строку, которая указывает на конкретный метод, или ничего (что инициирует плагин с поведением по умолчанию):

$('#myModal').modal()                      // инициализируется с дефолтами
$('#myModal').modal({ keyboard: false })   // инициализируется без клавиатуры
$('#myModal').modal('show')                // инициализирует и вызывает show сразу

Каждый плагин также экспортирует свой сырой конструктор на свойство Constructor: $.fn.popover.Constructor. Если вы хотите получить конкретный экземпляр плагина, получите его напрямую из элемента: $('[rel="popover"]').data('popover').

Настройки по умолчанию

Вы можете изменить настройки по умолчанию для плагина, модифицируя объект Constructor.DEFAULTS плагина:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // изменяет дефолт для опции `keyboard` плагина модального окна на false

Без конфликтов

Иногда может потребоваться использовать плагины Bootstrap с другими UI-фреймворками. В таких случаях могут возникнуть конфликты имен. Если это произойдет, вы можете вызвать .noConflict на плагине, который вы хотите отменить значение.

var bootstrapButton = $.fn.button.noConflict() // возвращает $.fn.button к предыдущему назначенному значению
$.fn.bootstrapBtn = bootstrapButton            // дает $().bootstrapBtn функциональность Bootstrap

События

Bootstrap предоставляет пользовательские события для уникальных действий большинства плагинов. Обычно это происходит в форме бесконечного и прошедшего времени - где бесконечное (например, show) срабатывает в начале события, а его прошедшее время (например, shown) срабатывает при завершении действия.

Начиная с 3.0.0, все события Bootstrap имеют пространство имен.

Все бесконечные события предоставляют функциональность preventDefault. Это обеспечивает возможность остановить выполнение действия перед его началом.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // останавливает модальное окно от показа
})

Номера версий

Версия каждого из jQuery-плагинов Bootstrap Bootstrap может быть получена через свойство VERSION конструктора плагина. Например, для плагина подсказки:

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

Без специальных отступлений при отключенном JavaScript

Плагины Bootstrap не падают особенно хорошо, когда JavaScript отключен. Если вы заботитесь о пользовательском опыте в этом случае, используйте <noscript>, чтобы объяснить ситуацию (и как включить JavaScript) вашим пользователям, и/или добавьте собственные пользовательские отступления.

Переходы transition.js

О переходах

Для простых эффектов перехода включите transition.js вместе с другими файлами JS. Если вы используете скомпилированный (или минифицированный) bootstrap.js, вам не нужно включать этот файл—он уже там.

Что внутри

Transition.js является базовым помощником для событий transitionEnd и эмулятором CSS-переходов. Он используется другими плагинами для проверки поддержки CSS-переходов и для перехвата зависших переходов.

Отключение переходов

Переходы можно отключить глобально с помощью следующего фрагмента JavaScript, который должен идти после загрузки transition.js (или bootstrap.js или bootstrap.min.js, в зависимости от случая):

$.support.transition = false

Модальные окна modal.js

Модальные окна — это упрощенные, но гибкие диалоги с минимальной функциональностью и умными дефолтами.

Из-за того, как HTML5 определяет его семантику, атрибут autofocus HTML не оказывает никакого эффекта в модальных окнах Bootstrap. Для достижения того же эффекта используйте некоторый пользовательский JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Примеры

Статический пример

Отображенное модальное окно с заголовком, телом и набором действий в нижней части.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Заголовок модального окна</h4>
      </div>
      <div class="modal-body">
        <p>Одна хорошая тело&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Живой пример

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Запустить демо-модальное окно
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Заголовок модального окна</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div>
  </div>
</div>

Необязательные размеры

Модальные окна имеют два необязательных размера, доступных через модификаторы классов, размещенные на .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Большое модальное окно</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Маленькое модальное окно</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Удаление анимации

Для модальных окон, которые просто появляются, а не плавно появляются, удалите класс .fade из вашей разметки модального окна.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

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

Чтобы воспользоваться системой сетки Bootstrap внутри модального окна, просто вложите .rows внутрь .modal-body и затем используйте обычные классы системы сетки.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Заголовок модального окна</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Уровень 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Уровень 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Уровень 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Изменение содержимого модального окна в зависимости от кнопки-триггера

У вас есть много кнопок, которые все запускают одно и то же модальное окно, но с немного разным содержимым? Используйте event.relatedTarget и HTML data-* атрибуты (возможно, через jQuery) для изменения содержимого модального окна в зависимости от того, какая кнопка была нажата. См. документы по событиям модального окна для деталей по relatedTarget,

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Открыть модальное окно для @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Открыть модальное окно для @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Открыть модальное окно для @getbootstrap</button>
...больше кнопок...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Новое сообщение</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Получатель:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Сообщение:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Отправить сообщение</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('Новое сообщение для ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

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

Плагин модального окна переключает ваше скрытое содержимое по требованию, через атрибуты данных или JavaScript. Он также добавляет .modal-open к <body>, чтобы переопределить поведение прокрутки по умолчанию, и генерирует .modal-backdrop, чтобы предоставить область для закрытия показанных модальных окон при нажатии вне модального окна.

Через атрибуты данных

Активируйте модальное окно без написания JavaScript. Установите data-toggle="modal" на элемент контроллера, например, кнопку, вместе с data-target="#foo" или href="#foo", чтобы указать конкретное модальное окно для переключения.

<button type="button" data-toggle="modal" data-target="#myModal">Запустить модальное окно</button>

Через JavaScript

Вызовите модальное окно с идентификатором myModal с помощью одной строки JavaScript:

$('#myModal').modal(options)

Опции

Опции можно передавать через атрибуты данных или JavaScript. Для атрибутов данных, добавьте имя опции к data-, например, data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">Нажмите на меня</a>

Методы

.modal(options)

Активирует ваше содержимое как модальное окно. Принимает необязательный объект опций.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Вручную переключает модальное окно. Возвращает вызывающему коду до того, как модальное окно фактически показано или скрыто (то есть до события shown.bs.modal или hidden.bs.modal).

$('#myModal').modal('toggle')

.modal('show')

Вручную открывает модальное окно. Возвращает вызывающему коду до того, как модальное окно фактически показано (то есть до события shown.bs.modal).

$('#myModal').modal('show')

.modal('hide')

Вручную скрывает модальное окно. Возвращает вызывающему коду до того, как модальное окно фактически скрыто (то есть до события hidden.bs.modal).

$('#myModal').modal('hide')

.modal('handleUpdate')

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

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

$('#myModal').modal('handleUpdate')

События

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

Все события модального окна срабатывают на самом <div class="modal">.

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Выпадающие списки dropdown.js

Примеры

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

В навигационной панели

В табах

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

Через атрибуты данных или JavaScript, плагин выпадающего списка переключает скрытое содержимое (выпадающие меню) путем переключения класса .open на родительский элемент списка.

На мобильных устройствах, открытие выпадающего меню добавляет .dropdown-backdrop как область нажатия для закрытия выпадающих меню при нажатии вне меню, требование для корректной поддержки iOS. Это означает, что переключение с открытого выпадающего меню на другое требует дополнительного нажатия на мобильном устройстве.

Примечание: Атрибут data-toggle="dropdown" зависит от закрытия выпадающих меню на уровне приложения, поэтому хорошей идеей является всегда использование его.

Через атрибуты данных

Добавьте data-toggle="dropdown" к ссылке или кнопке для переключения выпадающего меню.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Триггер выпадающего списка
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Чтобы сохранить URL с кнопками ссылок, используйте атрибут data-target вместо href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Триггер выпадающего списка
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Через JavaScript

Вызывайте выпадающие списки через JavaScript:

$('.dropdown-toggle').dropdown()

Опции

Отсутствуют

Методы

$().dropdown('toggle')

Переключает выпадающее меню заданной навигационной панели или таббированной навигации.

События

Все события выпадающего списка срабатывают на родительском элементе .dropdown-menu.

Все события выпадающего списка имеют свойство relatedTarget, значением которого является элемент-якорь переключения.

$('#myDropdown').on('show.bs.dropdown', function () {
  // сделайте что-нибудь…
})

Отслеживание прокрутки scrollspy.js

Пример в навигационном меню

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

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

Требуется относительное позиционирование

Независимо от метода реализации, scrollspy требует использования position: relative; на элементе, который вы наблюдаете. В большинстве случаев это <body>. Когда вы наблюдаете за элементами, отличными от <body>, убедитесь, что установлена height и применена overflow-y: scroll;.

Через атрибуты данных

Чтобы легко добавить поведение scrollspy к вашей навигационной панели, добавьте data-spy="scroll" к элементу, который вы хотите наблюдать (наиболее часто это будет <body>). Затем добавьте атрибут data-target со значением ID или класса родительского элемента любого компонента Bootstrap .nav.

 body { position: relative; } 

  <body data-spy="scroll" data-target="#navbar-example">
    ...
    <div id="navbar-example">
      <ul class="nav nav-tabs" role="tablist">
        ...
      </ul>
    </div>
    ...
  </body>
  

Через JavaScript

После добавления position: relative; в ваш CSS, вызовите scrollspy через JavaScript:

 $('body').scrollspy({ target: '#navbar-example' }) 

Методы

.scrollspy('refresh')

Когда вы используете scrollspy в сочетании с добавлением или удалением элементов из DOM, вам может потребоваться вызвать метод refresh следующим образом:

 $('[data-spy="scroll"]').each(function () { var $spy =
  $(this).scrollspy('refresh') }) 

Опции

Опции могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных, добавьте имя опции к data-, например, data-offset="".

События

 $('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something… }) 

Вкладки tab.js

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

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

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

Включите таббируемые вкладки через JavaScript (каждая вкладка должна быть активирована индивидуально):

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Вы можете активировать индивидуальные вкладки несколькими способами:

$('#myTabs a[href="#profile"]').tab('show') // Выберите вкладку по имени
$('#myTabs a:first').tab('show') // Выберите первую вкладку
$('#myTabs a:last').tab('show') // Выберите последнюю вкладку
$('#myTabs li:eq(2) a').tab('show') // Выберите третью вкладку (0-индексированный)

Разметка

Вы можете активировать вкладку или навигацию с вкладками без написания какого-либо JavaScript, просто указав data-toggle="tab" или data-toggle="pill" на элемент. Добавление классов nav и nav-tabs к ul вкладке применит стили Bootstrap вкладки, в то время как добавление классов nav и nav-pills применит стили таблетов.

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Главная</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Профиль</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Сообщения</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Настройки</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Эффект затухания

Чтобы сделать вкладки затухающими, добавьте .fade к каждому .tab-pane. Первая панель вкладки должна также иметь .in, чтобы сделать начальное содержимое видимым.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Методы

$().tab

Активирует элемент вкладки и контейнер содержимого. Вкладка должна иметь либо data-target, либо href, указывающий на узел контейнера в DOM. В приведенных выше примерах вкладки - это <a> с атрибутами data-toggle="tab".

.tab('show')

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

$('#someTab').tab('show')

События

Когда показывается новая вкладка, события происходят в следующем порядке:

1. hide.bs.tab (на текущей активной вкладке)
2. show.bs.tab (на вкладке, которая будет показана)
3. hidden.bs.tab (на предыдущей активной вкладке, той же, что и для события hide.bs.tab)
4. shown.bs.tab (на только что активную вкладку, той же, что и для события show.bs.tab)

Если никакая вкладка не была активна, то события hide.bs.tab и hidden.bs.tab не будут вызываться.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // только что активированная вкладка
  e.relatedTarget // предыдущая активная вкладка
})

Всплывающие подсказки tooltip.js

Вдохновлён отличным плагином jQuery.tipsy, написанным Джейсоном Фреймом; всплывающие подсказки — это обновлённая версия, которая не использует изображения, применяет CSS3 для анимаций и data-атрибуты для локального хранения заголовков.

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

Примеры

Наведите курсор на ссылки ниже, чтобы увидеть всплывающие подсказки:

Статическая подсказка

Доступно четыре варианта: выравнивание сверху, справа, снизу и слева.

Четыре направления

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

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

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

Вызовите подсказку через JavaScript:

$('#example').tooltip(options)

Разметка

Для всплывающей подсказки требуется только data-атрибут и title на HTML-элементе, для которого вы хотите подсказку. Сгенерированная разметка довольно проста, но требует позиции (по умолчанию top).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Опции

Опции можно передавать через data-атрибуты или JavaScript. Для data-атрибутов добавьте имя опции к data-, например data-animation="".

Методы

$().tooltip(options)

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

.tooltip('show')

Показывает подсказку элемента. Возвращает управление до фактического показа подсказки (т.е. до наступления события shown.bs.tooltip). Это считается "ручным" вызовом подсказки. Подсказки с пустым заголовком не отображаются.

$('#element').tooltip('show')

.tooltip('hide')

Скрывает подсказку элемента. Возвращает управление до фактического скрытия подсказки (т.е. до наступления события hidden.bs.tooltip). Это считается "ручным" вызовом подсказки.

$('#element').tooltip('hide')

.tooltip('toggle')

Переключает отображение подсказки элемента. Возвращает управление до фактического показа или скрытия подсказки (т.е. до наступления событий shown.bs.tooltip или hidden.bs.tooltip). Это считается "ручным" вызовом подсказки.

$('#element').tooltip('toggle')

.tooltip('destroy')

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

$('#element').tooltip('destroy')

События

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Добавьте небольшие наложения содержимого, такие как те, что на iPad, к любому элементу для размещения вторичной информации.

Popovers, у которых и заголовок, и содержимое имеют нулевую длину, никогда не отображаются.

$(function () {
  $('[data-toggle="popover"]').popover()
})

Примеры

Статический popover

Доступны четыре опции: сверху, справа, снизу и слева.

Живой пример

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Заголовок popover" data-content="И вот некоторый удивительный контент. Он очень захватывающий. Правильно?">Нажмите для переключения popover</button>

Четыре направления

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover слева
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover сверху
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover снизу
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover справа
</button>

Скрытие при следующем клике

Используйте триггер focus, чтобы скрывать popovers при следующем клике, который пользователь совершит.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Скрываемый popover" data-content="И вот некоторый удивительный контент. Он очень захватывающий. Правильно?">Скрываемый popover</a>

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

Включите popovers через JavaScript:

$('#example').popover(options)

Опции

Опции могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных, добавьте имя опции к data-, как в data-animation="".

Методы

$().popover(options)

Инициализирует popovers для коллекции элементов.

.popover('show')

Показывает popover элемента. Возвращает вызывающему перед тем, как popover фактически покажется (т.е. перед событием shown.bs.popover). Это рассматривается как "ручное" активирование popover. Popovers, у которых и заголовок, и содержимое имеют нулевую длину, никогда не отображаются.

$('#element').popover('show')

.popover('hide')

Скрывает popover элемента. Возвращает вызывающему перед тем, как popover фактически скрывается (т.е. перед событием hidden.bs.popover). Это рассматривается как "ручное" активирование popover.

$('#element').popover('hide')

.popover('toggle')

Переключает popover элемента. Возвращает вызывающему перед тем, как popover фактически покажется или скрывается (т.е. перед событием shown.bs.popover или hidden.bs.popover). Это рассматривается как "ручное" активирование popover.

$('#element').popover('toggle')

.popover('destroy')

Скрывает и уничтожает popover элемента. Popovers, созданные с помощью опции делегирования (selector), не могут быть уничтожены индивидуально на элементах-триггерах-потомках.

$('#element').popover('destroy')

События

$('#myPopover').on('hidden.bs.popover', function () {
  // сделайте что-нибудь…
})

Оповещения alert.js

Примеры оповещений

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

Если используется кнопка .close, она должна быть первым дочерним элементом .alert-dismissible, и перед ней не должно быть текстового содержимого в разметке.

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

Просто добавьте data-dismiss="alert" к вашей кнопке закрытия, чтобы автоматически добавить функционал закрытия оповещения. При закрытии оповещение удаляется из DOM.

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

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

Методы

$().alert()

Заставляет оповещение слушать события клика на дочерних элементах с атрибутом data-dismiss="alert". (Не требуется при использовании автоматической инициализации через data-api.)

$().alert('close')

Закрывает оповещение, удаляя его из DOM. Если у элемента есть классы .fade и .in, оповещение плавно исчезнет перед удалением.

События

Плагин alert в Bootstrap предоставляет несколько событий для подключения к функционалу оповещений.

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Кнопки button.js

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

Состояния

Добавьте data-loading-text="Загрузка...", чтобы использовать состояние загрузки для кнопки.

Эта функция устарела с версии v3.3.5 и удалена в v4.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Одиночное переключение

Добавьте data-toggle="button", чтобы активировать переключение для одной кнопки.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Чекбоксы / Радио

Добавьте data-toggle="buttons" к .btn-group с чекбоксами или радио, чтобы включить переключение в соответствующем стиле.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Методы

$().button('toggle')

Переключает состояние кнопки. Визуально делает кнопку активной.

$().button('reset')

Сбрасывает состояние кнопки — возвращает исходный текст. Этот метод асинхронный и возвращает управление до завершения сброса.

$().button(string)

Меняет текст кнопки на любой определённый в data-* атрибутах.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Сворачивание collapse.js

Гибкий плагин, использующий несколько классов для простого поведения переключения.

Пример

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

• .collapse скрывает содержимое
• .collapsing применяется во время перехода
• .collapse.in показывает содержимое

Вы можете использовать ссылку с атрибутом href или кнопку с атрибутом data-target. В обоих случаях требуется data-toggle="collapse".

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Пример аккордеона

Расширьте стандартное поведение collapse, чтобы создать аккордеон с помощью компонента panel.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Также возможно заменить .panel-body на .list-group.

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

Плагин collapse использует несколько классов для основной работы:

• .collapse скрывает содержимое
• .collapse.in показывает содержимое
• .collapsing добавляется при начале перехода и удаляется после завершения

Эти классы находятся в component-animations.less.

Через data-атрибуты

Просто добавьте data-toggle="collapse" и data-target к элементу, чтобы автоматически управлять сворачиванием. Атрибут data-target принимает CSS-селектор для применения collapse. Для открытия по умолчанию добавьте класс in.

Чтобы добавить аккордеоноподобное поведение, добавьте атрибут data-parent="#selector". Смотрите пример выше.

Через JavaScript

Включите вручную так:

$('.collapse').collapse()

Опции

Опции можно передавать через data-атрибуты или JavaScript. Для data-атрибутов добавьте имя опции к data-, например data-parent="".

Методы

.collapse(options)

Активирует ваш элемент как сворачиваемый. Принимает необязательный объект опций object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Переключает элемент между свернутым и развернутым состоянием. Возвращает управление до фактического завершения перехода (т.е. до событий shown.bs.collapse или hidden.bs.collapse).

.collapse('show')

Показывает сворачиваемый элемент. Возвращает управление до фактического завершения показа (т.е. до события shown.bs.collapse).

.collapse('hide')

Скрывает сворачиваемый элемент. Возвращает управление до фактического завершения скрытия (т.е. до события hidden.bs.collapse).

События

Класс collapse в Bootstrap предоставляет несколько событий для подключения к функционалу сворачивания.

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Карусель carousel.js

Компонент слайд-шоу для прокрутки элементов, как в карусели. Вложенные карусели не поддерживаются.

Примеры

Предыдущий Следующий

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Необязательные подписи

Добавляйте подписи к слайдам с помощью .carousel-caption внутри любого .item. Можно размещать любой HTML — он будет автоматически выровнен и стилизован.

Метка первого слайда

Nulla vitae elit libero, a pharetra augue mollis interdum.

Метка второго слайда

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Метка третьего слайда

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Previous Next

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

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

Несколько каруселей

Для корректной работы управления требуется использовать id на внешнем контейнере (.carousel). При добавлении нескольких каруселей или изменении id не забудьте обновить соответствующие элементы управления.

Через data-атрибуты

Используйте data-атрибуты для управления позицией карусели. data-slide принимает значения prev или next, чтобы изменить позицию относительно текущей. Также можно использовать data-slide-to для передачи индекса слайда data-slide-to="2", который переключает на определённый слайд (нумерация с нуля).

Атрибут data-ride="carousel" используется для автоматического запуска анимации при загрузке страницы. Его нельзя использовать вместе с явной инициализацией карусели через JavaScript.

Через JavaScript

Вызовите карусель вручную так:

$('.carousel').carousel()

Опции

Опции можно передавать через data-атрибуты или JavaScript. Для data-атрибутов добавьте имя опции к data-, например data-interval="".

Методы

.carousel(options)

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

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Прокручивает слайды карусели слева направо.

.carousel('pause')

Останавливает автоматическую прокрутку слайдов.

.carousel(number)

Переходит к определённому слайду (нумерация с нуля, как в массиве).

.carousel('prev')

Переходит к предыдущему слайду.

.carousel('next')

Переходит к следующему слайду.

События

Класс карусели в Bootstrap предоставляет два события для подключения к функционалу карусели.

Оба события имеют дополнительные свойства:

• direction: Направление прокрутки ("left" или "right").
• relatedTarget: DOM-элемент, который становится активным слайдом.

Все события карусели срабатывают на самой карусели (<div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Фиксация affix.js

Пример

Плагин affix переключает position: fixed;, имитируя эффект position: sticky;. Правая боковая навигация — это живая демонстрация работы affix.

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

Используйте плагин affix через data-атрибуты или вручную с помощью собственного JavaScript. В обоих случаях необходимо задать CSS для позиционирования и ширины фиксируемого содержимого.

Примечание: не используйте affix для элементов внутри относительно позиционированных контейнеров, например, сдвинутых колонок, из-за ошибки рендеринга в Safari.

Позиционирование через CSS

Плагин affix переключает три класса, каждый из которых соответствует определённому состоянию: .affix, .affix-top и .affix-bottom. Стили для этих классов (кроме position: fixed; для .affix) вы должны задать самостоятельно для управления позициями.

Вот как работает affix:

1. Сначала плагин добавляет .affix-top, чтобы обозначить верхнее положение элемента. CSS-позиционирование не требуется.
2. При прокрутке мимо элемента, который нужно зафиксировать, происходит фиксация: .affix заменяет .affix-top и устанавливает position: fixed; (это задаётся стилями Bootstrap).
3. Если задан нижний отступ, прокрутка мимо него заменяет .affix на .affix-bottom. Так как отступы необязательны, для их работы нужно прописать соответствующий CSS. В этом случае добавьте position: absolute; при необходимости. Плагин использует data-атрибут или опцию JavaScript для определения позиции элемента.

Следуйте этим шагам для настройки CSS при любом из способов использования ниже.

Через data-атрибуты

Чтобы легко добавить поведение affix к любому элементу, просто добавьте data-spy="affix" к нужному элементу. Используйте отступы для определения момента фиксации.

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

Через JavaScript

Вызовите плагин affix через JavaScript:

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

Опции

Опции можно передавать через data-атрибуты или JavaScript. Для data-атрибутов добавьте имя опции к data-, например data-offset-top="200".

Методы

.affix(options)

Активирует ваш элемент как фиксируемый. Принимает необязательный объект опций object.

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

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

$('#myAffix').affix('checkPosition')

События

Плагин affix в Bootstrap предоставляет несколько событий для подключения к функционалу фиксации.