JavaScript

Індивідуальний або складений

Плагіни можна включати окремо (за допомогою Bootstrap individual js/dist/*.js) або всі одночасно за допомогою bootstrap.jsабо мінімізованого bootstrap.min.js(не включайте обидва).

Якщо ви використовуєте збірник (Webpack, Rollup…), ви можете використовувати /js/dist/*.jsфайли, готові до UMD.

Використання 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>

Залежності

Деякі плагіни та компоненти CSS залежать від інших плагінів. Якщо ви включаєте плагіни окремо, обов’язково перевірте наявність цих залежностей у документах.

Наші спадні списки, спливаючі вікна та підказки також залежать від Popper .

Все ще хочете використовувати jQuery? Це можливо!

Bootstrap 5 розроблено для використання без jQuery, але все одно можна використовувати наші компоненти з jQuery. Якщо Bootstrap виявить об’єкт jQuery,window він додасть усі наші компоненти в систему плагінів jQuery; це означає, що ви зможете зробити, $('[data-bs-toggle="tooltip"]').tooltip()щоб увімкнути підказки. Те саме стосується інших наших компонентів.

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

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

Події

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

$('#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).

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) {
  // 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.2"

Немає спеціальних резервних варіантів, коли JavaScript вимкнено

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

Санітайзер

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

Значення за замовчуванням allowListтаке:

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: []
}

Якщо ви хочете додати нові значення до цього значення за замовчуванням allowList, ви можете зробити наступне:

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