JavaScript

Individual o compilado

Los plugins pueden incluirse individualmente (usando los js/dist/*.js individuales de Bootstrap), o todos a la vez usando bootstrap.js o el minificado bootstrap.min.js (no incluyas ambos).

Si usas un bundler (Webpack, Rollup…), puedes usar los archivos /js/dist/*.js que son compatibles con UMD.

Usar Bootstrap como módulo

Proporcionamos una versión de Bootstrap construida como ESM (bootstrap.esm.js y bootstrap.esm.min.js) que te permite usar Bootstrap como módulo en tu navegador, si tus navegadores objetivo lo soportan.

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

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

Dependencias

Algunos plugins y componentes CSS dependen de otros plugins. Si incluyes plugins individualmente, asegúrate de comprobar estas dependencias en la documentación.

Nuestros desplegables, popovers y tooltips también dependen de Popper.

¿Aún quieres usar jQuery? ¡Es posible!

Bootstrap 5 está diseñado para usarse sin jQuery, pero sigue siendo posible usar nuestros componentes con jQuery. Si Bootstrap detecta jQuery en el objeto window añadirá todos nuestros componentes al sistema de plugins de jQuery; esto significa que podrás hacer $('[data-bs-toggle="tooltip"]').tooltip() para activar los tooltips. Lo mismo aplica para nuestros otros componentes.

Atributos data

Casi todos los plugins de Bootstrap pueden activarse y configurarse a través de HTML únicamente con atributos data (nuestra forma preferida de usar la funcionalidad JavaScript). Asegúrate de usar solo un conjunto de atributos data en un solo elemento (ej., no puedes activar un tooltip y un modal desde el mismo botón).

Eventos

Bootstrap proporciona eventos personalizados para las acciones únicas de la mayoría de los plugins. Generalmente, estos vienen en forma infinitiva y de participio pasado - donde el infinitivo (ej. show) se dispara al inicio de un evento, y su forma de participio pasado (ej. shown) se dispara al completar una acción.

Todos los eventos infinitivos proporcionan la funcionalidad preventDefault(). Esto da la capacidad de detener la ejecución de una acción antes de que comience. Devolver false desde un manejador de eventos también llamará automáticamente a 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

Todos los constructores aceptan un objeto de opciones opcional o nada (lo cual inicia un plugin con su comportamiento predeterminado):

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 quieres obtener una instancia particular de un plugin, cada plugin expone un método getInstance. Para recuperarla directamente desde un elemento, haz esto: bootstrap.Popover.getInstance(myPopoverEl).

Selectores CSS en constructores

También puedes usar un selector CSS como primer argumento en lugar de un elemento del DOM para inicializar el plugin. Actualmente el elemento para el plugin se encuentra mediante el método querySelector ya que nuestros plugins soportan un solo elemento únicamente.

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

Funciones asíncronas y transiciones

Todos los métodos de la API programática son asíncronos y devuelven al llamador una vez que la transición ha comenzado pero antes de que termine.

Para ejecutar una acción una vez que la transición se haya completado, puedes escuchar el evento correspondiente.

var myCollapseEl = document.getElementById('myCollapse')

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

Además, una llamada a un método en un componente en transición será ignorada.

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ón predeterminada

Puedes cambiar la configuración predeterminada de un plugin modificando el objeto Constructor.Default del plugin:

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

Sin conflicto (solo si usas jQuery)

A veces es necesario usar los plugins de Bootstrap con otros frameworks de UI. En estas circunstancias, pueden ocurrir ocasionalmente colisiones de namespace. Si esto ocurre, puedes llamar a .noConflict en el plugin cuyo valor quieras revertir.

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

Números de versión

La versión de cada uno de los plugins de Bootstrap puede accederse a través de la propiedad VERSION del constructor del plugin. Por ejemplo, para el plugin tooltip:

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

Sin fallbacks especiales cuando JavaScript está desactivado

Los plugins de Bootstrap no tienen un fallback particularmente elegante cuando JavaScript está desactivado. Si te importa la experiencia del usuario en este caso, usa <noscript> para explicar la situación (y cómo reactivar JavaScript) a tus usuarios, y/o añade tus propios fallbacks personalizados.

Sanitizer

Los Tooltips y Popovers usan nuestro sanitizer integrado para sanitizar las opciones que aceptan HTML.

El valor predeterminado de allowList es el siguiente:

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 quieres añadir nuevos valores a este allowList predeterminado puedes hacer lo siguiente:

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 quieres omitir nuestro sanitizer porque prefieres usar una librería dedicada, por ejemplo DOMPurify, deberías hacer lo siguiente:

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