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
следующим образом:
В качестве альтернативы, чтобы настроить таргетинг на конкретный плагин, просто включите имя плагина в качестве пространства имен вместе с пространством имен data-api следующим образом:
Селекторы
В настоящее время для запроса элементов DOM мы используем нативные методы querySelector
и querySelectorAll
из соображений производительности, поэтому вы должны использовать допустимые селекторы . Если вы используете специальные селекторы, например: collapse:Example
обязательно избегайте их.
События
Bootstrap предоставляет настраиваемые события для уникальных действий большинства плагинов. Как правило, они бывают в форме инфинитива и причастия прошедшего времени, где инфинитив (например show
, ) запускается в начале события, а его форма причастия прошедшего времени (например shown
, ) запускается после завершения действия.
Все инфинитивные события обеспечивают preventDefault()
функциональность. Это дает возможность остановить выполнение действия до его начала. Возврат false из обработчика событий также автоматически вызовет preventDefault()
.
Программный API
Мы также считаем, что вы должны иметь возможность использовать все плагины Bootstrap исключительно через JavaScript API. Все общедоступные API-интерфейсы представляют собой отдельные методы с возможностью цепочки и возвращают коллекцию, над которой действуют.
Все методы должны принимать необязательный объект параметров, строку, предназначенную для определенного метода, или ничего (что запускает плагин с поведением по умолчанию):
Каждый плагин также предоставляет свой необработанный конструктор для Constructor
свойства: $.fn.popover.Constructor
. Если вы хотите получить конкретный экземпляр плагина, извлеките его непосредственно из элемента: $('[rel="popover"]').data('popover')
.
Асинхронные функции и переходы
Все программные методы API являются асинхронными и возвращаются вызывающей стороне после начала перехода, но до его завершения .
Чтобы выполнить действие после завершения перехода, вы можете прослушать соответствующее событие.
Кроме того, вызов метода переходного компонента будет игнорироваться .
Настройки по умолчанию
Вы можете изменить настройки по умолчанию для плагина, изменив Constructor.Default
объект плагина:
Нет конфликта
Иногда необходимо использовать плагины Bootstrap с другими UI-фреймворками. В этих обстоятельствах иногда могут возникать конфликты пространств имен. Если это произойдет, вы можете вызвать .noConflict
плагин, для которого хотите восстановить значение.
Номера версий
Доступ к версии каждого плагина Bootstrap jQuery можно получить через VERSION
свойство конструктора плагина. Например, для плагина всплывающей подсказки:
Никаких специальных запасных вариантов при отключенном JavaScript
Плагины Bootstrap не очень изящно отступают, когда JavaScript отключен. Если вам небезразличен пользовательский интерфейс в этом случае, используйте <noscript>
для объяснения ситуации (и того, как повторно включить JavaScript) своим пользователям и/или добавьте собственные резервные варианты.
Сторонние библиотеки
Bootstrap официально не поддерживает сторонние библиотеки JavaScript , такие как Prototype или jQuery UI. Несмотря на .noConflict
события, связанные с пространством имен, могут возникнуть проблемы совместимости, которые вам необходимо исправить самостоятельно.
Утилита
Все файлы JavaScript Bootstrap зависят от util.js
него, и он должен быть включен вместе с другими файлами JavaScript. Если вы используете скомпилированный (или минимизированный) bootstrap.js
, нет необходимости включать это — оно уже есть.
util.js
включает служебные функции и базовый помощник для transitionEnd
событий, а также эмулятор перехода CSS. Он используется другими подключаемыми модулями для проверки поддержки переходов CSS и обнаружения зависших переходов.
дезинфицирующее средство
Всплывающие подсказки и всплывающие окна используют наше встроенное средство очистки для очистки параметров, которые принимают HTML.
Значение по умолчанию whiteList
следующее:
Если вы хотите добавить новые значения к этому значению по умолчанию whiteList
, вы можете сделать следующее:
Если вы хотите обойти наше дезинфицирующее средство, потому что предпочитаете использовать выделенную библиотеку, например DOMPurify , вам следует сделать следующее: