JavaScript

Individuali o cumpilati

I plugins ponu esse inclusi individualmente (aduprendu l'individuu di Bootstrap js/dist/*.js), o tutti in una volta usendu bootstrap.jso minificati bootstrap.min.js(ùn include micca i dui).

Se aduprate un bundler (Webpack, Rollup...), pudete aduprà /js/dist/*.jsi fugliali chì sò pronti per UMD.

Utilizà Bootstrap cum'è modulu

Furnemu una versione di Bootstrap custruita cum'è ESM( bootstrap.esm.jsè bootstrap.esm.min.js) chì vi permette di utilizà Bootstrap cum'è un modulu in u vostru navigatore, se i vostri navigatori destinati u supportanu .

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

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

Dipendenze

Certi plugins è cumpunenti CSS dipendenu da altri plugins. Se include plugins individualmente, assicuratevi di verificà queste dipendenze in i documenti.

I nostri dropdowns, popovers è tooltips dipendenu ancu da Popper .

Vulete ancu aduprà jQuery? Hè pussibule !

Bootstrap 5 hè pensatu per esse usatu senza jQuery, ma hè sempre pussibule di utilizà i nostri cumpunenti cù jQuery. Se Bootstrap detecta jQueryin l' windowughjettu , aghjunghje tutti i nostri cumpunenti in u sistema di plugin di jQuery; questu significa chì puderete fà $('[data-bs-toggle="tooltip"]').tooltip()per attivà i tooltips. U stessu passa per i nostri altri cumpunenti.

Attributi di dati

Quasi tutti i plugins Bootstrap ponu esse attivati ​​​​è cunfigurati cù HTML solu cù attributi di dati (u nostru modu preferitu di utilizà a funziunalità JavaScript). Assicuratevi di utilizà solu un set di attributi di dati nantu à un elementu unicu (per esempiu, ùn pudete micca attivà un tooltip è modale da u stessu buttone).

Avvenimenti

Bootstrap furnisce avvenimenti persunalizati per a maiò parte di l'azzioni uniche di i plugins. In generale, questi venenu in una forma di participiu infinitu è ​​passatu - induve l'infinitivu (es. show) hè attivatu à l'iniziu di un avvenimentu, è a so forma di participiu passatu (es. shown) hè attivatu à a fine di una azione.

Tutti l'avvenimenti infiniti furnisce preventDefault()funziunalità. Questu furnisce a capacità di piantà l'esekzione di un'azzione prima di principià. Riturnà falsi da un gestore di l'eventi chjamarà ancu automaticamente 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 di prugrammazione

Tutti i custruttori accettanu un ogettu d'opzioni opzionali o nunda (chì inizia un plugin cù u so cumpurtamentu predeterminatu):

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

Se vulete ottene una istanza di plugin particulari, ogni plugin espone un getInstancemetudu. Per ricuperà direttamente da un elementu, fate questu: bootstrap.Popover.getInstance(myPopoverEl).

I selettori CSS in i custruttori

Pudete ancu aduprà un selettore CSS cum'è u primu argumentu invece di un elementu DOM per inizializà u plugin. Attualmente l'elementu per u plugin hè truvatu da u querySelectormetudu postu chì i nostri plugins supportanu un solu elementu solu.

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

Funzioni asincrone è transizioni

Tutti i metudi di API di prugrammazione sò asincroni è tornanu à u chjamante una volta chì a transizione hè iniziata, ma prima di finisce .

Per eseguisce una azzione una volta chì a transizione hè cumpleta, pudete sente l'avvenimentu currispundente.

var myCollapseEl = document.getElementById('myCollapse')

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

Inoltre, un metudu chjamatu nantu à un cumpunente di transizione serà ignoratu .

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

Paràmetri predeterminati

Pudete cambià i paràmetri predeterminati per un plugin mudificà l' Constructor.Defaultughjettu di u plugin:

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

Nisun cunflittu (solu se utilizate jQuery)

A volte hè necessariu di utilizà plugins Bootstrap cù altri frameworks UI. In queste circustanze, i collisioni di u spaziu di nomi ponu accade in ocasioni. Se questu succede, pudete chjamà .noConflictu plugin chì vulete rinvià u valore.

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

Numeri di versione

A versione di ognuna di i plugins di Bootstrap pò esse accessu via a VERSIONpruprietà di u custruttore di u plugin. Per esempiu, per u plugin tooltip:

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

Nisuna fallback speciale quandu JavaScript hè disattivatu

I plugins di Bootstrap ùn tornanu micca particularmente grazia quandu JavaScript hè disattivatu. Se ti interessa l'esperienza di l'utilizatori in questu casu, aduprate <noscript>per spiegà a situazione (è cumu riattivate JavaScript) à i vostri utilizatori, è / o aghjunghje i vostri propri fallbacks persunalizati.

Sanitizer

Tooltips è Popovers utilizanu u nostru sanitizer integratu per sanitizà l'opzioni chì accettanu HTML.

allowListU valore predeterminatu hè u seguente:

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

Se vulete aghjunghje novi valori à questu predefinitu allowList, pudete fà e seguenti:

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)

Se vulete sguassate u nostru disinfettante perchè preferite aduprà una biblioteca dedicata, per esempiu DOMPurify , duvete fà ciò chì segue:

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