ЈаваСцрипт

Појединачно или састављено

Додаци се могу укључити појединачно (користећи Боотстрап-ов индивидуални js/dist/*.js), или сви одједном користећи bootstrap.jsили минимизирати bootstrap.min.js(немојте укључивати оба).

Ако користите бундлер (Вебпацк, Роллуп...), можете користити /js/dist/*.jsдатотеке које су спремне за УМД.

Коришћење Боотстрапа као модула

Пружамо верзију Боотстрапа направљену као ESM( bootstrap.esm.jsи bootstrap.esm.min.js) која вам омогућава да користите Боотстрап као модул у вашем претраживачу, ако га ваши циљани претраживачи подржавају .

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

Зависности

Неки додаци и ЦСС компоненте зависе од других додатака. Ако укључите додатке појединачно, проверите да ли постоје ове зависности у документима.

Наши падајући мении, искачући огласи и описи алата такође зависе од Поппера .

И даље желите да користите јКуери? То је могуће!

Боотстрап 5 је дизајниран да се користи без јКуери-ја, али је и даље могуће користити наше компоненте са јКуери-јем. Ако Боотстрап открије jQueryу windowобјекту , он ће додати све наше компоненте у систем додатака јКуери; то значи да ћете моћи да $('[data-bs-toggle="tooltip"]').tooltip()омогућите описе алатки. Исто важи и за наше остале компоненте.

Атрибути података

Скоро сви додаци за Боотстрап могу се омогућити и конфигурисати само преко ХТМЛ-а са атрибутима података (наш преферирани начин коришћења ЈаваСцрипт функционалности). Будите сигурни да користите само један скуп атрибута података на једном елементу (нпр. не можете покренути опис алата и модал са истог дугмета.)

Догађаји

Боотстрап обезбеђује прилагођене догађаје за јединствене радње већине додатака. Генерално, они долазе у облику инфинитива и партиципа у прошлости – где се инфинитив (нпр. show) покреће на почетку догађаја, а његов глаголски облик у прошлости (нпр. shown) се покреће по завршетку радње.

Сви инфинитивни догађаји пружају preventDefault()функционалност. Ово пружа могућност заустављања извршења радње пре него што она почне. Враћање фалсе из обрађивача догађаја ће такође аутоматски позвати 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...
})

Програмски АПИ

Сви конструктори прихватају опциони објекат опција или ништа (који покреће додатак са својим подразумеваним понашањем):

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

ЦСС селектори у конструкторима

Такође можете користити ЦСС селектор као први аргумент уместо ДОМ елемента да бисте иницијализовали додатак. Тренутно се елемент за додатак проналази querySelectorметодом пошто наши додаци подржавају само један елемент.

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

Асинхроне функције и прелази

Све програмске АПИ методе су асинхроне и враћају се позиваоцу када се транзиција започне, али пре него што се заврши .

Да бисте извршили радњу када је транзиција завршена, можете слушати одговарајући догађај.

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

Нема сукоба (само ако користите јКуери)

Понекад је потребно користити додатке за Боотстрап са другим оквирима корисничког интерфејса. У овим околностима повремено се могу појавити колизије простора имена. Ако се то догоди, можете позвати .noConflictдодатак којем желите да вратите вредност.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

Бројеви верзија

Верзији сваког од Боотстрап-ових додатака може се приступити преко VERSIONсвојства конструктора додатка. На пример, за додатак са описом алатки:

bootstrap.Tooltip.VERSION // => "5.0.2"

Нема посебних резерви када је ЈаваСцрипт онемогућен

Боотстрап-ови додаци се не враћају посебно грациозно када је ЈаваСцрипт онемогућен. Ако вам је стало до корисничког искуства у овом случају, користите <noscript>да објасните ситуацију (и како да поново омогућите ЈаваСцрипт) својим корисницима и/или додајте сопствене прилагођене резерве.

Санитизер

Објашњење алата и искачући прикази користе наш уграђени дезинфикатор за дезинфекцију опција које прихватају ХТМЛ.

Подразумевана 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)

Ако желите да заобиђете наше средство за дезинфекцију јер више волите да користите наменску библиотеку, на пример ДОМПурифи , требало би да урадите следеће:

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})