JavaScript
Dale vida a Bootstrap con nuestros complementos de JavaScript opcionales. Obtenga información sobre cada complemento, nuestras opciones de API programáticas y de datos, y más.
Individual o compilado
Los complementos se pueden incluir individualmente (usando el individual de Bootstrap js/dist/*.js
), o todos a la vez usando bootstrap.js
o minified bootstrap.min.js
(no incluya ambos).
Si usa un paquete (Webpack, Rollup...), puede usar /js/dist/*.js
archivos que estén preparados para UMD.
Usando Bootstrap como un módulo
Proporcionamos una versión de Bootstrap creada como ESM
( bootstrap.esm.js
y bootstrap.esm.min.js
) que le permite usar Bootstrap como un módulo en su navegador, si sus navegadores específicos lo admiten .
<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
Array.from(document.querySelectorAll('.toast'))
.forEach(toastNode => new Toast(toastNode))
</script>
Complementos incompatibles
Debido a las limitaciones del navegador, algunos de nuestros complementos, a saber, los complementos desplegables, de información sobre herramientas y popover, no se pueden usar en una <script>
etiqueta con module
tipo porque dependen de Popper. Para obtener más información sobre el tema, consulte aquí .
dependencias
Algunos complementos y componentes CSS dependen de otros complementos. Si incluye plugins individualmente, asegúrese de comprobar si existen estas dependencias en los documentos.
Nuestros menús desplegables, popovers e información sobre herramientas también dependen de Popper .
¿Todavía quieres usar jQuery? ¡Es posible!
Bootstrap 5 está diseñado para usarse sin jQuery, pero aún es posible usar nuestros componentes con jQuery. Si Bootstrap detecta jQuery
en el window
objeto , agregará todos nuestros componentes en el sistema de complementos de jQuery; esto significa que podrá hacer $('[data-bs-toggle="tooltip"]').tooltip()
para habilitar la información sobre herramientas. Lo mismo ocurre con nuestros otros componentes.
Atributos de datos
Casi todos los complementos de Bootstrap se pueden habilitar y configurar solo a través de HTML con atributos de datos (nuestra forma preferida de usar la funcionalidad de JavaScript). Asegúrese de usar solo un conjunto de atributos de datos en un solo elemento (por ejemplo, no puede activar una información sobre herramientas y un modal desde el mismo botón).
Selectores
Actualmente, para consultar elementos DOM, usamos los métodos nativos querySelector
y querySelectorAll
por razones de rendimiento, por lo que debe usar selectores válidos . Si usa selectores especiales, por ejemplo: collapse:Example
asegúrese de escaparlos.
Eventos
Bootstrap proporciona eventos personalizados para la mayoría de las acciones únicas de los complementos. Por lo general, estos vienen en forma de infinitivo y participio pasado, donde el infinitivo (p. ej. show
) se activa al comienzo de un evento y su forma de participio pasado (p. ej. shown
) se activa al completar una acción.
Todos los eventos de infinitivo proporcionan preventDefault()
funcionalidad. Esto proporciona la capacidad de detener la ejecución de una acción antes de que comience. Devolver falso desde un controlador 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
}
})
eventos de jQuery
Bootstrap detectará jQuery si jQuery
está presente en el window
objeto y no hay ningún data-bs-no-jquery
atributo establecido en <body>
. Si se encuentra jQuery, Bootstrap emitirá eventos gracias al sistema de eventos de jQuery. Entonces, si desea escuchar los eventos de Bootstrap, deberá usar los métodos jQuery ( .on
, .one
) en lugar de addEventListener
.
$('#myTab a').on('shown.bs.tab', function () {
// do something...
})
API programática
Todos los constructores aceptan un objeto de opciones opcionales o nada (que inicia un complemento 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 desea obtener una instancia de complemento en particular, cada complemento expone un getInstance
método. Para recuperarlo directamente de un elemento, haga lo siguiente: bootstrap.Popover.getInstance(myPopoverEl)
.
Selectores CSS en constructores
También puede usar un selector CSS como primer argumento en lugar de un elemento DOM para inicializar el complemento. Actualmente, el método encuentra el elemento para el complemento querySelector
, ya que nuestros complementos solo admiten un único elemento.
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
Funciones asíncronas y transiciones
Todos los métodos programáticos de la API son asincrónicos y regresan a la persona que llama una vez que se inicia la transición, pero antes de que finalice .
Para ejecutar una acción una vez completada la transición, puede 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 , se ignorará una llamada de método en un componente en transición .
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 por defecto
Puede cambiar la configuración predeterminada de un complemento modificando el Constructor.Default
objeto del complemento:
// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false
Sin conflicto (solo si usa jQuery)
A veces es necesario usar complementos de Bootstrap con otros marcos de interfaz de usuario. En estas circunstancias, ocasionalmente pueden ocurrir colisiones de espacios de nombres. Si esto sucede, puede llamar .noConflict
al complemento cuyo valor desea 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
Se puede acceder a la versión de cada uno de los complementos de Bootstrap a través de la VERSION
propiedad del constructor del complemento. Por ejemplo, para el complemento de información sobre herramientas:
bootstrap.Tooltip.VERSION // => "5.0.2"
No hay respaldos especiales cuando JavaScript está deshabilitado
Los complementos de Bootstrap no se recuperan de manera particularmente elegante cuando JavaScript está deshabilitado. Si le importa la experiencia del usuario en este caso, utilícelo <noscript>
para explicar la situación (y cómo volver a habilitar JavaScript) a sus usuarios y/o agregue sus propios recursos alternativos personalizados.
Bibliotecas de terceros
Bootstrap no admite oficialmente bibliotecas de JavaScript de terceros como Prototype o jQuery UI. A pesar .noConflict
de los eventos con espacio de nombres, puede haber problemas de compatibilidad que deba solucionar por su cuenta.
Desinfectante
La información sobre herramientas y las ventanas emergentes utilizan nuestro desinfectante incorporado para desinfectar las opciones que aceptan HTML.
El valor predeterminado 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 desea agregar nuevos valores a este valor predeterminado allowList
, puede 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 desea omitir nuestro desinfectante porque prefiere usar una biblioteca dedicada, por ejemplo , DOMPurify , debe hacer lo siguiente:
var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})