Los componentes discutidos en la sección anterior componentes de diseño son solo el comienzo. Bootstrap viene con 12 complementos jQuery, que extienden las funciones y pueden agregar más interacciones al sitio. Incluso si no es un desarrollador de JavaScript de alto nivel, puede comenzar a aprender sobre el complemento JavaScript para Bootstrap. Con la API de datos de Bootstrap (API de datos Bootstrap), la mayoría de los complementos se pueden activar sin escribir ningún código.
Hay dos formas de consultar el complemento Bootstrap en el sitio :
Referencia individual: archivos individuales *.js usando bootstrap. Algunos componentes de complementos y CSS dependen de otros complementos. Si se refiere a los complementos por separado, asegúrese de solicitar dependencias entre estos complementos primero.
Compilar (simultáneo) Referencia: Use bootstrap.js o versión comprimida de bootstrap.min.js.
"No intente hacer referencia a ambos archivos al mismo tiempo, porque bootstrap.js y bootstrap.min.js contienen todos los complementos".
Todos los complementos dependen de jQuery. Por lo tanto, se debe hacer referencia a jQuery antes del archivo de complemento. Visite Bower.json para ver la versión jQuery de Bootstrap actualmente compatible.
1. Atributos de datos
Puede usar todos los complementos Bootstrap solo a través de la API del atributo de datos sin escribir una sola línea de código JavaScript. Esta es una API de primera clase en Bootstrap y también debe ser su método preferido.
Por otra parte, es posible que esta característica sea desactivada en algunos casos. Por lo tanto, también proporcionamos una forma de cerrar la API del atributo de datos, es decir, deshacer eventos que toman datos-API como espacio de nombres y vinculados al documento. Tal como esto:
$ (documento) .Off ('. Data-API')
Para cerrar un complemento específico, simplemente agregue el nombre del complemento como el espacio de nombres antes del espacio de nombres de datos de API, como se muestra a continuación:
$ (documento) .Off ('. Alert.data-API')
2. API de programación
Proporcionamos una API pura basada en JavaScript para todos los complementos de arranque. Todas las API públicas admiten métodos individuales o de llamadas encadenadas y devuelven el conjunto de elementos en los que operan (nota: de acuerdo con el formulario de llamadas de JQuery). Por ejemplo:
$ (". Btn.danger"). Button ("Toggle"). AddClass ("Fat")Todos los métodos pueden aceptar un objeto de opción opcional como un parámetro, o una cadena que representa un método específico, o sin ningún parámetro (en este caso, el complemento se inicializará como el comportamiento predeterminado), como se muestra a continuación:
// Inicializar al comportamiento predeterminado $ ("#mymodal"). Modal () // Inicializar para no admitir el teclado $ ("#myModal"). Modal ({teclado: falso}) // Inicializar y mostrar $ ("#mymodal"). Modal ('show')Cada complemento también expone su constructor original en la propiedad del constructor: $ .fn.popover.constructor. Si desea obtener una instancia de un complemento específico, puede obtenerlo directamente a través del elemento de página:
$ ('[Rel = Popover]'). Data ('Popover').
3. Evite los conflictos del espacio de nombres
A veces, el complemento Bootstrap puede necesitar usarse con otros marcos de interfaz de usuario. En este caso, pueden ocurrir conflictos del espacio de nombres. Si esto desafortunadamente sucede, puede restaurar su valor original llamando al método .noconflict del complemento.
// devuelve el valor asignado antes de $ .fn.button var bootstraPbutton = $ .fn.button.noconflict () // asigna función de bootstrap a $ (). Bootstrapbtn $ .fn.bootstrapbtn = bootstraPButton
4. Eventos
Bootstrap proporciona eventos personalizados para el comportamiento único de la mayoría de los complementos. En términos generales, estos eventos vienen en dos formas:
Verbo Infinitivo: esto se activará al comienzo del evento. Por ejemplo, ex: show. Los eventos infinitivos verbales proporcionan la función PreventDefault. Esto permite detener la ejecución de la operación antes de que comience el evento.
$ ('#mymodal'). on ('show.bs.modal', function (e) {// evita la visualización de cuadros modales if (! data) return e.preventDefault ()})Formulario de participio pasado: esto se activará después de ejecutar la acción. Por ejemplo, ex: show.
Lo anterior es una descripción general simple del complemento Bootstrap. Espero que sea útil para todos comprender el complemento Bootstrap.