JavaScript

Individual o compilat

Els connectors es poden incloure individualment (utilitzant l'individu de Bootstrap js/dist/*.js), o tots alhora utilitzant bootstrap.jso minificats bootstrap.min.js(no incloure tots dos).

Si utilitzeu un paquet (Webpack, Rollup...), podeu utilitzar /js/dist/*.jsfitxers que estiguin preparats per UMD.

Utilitzant Bootstrap com a mòdul

Oferim una versió de Bootstrap creada com ESM( bootstrap.esm.jsi bootstrap.esm.min.js) que us permet utilitzar Bootstrap com a mòdul al vostre navegador, si els vostres navegadors de destinació ho admeten .

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

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

Dependències

Alguns connectors i components CSS depenen d'altres connectors. Si incloeu connectors individualment, assegureu-vos de comprovar aquestes dependències als documents.

Els nostres menús desplegables, finestres emergents i informació sobre eines també depenen de Popper .

Encara voleu utilitzar jQuery? És possible!

Bootstrap 5 està dissenyat per utilitzar-se sense jQuery, però encara és possible utilitzar els nostres components amb jQuery. Si Bootstrap detecta jQueryl' windowobjecte , afegirà tots els nostres components al sistema de connectors de jQuery; això vol dir que podreu fer $('[data-bs-toggle="tooltip"]').tooltip()per habilitar els consells sobre eines. El mateix passa amb els nostres altres components.

Atributs de dades

Gairebé tots els connectors Bootstrap es poden habilitar i configurar només mitjançant HTML amb atributs de dades (la nostra manera preferida d'utilitzar la funcionalitat de JavaScript). Assegureu-vos d' utilitzar només un conjunt d'atributs de dades en un sol element (p. ex., no podeu activar una informació sobre eines i un modal des del mateix botó).

Esdeveniments

Bootstrap ofereix esdeveniments personalitzats per a les accions úniques de la majoria dels connectors. Generalment, aquests es presenten en una forma d'infinitiu i de participi passat, on l'infinitiu (p. ex. show) s'activa a l'inici d'un esdeveniment i la seva forma de participi passat (p. ex. shown) s'activa en finalitzar una acció.

Tots els esdeveniments infinitius proporcionen preventDefault()funcionalitat. Això proporciona la possibilitat d'aturar l'execució d'una acció abans que comenci. Si retorneu false des d'un controlador d'esdeveniments, també es trucarà automàticament 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 programàtica

Tots els constructors accepten un objecte d'opcions opcionals o res (que inicia un connector amb el seu comportament per defecte):

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

Si voleu obtenir una instància de connector concreta, cada connector exposa un getInstancemètode. Per recuperar-lo directament d'un element, feu el següent: bootstrap.Popover.getInstance(myPopoverEl).

Selectors CSS en constructors

També podeu utilitzar un selector CSS com a primer argument en lloc d'un element DOM per inicialitzar el connector. Actualment l'element del connector es troba pel querySelectormètode, ja que els nostres connectors només admeten un sol element.

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

Funcions asíncrones i transicions

Tots els mètodes de l'API programàtica són asíncrons i tornen a la persona que truca un cop s'inicia la transició però abans que acabi .

Per executar una acció un cop finalitzada la transició, podeu escoltar l'esdeveniment corresponent.

var myCollapseEl = document.getElementById('myCollapse')

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

A més, s'ignorarà una trucada de mètode a un component en transició .

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

Configuració per defecte

Podeu canviar la configuració predeterminada d'un connector modificant l' Constructor.Defaultobjecte del connector:

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

Sense conflicte (només si utilitzeu jQuery)

De vegades és necessari utilitzar connectors Bootstrap amb altres marcs d'interfície d'usuari. En aquestes circumstàncies, ocasionalment es poden produir col·lisions d'espais de noms. Si això passa, podeu trucar .noConflictal connector del qual voleu revertir el valor.

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

Números de versió

Es pot accedir a la versió de cadascun dels connectors de Bootstrap mitjançant la VERSIONpropietat del constructor del connector. Per exemple, per al connector tooltip:

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

No hi ha alternatives especials quan JavaScript està desactivat

Els connectors d'Bootstrap no cauen especialment amb gràcia quan JavaScript està desactivat. Si t'importa l'experiència de l'usuari en aquest cas, fes servir <noscript>per explicar la situació (i com tornar a activar JavaScript) als teus usuaris i/o afegir les teves pròpies alternatives personalitzades.

Desinfectant

Els consells sobre eines i les finestres emergents utilitzen el nostre desinfectador integrat per desinfectar les opcions que accepten HTML.

El valor per defecte allowListés el següent:

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

Si voleu afegir nous valors a aquest valor predeterminat allowList, podeu fer el següent:

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)

Si voleu evitar el nostre desinfectant perquè preferiu utilitzar una biblioteca dedicada, per exemple DOMPurify , hauríeu de fer el següent:

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