JavaScript
Используйте Bootstrap с нашими дополнительными плагинами JavaScript. Узнайте о плагинах, программных API-интерфейсах и многом другом.
Индивидуальные или компилированные
Плагины можно подключать по одному (файлами js/dist/*.js
) или все сразу – с помощью bootstrap.js
или «облегченного» bootstrap.min.js
(не подключайте оба сразу).
Если вы используете упаковщики (Например, Webpack, Rollup), то вы можете использовать файлы /js/dist/*.js
готовые к UMD (Universal Module Definition) - набор шаблонов для обеспечения работы модуля в разных средах выполнения.
Использование Bootstrap в качестве модуля
Мы предоставляем версию Bootstrap, построенную как ESM
(bootstrap.esm.js
и bootstrap.esm.min.js
), которая позволяет вам использовать Bootstrap в качестве модуля в вашем браузере, если ваши целевые браузеры поддерживают его.
<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
Array.from(document.querySelectorAll('.toast'))
.forEach(toastNode => new Toast(toastNode))
</script>
Несовместимые плагины
Из-за ограничений браузера некоторые из наших плагинов, а именно плагины Dropdown, Tooltip и Popover, нельзя использовать в теге <script>
в качестве module
, поскольку они зависят от Popper.js. Для получения дополнительной информации о проблеме см. Здесь.
Зависимости
Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины по отдельности, обязательно проверьте эти зависимости в документации.
Наши выпадающие списки, всплывающие окна и подсказки также зависят от Popper.js.
Хотите использовать jQuery? Это возможно!
Bootstrap 5 разработан для использования без jQuery, но вы можете использовать наши компоненты с jQuery.
Если Bootstrap обнаружит jQuery
в объекте window
он добавит все наши компоненты в систему плагинов jQuery; это означает, что вы сможете использовать $('[data-toggle="tooltip"]').tooltip()
для включения подсказок. То же самое касается других наших компонентов.
Дата-атрибуты
Почти все плагины Bootstrap могут быть включены и настроены только через HTML с атрибутами данных (наш предпочтительный способ использования функциональности JavaScript). Обязательно используйте только один набор атрибутов данных для одного элемента (например, вы не можете активировать всплывающую подсказку и модальное нажатие одной и той же кнопки).
Селекторы
В настоящее время для запроса элементов DOM мы используем собственные методы querySelector
и querySelectorAll
по соображениям производительности, поэтому вы должны использовать допустимые селекторы. Если вы используете специальные селекторы, например: collapse:Example
, не забудьте их "экранировать".
События
Bootstrap предлагает ряд собственных событий для уникальных действий большинства плагинов. В целом, эти события обозначаются инфинитивом и прошедшей формой причастия – где инфинитив (например, show
) запускается в начале события, а его причастие (например, shown
) – по окончанию события.
Все инфинитивные события предоставляют функциональные возможности preventDefault()
. Это дает возможность остановить выполнение действия до его начала. Возвращение false из обработчика событий также автоматически вызовет preventDefault()
.
var myModal = document.getElementById('myModal')
myModal.addEventListener('show.bs.modal', function (event) {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
})
Cобытия jQuery
Bootstrap обнаружит jQuery если jQuery
присутствует в объекте window
и не установлен атрибут data-no-jquery
в <body>
.
Если jQuery найден, Bootstrap будет генерировать события благодаря системе событий jQuery.
Поэтому, если вы хотите прослушивать события Bootstrap, вам придется использовать методы jQuery (.on
и .one
) вместо addEventListener
.
$('#myTab a').on('shown.bs.tab', function () {
// do something...
})
Алгоритмическое API
Всем методам следует передавать или аргументы, т.е. строку, которая вызывает какой-либо метод, или ничего не передавать (что вызовет действие плагина, заложенное по умолчанию):
var myModalEl = document.getElementById('myModal')
var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard
Если вы хотите получить конкретный экземпляр плагина, каждый плагин предоставляет метод getInstance
. Чтобы извлечь его непосредственно из элемента, сделайте это: bootstrap.Popover.getInstance (myPopoverEl)
.
Асинхронные функции и библиотека «переходов»
Все методы алгоритмических API асинхронны и возвращают пользователю значение после того, как «переход» начат и до того, как «переход» закончен.
Чтобы выполнить действие по завершению «перехода», вы можете отследить соответствующее событие.
var myCollapseEl = document.getElementById('#myCollapse')
myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
// Action to execute once the collapsible area is expanded
})
Вызов метода на динамическом, изменяющемся компоненте будет проигнорирован.
var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance
myCarouselEl.addEventListener('slid.bs.carousel', function (event) {
carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})
carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!
Настройки по умолчанию
Вы можете изменить их для плагина, изменяя объект плагина Constructor.Default
:
// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false
Нет конфликта (только если вы используете jQuery)
Иногда необходимо использовать плагины Bootstrap с другими средами пользовательского интерфейса. В этих обстоятельствах иногда могут возникать коллизии пространства имен. Если это произойдет, вы можете вызвать .noConflict
для плагина, значение которого вы хотите вернуть.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Версии
Доступ к версии каждого из плагинов Bootstrap можно получить через свойство VERSION
конструктора плагина. Например, для плагина всплывающей подсказки:
bootstrap.Tooltip.VERSION // => "5.0.0-beta1"
Отсутствие fallback’a при отключеном JavaScript
Плагины Bootstrap не особенно изящны, когда JavaScript отключен. Если вы хотите подсказать юзеру, что делать в таком случае, используйте тэг <noscript>
для пояснений о пере-включении JavaScript.
Сторонние библиотеки
Официально Bootstrap не поддерживает сторонние JavaScript библиотеки, такие как Prototype или UI-jQuery. Несмотря на использование .noConflict
и группированных по функциональности обработчиков событий, при подключении сторонних библиотек могут возникнуть проблемы при компиляции.
Антисептик
Всплывающие подсказки и всплывающие подсказки используют наше встроенное дезинфицирующее средство для очистки параметров, принимающих HTML.
Значение по умолчанию whiteList
(белый список) следующее:
var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultAllowlist = {
// 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', 'srcset', 'alt', 'title', 'width', 'height'],
li: [],
ol: [],
p: [],
pre: [],
s: [],
small: [],
span: [],
sub: [],
sup: [],
strong: [],
u: [],
ul: []
}
Если вы хотите добавить новые значения в этот whiteList
(белый список) по умолчанию, вы можете сделать следующее:
var myDefaultAllowList = bootstrap.Tooltip.Default.allowList
// To allow table elements
myDefaultAllowList.table = []
// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-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-]+/
myDefaultAllowList['*'].push(myCustomRegex)
Если вы хотите обойти наш антисептик, потому что вы предпочитаете использовать выделенную библиотеку, например, DOMPurify, вы должны сделать следующее:
var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})