ЈаваСцрипт

Оживите Боотстрап помоћу наших опционих ЈаваСцрипт додатака. Сазнајте више о сваком додатку, нашим подацима и опцијама програмског АПИ-ја и још много тога.

На овој страници

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

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

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

Употреба са ЈаваСцрипт оквирима

Док се Боотстрап ЦСС може користити са било којим оквиром, Боотстрап ЈаваСцрипт није у потпуности компатибилан са ЈаваСцрипт оквирима као што су Реацт, Вуе и Ангулар који претпостављају потпуно познавање ДОМ-а. И Боотстрап и оквир могу покушати да мутирају исти ДОМ елемент, што доводи до грешака попут падајућих менија који су заглављени у „отвореној“ позицији.

Боља алтернатива за оне који користе ову врсту оквира је коришћење пакета специфичног за оквир уместо Боотстрап ЈаваСцрипт-а. Ево неких од најпопуларнијих опција:

Реаговати: Реаговати Боотстрап
Вуе: БоотстрапВуе (тренутно подржава само Вуе 2 и Боотстрап 4)
Угаони: нг-боотстрап

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

Пробајте сами! Преузмите изворни код и радну демонстрацију за коришћење Боотстрапа као ЕС модула из твбс/екамплес спремишта . Такође можете отворити пример у СтацкБлитз-у .

Нудимо верзију Боотстрапа направљену као 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>

У поређењу са ЈС пакетима, коришћење ЕСМ-а у претраживачу захтева да користите пуну путању и име датотеке уместо назива модула. Прочитајте више о ЈС модулима у претраживачу. Зато користимо 'bootstrap.esm.min.js'уместо 'bootstrap'горе наведеног. Међутим, ово је додатно компликовано нашом Поппер зависношћу, која увози Поппер у наш ЈаваСцрипт на следећи начин:

import * as Popper from "@popperjs/core"

Ако покушате ово како јесте, видећете грешку у конзоли попут следеће:

Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".

Да бисте ово поправили, можете користити а importmapда бисте разрешили произвољна имена модула да бисте завршили путање. Ако ваши циљани претраживачи не подржавају importmap, мораћете да користите пројекат ес-модуле-схимс . Ево како то функционише за Боотстрап и Поппер:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <title>Hello, modularity!</title>
  </head>
  <body>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>

    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
    <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
      }
    }
    </script>
    <script type="module">
      import * as bootstrap from 'bootstrap'

      new bootstrap.Popover(document.getElementById('popoverButton'))
    </script>
  </body>
</html>

Зависности

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

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

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

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

Пошто опције могу да се прослеђују преко атрибута података или ЈаваСцрипт-а, можете додати име опције у data-bs-, као у data-bs-animation="{value}". Обавезно промените тип случаја назива опције из „ цамелЦасе “ у „ кебаб-цасе “ када преносите опције преко атрибута података. На пример, користите data-bs-custom-class="beautifier"уместо data-bs-customClass="beautifier".

Од Боотстрап 5.2.0, све компоненте подржавају експериментални резервисани атрибут података data-bs-configкоји може да садржи једноставну конфигурацију компоненте као ЈСОН стринг. Када елемент има атрибуте data-bs-config='{"delay":0, "title":123}'и data-bs-title="456", коначна titleвредност ће бити 456и одвојени атрибути података ће заменити вредности дате на data-bs-config. Поред тога, постојећи атрибути података могу да садрже ЈСОН вредности попут data-bs-delay='{"show":0,"hide":150}'.

Селектори

Користимо нативе querySelectorи querySelectorAllметоде за испитивање ДОМ елемената из разлога перформанси, тако да морате користити важеће селекторе . Ако користите посебне селекторе као што collapse:Exampleје , обавезно их побегните.

Догађаји

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

Сви инфинитивни догађаји пружају preventDefault()функционалност. Ово пружа могућност заустављања извршења радње пре него што она почне. Враћање фалсе из обрађивача догађаја ће такође аутоматски позвати preventDefault().

const myModal = document.querySelector('#myModal')

