JavaScript

Оживите Bootstrap с помощью наших дополнительных плагинов JavaScript, созданных на основе jQuery. Узнайте о каждом подключаемом модуле, наших данных и параметрах программного API и многом другом.

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

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

Если вы используете сборщик (Webpack, Rollup…), вы можете использовать /js/dist/*.jsфайлы, готовые к UMD.

Зависимости

Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины по отдельности, обязательно проверьте наличие этих зависимостей в документации. Также обратите внимание, что все плагины зависят от jQuery (это означает, что jQuery должен быть включен перед файлами плагинов). Проконсультируйтесь с намиpackage.json , чтобы узнать, какие версии jQuery поддерживаются.

Наши раскрывающиеся списки, всплывающие окна и всплывающие подсказки также зависят от Popper.js .

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

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

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

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

В качестве альтернативы, чтобы настроить таргетинг на конкретный плагин, просто включите имя плагина в качестве пространства имен вместе с пространством имен data-api следующим образом:

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

События

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

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

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

Программный 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').

Асинхронные функции и переходы

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

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

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
})

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

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

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

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

$.fn.modal.Constructor.Default.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 jQuery можно получить через VERSIONсвойство конструктора плагина. Например, для плагина всплывающей подсказки:

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

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

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

Утилита

Все файлы JavaScript Bootstrap зависят от util.jsнего, и он должен быть включен вместе с другими файлами JavaScript. Если вы используете скомпилированный (или минимизированный) bootstrap.js, нет необходимости включать это — оно уже есть.

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