JavaScript

Dale vida a Bootstrap con nuestros complementos de JavaScript opcionales creados en jQuery. 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.jso minified bootstrap.min.js(no incluya ambos).

Si usa un paquete (Webpack, Rollup...), puede usar /js/dist/*.jsarchivos que estén preparados para UMD.

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. También tenga en cuenta que todos los complementos dependen de jQuery (esto significa que jQuery debe incluirse antes de los archivos del complemento). Consulte nuestropackage.json para ver qué versiones de jQuery son compatibles.

Nuestros menús desplegables, popovers e información sobre herramientas también dependen de Popper.js .

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).

Sin embargo, en algunas situaciones puede ser conveniente deshabilitar esta función. Para deshabilitar la API de atributo de datos, desvincule todos los eventos en el espacio de nombres del documento data-apiasí:

$(document).off('.data-api')

Alternativamente, para apuntar a un complemento específico, simplemente incluya el nombre del complemento como un espacio de nombres junto con el espacio de nombres de la API de datos de esta manera:

$(document).off('.alert.data-api')

Eventos

Bootstrap proporciona eventos personalizados para la mayoría de las acciones únicas de los complementos. En 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().

$('#myModal').on('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

API programática

También creemos que debería poder usar todos los complementos de Bootstrap únicamente a través de la API de JavaScript. Todas las API públicas son métodos únicos que se pueden encadenar y devuelven la colección sobre la que se actúa.

$('.btn.danger').button('toggle').addClass('fat')

Todos los métodos deben aceptar un objeto de opciones opcionales, una cadena que apunta a un método en particular o nada (lo que inicia un complemento con el comportamiento predeterminado):

$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

Cada complemento también expone su constructor sin procesar en una Constructorpropiedad: $.fn.popover.Constructor. Si desea obtener una instancia de complemento en particular, recupérela directamente de un elemento: $('[rel="popover"]').data('popover').

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.

$('#myCollapse').on('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 .

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('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.Defaultobjeto del complemento:

// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false

No conflicto

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 .noConflictal 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 jQuery de Bootstrap a través de la VERSIONpropiedad del constructor del complemento. Por ejemplo, para el complemento de información sobre herramientas:

$.fn.tooltip.Constructor.VERSION // => "4.6.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.

útil

Todos los archivos JavaScript de Bootstrap dependen util.jsy deben incluirse junto con los otros archivos JavaScript. Si está utilizando el compilado (o minimizado) bootstrap.js, no es necesario incluirlo, ya está allí.

util.jsincluye funciones de utilidad y un asistente básico para transitionEndeventos, así como un emulador de transición CSS. Los otros complementos lo utilizan para verificar la compatibilidad con la transición de CSS y para detectar transiciones colgantes.

Desinfectante

La información sobre herramientas y las ventanas emergentes utilizan nuestro desinfectante incorporado para desinfectar las opciones que aceptan HTML.

El valor predeterminado whiteListes el siguiente:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // 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 whiteList, puede hacer lo siguiente:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-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-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Si desea omitir nuestro desinfectante porque prefiere usar una biblioteca dedicada, por ejemplo , DOMPurify , debe hacer lo siguiente:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})