Cómo utilizar componentes Bootstrap sin jQuery
JavaScript nativo se ejecuta más rápido que jQuery, por lo que existen posibles beneficios de rendimiento.
Otro beneficio de rendimiento es el tamaño reducido de la página. Ahora una comparación rápida. bootstrap.js es el script Bootstrap original, bsn.js es el script Bootstrap Native y jq es jQuery. Aquí vemos un paquete que contiene todos los componentes requeridos, pero es importante tener en cuenta que ambas bibliotecas tienen una estructura modular y solo puedes cargar los componentes requeridos y sus dependencias.
1. el rango de tamaño es [38,4, 50.
2. Compatibilidad con el navegador
En cuanto a la compatibilidad con el navegador, es el mismo que el script Bootstrap original basado en jQuery. Comparativamente, las últimas versiones de los principales dispositivos móviles. y se admiten navegadores de escritorio e IE8+. Esto se logra mediante dos estrategias de relleno múltiple
Este código utiliza polirelleno minifill.
4. Eventos personalizados
Muchos componentes de Bootstrap activan eventos durante su ciclo de vida. Por ejemplo, Modal activa dos eventos después de imprimir y cerrar (de hecho, hay dos eventos para cada operación, uno antes de la operación ("mostrar") y otro después de la operación ("abajo")).
El componente Tab también tiene eventos similares para notificar a los observadores cuando se cambia de pestaña: envía un evento de ocultación para la pestaña actual y un evento de presentación para la pestaña que se mostrará.
Bootstrap Native, por otro lado, solo proporciona estos eventos para Carruseles y Botones. El carrusel original activaba un par de eventos al cambiar entre dos diapositivas. Uno es "deslizamiento", que ocurre antes del cambio, y el otro es "deslizamiento", que ocurre después de que finaliza el cambio. El objeto de evento pasado a la función del controlador de eventos tiene dos propiedades relacionadas con el interruptor: dirección y objetivo relacionado. API de programación
La API del componente Bootstrap permite la inicialización y el control mediante JavaScript. Por ejemplo, un componente modal tiene 3 métodos para controlar su visibilidad:
$('#mymodal').modal('show')
$('#mymodal '). modal('ocultar')
$('#mymodal').modal('toggle')
$('#mymodal').modal('toggle' )< / p>
Bootstrap Native generalmente no proporciona estos controles programáticos. Los métodos anteriores ya no funcionan con Modals, Dropdonw, Tab, Alert y Carousel.