Обзор

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

Плагины можно включать по отдельности (используя отдельные *.jsфайлы Bootstrap) или все сразу (используя 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 исключительно через JavaScript API. Все общедоступные 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 с другими UI-фреймворками. В этих обстоятельствах иногда могут возникать конфликты пространств имен. Если это произойдет, вы можете вызвать .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)
  }
})

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

Доступ к версии каждого плагина Bootstrap jQuery можно получить через 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 определяет свою семантику, 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">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 в модальном окне, просто вложите .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">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 и HTMLdata-* (возможно, через 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

Примеры

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

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

Внутри таблетки

Применение

С помощью атрибутов данных или 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">
    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 предназначен для автоматического обновления целей навигации в зависимости от положения прокрутки. Прокрутите область под панелью навигации и посмотрите, как меняется активный класс. Выпадающие подэлементы также будут выделены.

Применение

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

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

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

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

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 вам нужно будет вызвать метод обновления следующим образом:

$('[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') // 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применит стиль вкладки Bootstrap , а добавление классов и применит стиль пилюли .nav-tabsulnavnav-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">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

Активирует элемент вкладки и контейнер содержимого. Вкладка должна иметь либо a, data-targetлибо hrefцелевой узел контейнера в DOM. В приведенных выше примерах вкладки — это <a>s с 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 для анимации и атрибуты данных для локального хранения заголовков.

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

Примеры

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

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

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

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

<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()
})

Примеры

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

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

Живая демонстрация

<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и перед ней не должно быть текстового содержимого в разметке.

Применение

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

Эта функция устарела, начиная с версии 3.3.5, и была удалена в версии 4.

<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скрывает содержимое
• .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-bodys на .list-groups.

Применение

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

• .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произойдет событие).

События

Класс коллапса 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.

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

<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

Пример

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

Применение

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

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

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

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

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

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

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

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

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

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

Через JavaScript

Вызов плагина аффикса через 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')

События

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