JavaScript

Индивидуални или составени

Приклучоците може да се вклучат поединечно (со користење на поединецот на Bootstrap 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)
  }
})