myModal.addEventListener('show.bs.modal', event => {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

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

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

const myModalEl = document.querySelector('#myModal')

const modal = new bootstrap.Modal(myModalEl) // initialized with defaults

const configObject = { keyboard: false }
const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard

Ако желите да добијете одређену инстанцу додатка, сваки додатак излаже getInstanceметод. На пример, да бисте преузели инстанцу директно из елемента:

bootstrap.Popover.getInstance(myPopoverEl)

Овај метод ће се вратити nullако се инстанца не покрене преко захтеваног елемента.

Алтернативно, getOrCreateInstanceможе се користити за добијање инстанце повезане са ДОМ елементом или за креирање новог у случају да није иницијализован.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

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

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

Поред метода getInstanceи getOrCreateInstance, сви конструктори додатака могу прихватити ДОМ елемент или важећи ЦСС селектор као први аргумент. Елементи додатака се налазе са querySelectorметодом јер наши додаци подржавају само један елемент.

const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
const offcanvas = bootstrap.Offcanvas.getInstance('#myOffcanvas')
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')

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

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

const myCollapseEl = document.querySelector('#myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', event => {
  // Action to execute once the collapsible area is expanded
})

Поред тога, позив методе за прелазну компоненту биће занемарен .

const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', 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 !!

`dispose`методом

Иако може изгледати исправно користити disposeметод одмах након hide(), то ће довести до нетачних резултата. Ево примера употребе проблема:

const myModal = document.querySelector('#myModal')
myModal.hide() // it is asynchronous

myModal.addEventListener('shown.bs.hidden', event => {
  myModal.dispose()
})

Подразумевана подешавања

Можете да промените подразумевана подешавања за додатак тако што ћете изменити Constructor.Defaultобјекат додатка:

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

Методе и својства

Сваки додатак за Боотстрап излаже следеће методе и статичка својства.

Метод	Опис
`dispose`	Уништава модални елемент. (Уклања сачуване податке на ДОМ елементу)
`getInstance`	Статичка метода која вам омогућава да добијете модалну инстанцу повезану са ДОМ елементом.
`getOrCreateInstance`	Статичка метода која вам омогућава да добијете модалну инстанцу повезану са ДОМ елементом или креирате нову у случају да није инициј��лизована.

Статичко својство	Опис
`NAME`	Враћа име додатка. (Пример: `bootstrap.Tooltip.NAME`)
`VERSION`	Верзији сваког од Боотстрап додатака може се приступити преко `VERSION`својства конструктора додатка (Пример: `bootstrap.Tooltip.VERSION`)

Санитизер

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

Подразумевана allowListвредност је следећа:

const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
const 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, можете да урадите следеће:

const 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
const myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)

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

const yourTooltipEl = document.querySelector('#yourTooltip')
const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn(content) {
    return DOMPurify.sanitize(content)
  }
})

Опционо користећи јКуери

Не треба вам јКуери у Боотстрап 5 , али је и даље могуће користити наше компоненте са јКуери-јем. Ако Боотстрап открије jQueryу windowобјекту, он ће додати све наше компоненте у систем додатака јКуери. Ово вам омогућава да урадите следеће:

$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration

$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration

$('#myTooltip').tooltip('show') // to trigger `show` method

Исто важи и за наше остале компоненте.

Нема сукоба

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

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

Боотстрап званично не подржава ЈаваСцрипт библиотеке трећих страна као што су Прототипе или јКуери УИ. Упркос .noConflictдогађајима у именском простору, могу постојати проблеми са компатибилношћу које морате сами да решите.

јКуери догађаји

Боотстрап ће открити јКуери ако jQueryје присутан у windowобјекту и није data-bs-no-jqueryпостављен атрибут на <body>. Ако се јКуери пронађе, Боотстрап ће емитовати догађаје захваљујући јКуери систему догађаја. Дакле, ако желите да слушате Боотстрап догађаје, мораћете да користите јКуери методе ( .on, .one) уместо addEventListener.

$('#myTab a').on('shown.bs.tab', () => {
  // do something...
})

Онемогућен ЈаваСцрипт

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