Los plugins de Bootstrap se pueden incluir individualmente (usando los archivos
js/dist/*.js de cada uno de ellos) o todos juntos mediante el archivo
bootstrap.js o su versión minimizada bootstrap.min.js (incluye solo uno de
ellos, no los dos).
1.5.1. Dependencias
Algunos plugins JavaScript y componentes CSS dependen de otros plugins. Así que si utilizas los plugins individualmente, tienes que comprobar sus dependencias en la documentación y añadirlas a mano.
Al margen de esto, todos los plugins dependen de jQuery, por lo que debes incluir jQuery en la página antes de usar algún plugin. Además, los plugins de dropdowns, popovers y tooltips también dependen de Popper.js.
1.5.2. Atributos data
Todos los plugins de Bootstrap se pueden activar y configurar mediante atributos
de tipo data- en los elementos HTML. Lo único que debes tener en cuenta es que
solo puedes usar un plugin con cada elemento (no puedes añadir por ejemplo
atributos data- para una ventana modal y un tooltip en el mismo botón).
Si por cualquier razón quieres desactivar el uso de estos atributos data-,
añade lo siguiente en tu página:
$(document).off('.data-api');Si solo quieres desactivarlo para un plugin concreto, añade el nombre del plugin por delante:
$(document).off('.alert.data-api');Advertencia Para obtener los elementos DOM en la página, Bootstrap utiliza los métodos
nativos querySelector() y querySelectorAll() por razones de rendimiento.
Estos métodos requieren usar selectores válidos, así que si usas cosas raras
como por ejemplo collapse:Example, tendrás que escapar el selector.
1.5.3. Eventos
Bootstrap define eventos para la mayoría de acciones posibles en un plugin. Su
sintaxis es utilizar el presente para los eventos que se lanzan antes de la
acción (ej. show) y el pasado para los eventos lanzados justo después de la
acción (ej. shown).
Los eventos anteriores a la acción permite usar el método
preventDefault()
para impedir la ejecución de la acción. Si el método que maneja el evento devuelve
false, también se activa el preventDefault():
$('#myModal').on('show.bs.modal', function (e) {
// esto hace que la ventana modal no se muestre
if (!data) return e.preventDefault()
});1.5.4. API programática
Además de los atributos data-, todos los plugins de Bootstrap se pueden
manejar de manera programática mediante una API JavaScript. Todos los métodos de
la API devuelven la colección de elementos sobre la que se están aplicando, así
que los puedes encadenar.
$('.btn.danger').button('toggle').addClass('fat');Los métodos aceptan normalmente o un objeto con las opciones de configuración o una cadena de texto o ningún argumento:
$('#myModal').modal(); // inicializa con los valores por defecto
$('#myModal').modal({ keyboard: false }); // inicializa sin soporte de teclado
$('#myModal').modal('show'); // inicializa y ejecuta el método 'show'Además, los plugins exponen su constructor en una propiedad llamada
Constructor (ej. $.fn.popover.Constructor). Si quieres obtener la instacia
de un plugin, puedes hacerlo directamente a través del elemento (ej.
$('[rel="popover"]').data('popover')).
1.5.4.1. Funciones asíncronas y transiciones
Todos los métodos de la API son asíncronos y devuelven un resultado después de que la transición haya comenzado pero antes de que haya acabado. Si quieres ejecutar una acción después de que la transición haya terminado, tienes que escuchar el evento correspondiente.
$('#myCollapse').on('shown.bs.collapse', function (e) {
// acción a ejecutar cuando el área comprimible se ha expandido completamente
});Además, si ejecutas un método sobre un component cuya transición no ha terminado, se ignorará ese método.
// Este ejemplo SI funciona como se espera
$('#myCarousel').on('slid.bs.carousel', function (e) {
// pasa al segundo elemento en cuanto la transición del primero haya terminado
$('#myCarousel').carousel('2')
});
// Este ejemplo NO funciona como se espera
// empieza la transición al elemento 1, pero retorna antes de terminar...
$('#myCarousel').carousel('1');
// ...esta llamada se ignora!! porque la transición del primer elemento no ha terminado
$('#myCarousel').carousel('2');1.5.4.2. Valores por defecto
Si quieres modificar los valores por defecto de un plugin, usa el objeto
Constructor.Default:
// establece como "false" el valor por defecto de la opción 'keyboard' del plugin Modal
$.fn.modal.Constructor.Default.keyboard = false;1.5.5. Evitando conflictos con otros plugins
En ocasiones se utiliza Bootstrap junto con otras librerías y plugins de
terceros. Como es posible que se produzcan colisiones por plugins que se llaman
igual, puedes usar usar la opción .noConflict para cambiar el nombre de algún
plugin.
// renombrar el plugin "button" a "bootstrapBtn" para evitar conflictos de nombres
var bootstrapButton = $.fn.button.noConflict();
$.fn.bootstrapBtn = bootstrapButton;1.5.6. Números de versión
La propiedad VERSION del constructor de cada plugin indica la versión exacta
del plugin. Por ejemplo, para el plugin tooltip:
$.fn.tooltip.Constructor.VERSION;
1.5.7. Ejecutando Bootstrap con JavaScript desactivado
No es posible ejecutar los plugins de Bootstrap cuando JavaScript está desactivado
en el navegador. En esos casos, utiliza la etiqueta <noscript>
para explicar la situación a tus usuarios y decirles cómo activar el soporte de
JavaScript en sus navegadores.
1.5.8. La librería util.js
Todos los plugins JavaScript de Bootstrap dependen de la librería util.js, que
proporciona utilidades básicas y funciones extra para manejar los eventos de
tipo transitionEnd. Si utilizas la versión compilada bootstrap.js, la
librería util.js ya está incluida. Si no, debes incluirla a mano en todas tus
páginas.