JavaScript

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

Обзор

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

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

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

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

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

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

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

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

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

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

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

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

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

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

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

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

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

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

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

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

События

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

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

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

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Средство очистки

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

Значение по умолчанию whiteList следующее:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Если вы хотите добавить новые значения к этому значению по умолчанию whiteList, вы можете сделать следующее:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Если вы хотите обойти наше средство очистки, потому что предпочитаете использовать специализированную библиотеку, например DOMPurify, вы должны сделать следующее:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

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

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

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

Отсутствие специальных решений при отключенном 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 определяет свои семантики, атрибут HTML autofocus не оказывает никакого влияния в модальных окнах 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">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</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">
  Launch demo modal
</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">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</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">Large modal</button>

<div class="modal fade" 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">Small modal</button>

<div class="modal fade" 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 внутри модального окна, просто вложите .row в .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">Modal title</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">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 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">Close</button>
        <button type="button" class="btn btn-primary">Save changes</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">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<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">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</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">Close</button>
        <button type="button" class="btn btn-primary">Send message</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('New message to ' + 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">Launch modal</button>

Через JavaScript

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

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

Параметры

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

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

Методы

.modal(options)

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

$('#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

Примеры

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

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

Открыть пример на getbootstrap.com

В элементах

Открыть пример на getbootstrap.com

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

Плагин выпадающих списков переключает скрытое содержимое (выпадающие списки) путем переключения класса .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">
    Dropdown trigger
    <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">
    Dropdown trigger
    <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 () {
  // do something…
})

ScrollSpy scrollspy.js

Пример в панели навигации

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

Открыть пример на getbootstrap.com

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

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

Независимо от метода реализации 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

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

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

Открыть пример на getbootstrap.com

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

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

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

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

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Разметка

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

<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">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</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 // newly activated tab
  e.relatedTarget // previous active tab
})

Подсказки tooltip.js

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

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

Примеры

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

Открыть пример на getbootstrap.com

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

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

Открыть пример на getbootstrap.com

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

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

Параметры

Параметры можно передать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к 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…
})

Всплывающие окна popover.js

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

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

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

Примеры

Статическое всплывающее окно

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

Открыть пример на getbootstrap.com

Живой пример

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle 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 on left
</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 on top
</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 on bottom
</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 on right
</button>

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

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

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

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

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

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

Параметры

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

Методы

$().popover(options)

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

.popover('show')

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

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

.popover('hide')

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

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

.popover('toggle')

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

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

.popover('destroy')

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

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

События

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

Сообщения об ошибках alert.js

Примеры сообщений об ошибках

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

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

Открыть пример на getbootstrap.com

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

Просто добавьте 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 присутствуют в элементе, сообщение об ошибке будет исчезать с эффектом плавного вывода.

События

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

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

Кнопки button.js

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

Состояния

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

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

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
  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">
  Single toggle
</button>

Флажки/Радиокнопки

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

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

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

Методы

$().button('toggle')

Переключает состояние нажатия. Придает кнопке вид активированного элемента.

$().button('reset')

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

$().button(string)

Заменяет текст на любой определенный текстовый статус.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary">
  ...
</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>

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

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

<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-toggle="collapse" и data-target к элементу, чтобы автоматически назначить управление элементом сворачивания. Атрибут data-target принимает селектор CSS для применения сворачивания. Убедитесь, что к элементу сворачивания добавлен класс collapse. Если вы хотите, чтобы он открывался по умолчанию, добавьте дополнительный класс in.

Чтобы добавить управление группами в стиле аккордеона к элементу управления сворачиванием, добавьте атрибут данных data-parent="#selector". Обратитесь к демонстрации, чтобы увидеть это в действии.

Через JavaScript

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

$('.collapse').collapse()

Параметры

Параметры могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к 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, и он будет автоматически выровнен и отформатирован.

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

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

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

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

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

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

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

Через JavaScript

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

$('.carousel').carousel()

Параметры

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

Методы

.carousel(options)

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

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

.carousel('cycle')

Переключается по элементам карусели слева направо.

.carousel('pause')

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

.carousel(number)

Переключает карусель на определённую рамку (индексируется с 0, аналогично массиву).

.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 с помощью атрибутов данных или вручную с помощью собственного JavaScript. В обоих случаях необходимо предоставить CSS для позиционирования и ширины вашего фиксированного содержимого.

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

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

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

Вот как работает плагин affix:

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

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

С помощью атрибутов данных

Чтобы легко добавить поведение 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))
    }
  }
})

Параметры

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

Методы

.affix(options)

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

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

.affix('checkPosition')

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

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

События

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