Перейти к основному содержанию Перейти к навигации по документам

Используйте Bootstrap с нашими дополнительными плагинами JavaScript. Узнайте о плагинах, программных API-интерфейсах и многом другом.

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

Плагины можно подключать по одному (файлами 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.

Хотите использовать 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() // останавливает отображение модального окна
  }
})

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 () {
  // сделайте что-нибудь...
})

Алгоритмическое API

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

var myModalEl = document.getElementById('myModal')
var modal = new bootstrap.Modal(myModalEl) // инициализирован по умолчанию
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // инициализирован без клавиатуры

Если вы хотите получить конкретный экземпляр плагина, каждый плагин предоставляет метод getInstance. Чтобы извлечь его непосредственно из элемента, сделайте это: bootstrap.Popover.getInstance (myPopoverEl).

Селекторы CSS в конструкторах

Вы также можете использовать селектор CSS в качестве первого аргумента вместо элемента DOM для инициализации плагина. В настоящее время элемент для плагина находится с помощью метода querySelector, поскольку наши плагины поддерживают только один элемент.

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

Асинхронные функции и библиотека «переходов»

Все методы алгоритмических API асинхронны и возвращают пользователю значение после того, как «переход» начат и до того, как «переход» закончен.

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

var myCollapseEl = document.getElementById('#myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
  // Действие, выполняемое после раскрытия сворачиваемой области
})

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

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Получить экземпляр карусели

myCarouselEl.addEventListener('slid.bs.carousel', function (event) {
  carousel.to('2') // Перейдет к слайду 2, как только переход к слайду 1 завершится
})

carousel.to('1') // Начнется переход к слайду 1 и вернется к вызывающему
carousel.to('2') // !! Будет проигнорировано, так как переход к слайду 1 не завершен !!

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

Вы можете изменить их для плагина, изменяя объект плагина Constructor.Default:

// изменяет значение по умолчанию для опции `keyboard` модального плагина на false
bootstrap.Modal.Default.keyboard = false

Нет конфликта (только если вы используете jQuery)

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

var bootstrapButton = $.fn.button.noConflict() // возвращает $.fn.button к ранее присвоенному значению
$.fn.bootstrapBtn = bootstrapButton // придаёт $().bootstrapBtn функциональность Bootstrap

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

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

bootstrap.Tooltip.VERSION // => "5.0.0-beta3"

Отсутствие fallback’a при отключеном JavaScript

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

Сторонние библиотеки

Официально Bootstrap не поддерживает сторонние JavaScript библиотеки, такие как Prototype или UI-jQuery. Несмотря на использование .noConflict и группированных по функциональности обработчиков событий, при подключении сторонних библиотек могут возникнуть проблемы при компиляции.

Чистильщик

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

Значение по умолчанию whiteList (белый список) следующее:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultAllowlist = {
  // Глобальные атрибуты разрешены для любого указанного ниже элемента.
  '*': ['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: []
}

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

var myDefaultAllowList = bootstrap.Tooltip.Default.allowList

// Чтобы разрешить элементы таблицы
myDefaultAllowList.table = []

// Чтобы разрешить элементы td и атрибуты параметров данных в элементах td
myDefaultAllowList.td = ['data-bs-option']

// Вы можете отправить собственное регулярное выражение для проверки своих атрибутов.
// Будьте осторожны, чтобы Ваши регулярные выражения были слишком слабыми
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)
  }
})