JavaScript

Individual sau compilat

Pluginurile pot fi incluse individual (folosind individualul Bootstrap js/dist/*.js) sau toate odată folosind bootstrap.jssau diminuate bootstrap.min.js(nu le includeți pe ambele).

Dacă utilizați un bundler (Webpack, Rollup...), puteți utiliza /js/dist/*.jsfișiere care sunt gata UMD.

Folosind Bootstrap ca modul

Oferim o versiune de Bootstrap construită ca ESM( bootstrap.esm.jsși bootstrap.esm.min.js) care vă permite să utilizați Bootstrap ca modul în browser, dacă browserele vizate îl acceptă .

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

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

Dependente

Unele plugin-uri și componente CSS depind de alte plugin-uri. Dacă includeți pluginuri individual, asigurați-vă că verificați aceste dependențe în documente.

Mențiunile derulante, popover-urile și sfaturile noastre de instrumente depind și de Popper .

Încă vrei să folosești jQuery? Este posibil!

Bootstrap 5 este conceput pentru a fi utilizat fără jQuery, dar este încă posibil să folosim componentele noastre cu jQuery. Dacă Bootstrap detectează jQueryobiectul window, va adăuga toate componentele noastre în sistemul de pluginuri jQuery; aceasta înseamnă că veți putea face $('[data-bs-toggle="tooltip"]').tooltip()pentru a activa sfaturile instrumente. Același lucru este valabil și pentru celelalte componente ale noastre.

Atributele datelor

Aproape toate pluginurile Bootstrap pot fi activate și configurate numai prin HTML cu atribute de date (modul nostru preferat de a folosi funcționalitatea JavaScript). Asigurați-vă că utilizați un singur set de atribute de date pe un singur element (de exemplu, nu puteți declanșa un balon explicativ și un modal de pe același buton.)

Evenimente

Bootstrap oferă evenimente personalizate pentru acțiunile unice ale majorității pluginurilor. În general, acestea vin într-o formă de infinitiv și participiu trecut - unde infinitivul (ex. show) este declanșat la începutul unui eveniment, iar forma sa de participiu trecut (ex. shown) este declanșat la finalizarea unei acțiuni.

Toate evenimentele infinitive oferă preventDefault()funcționalitate. Aceasta oferă posibilitatea de a opri execuția unei acțiuni înainte de a începe. Întoarcerea false de la un handler de evenimente va apela automat și 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-ul programatic

Toți constructorii acceptă un obiect opțional opțional sau nimic (care inițiază un plugin cu comportamentul său implicit):

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

Dacă doriți să obțineți o anumită instanță de plugin, fiecare plugin expune o getInstancemetodă. Pentru a-l prelua direct dintr-un element, procedați astfel: bootstrap.Popover.getInstance(myPopoverEl).

Selectori CSS în constructori

De asemenea, puteți utiliza un selector CSS ca prim argument în loc de un element DOM pentru a inițializa pluginul. În prezent, elementul pentru plugin este găsit prin querySelectormetodă, deoarece pluginurile noastre acceptă doar un singur element.

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

Funcții și tranziții asincrone

Toate metodele API programatice sunt asincrone și revin la apelant odată ce tranziția este începută, dar înainte ca aceasta să se încheie .

Pentru a executa o acțiune odată ce tranziția este finalizată, puteți asculta evenimentul corespunzător.

var myCollapseEl = document.getElementById('myCollapse')

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

În plus, un apel de metodă pentru o componentă de tranziție va fi ignorat .

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 !!

Setări implicite

Puteți modifica setările implicite pentru un plugin modificând obiectul pluginului Constructor.Default:

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

Fără conflict (doar dacă utilizați jQuery)

Uneori este necesar să utilizați pluginuri Bootstrap cu alte cadre UI. În aceste circumstanțe, pot apărea ocazional coliziuni ale spațiului de nume. Dacă se întâmplă acest lucru, puteți apela .noConflictla pluginul căruia doriți să reveniți la valoarea.

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

Numerele versiunii

Versiunea fiecărui plugin Bootstrap poate fi accesată prin VERSIONproprietatea constructorului pluginului. De exemplu, pentru pluginul tooltip:

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

Nu există soluții speciale când JavaScript este dezactivat

Pluginurile Bootstrap nu revin în mod deosebit de grațios atunci când JavaScript este dezactivat. Dacă vă pasă de experiența utilizatorului în acest caz, folosiți <noscript>pentru a explica situația (și cum să reactivați JavaScript) utilizatorilor dvs. și/sau adăugați propriile alternative personalizate.

Dezinfectant

Sfaturile cu instrumente și popoverele folosesc dezinfectantul nostru încorporat pentru a dezinfecta opțiunile care acceptă HTML.

Valoarea implicită allowListeste următoarea:

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

Dacă doriți să adăugați noi valori la această valoare implicită allowList, puteți face următoarele:

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)

Dacă doriți să ocoliți dezinfectantul nostru deoarece preferați să utilizați o bibliotecă dedicată, de exemplu DOMPurify , ar trebui să faceți următoarele:

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