Cómo cambiar de jQuery a Vanilla JavaScript con Bootstrap 5

Bootstrap 5 es un marco CSS gratuito y de código abierto dirigido al desarrollo web front-end receptivo y móvil.

En caso de que no lo supiera, Bootstrap 5 alpha se lanzó oficialmente. Se eliminó jQuery como dependencia, se eliminó el soporte para Internet Explorer 9 y 10, y trae algunas actualizaciones increíbles para los archivos Sass, el marcado y una nueva API de utilidad.

Este tutorial le mostrará cómo comenzar a usar VanillaJS en lugar de jQuery al crear sitios web con la versión más reciente de Bootstrap 5.

Empezando

Deberá incluir Bootstrap 5 en su proyecto. Hay varias formas de hacer esto, pero para simplificar, incluiremos el marco a través de CDN.

En primer lugar, creemos una index.htmlpágina en blanco dentro de una carpeta de proyecto:

     Bootstrap 5 Vanilla JS tutorial by Themesberg    

Incluya la bootstrap.min.csshoja de estilo antes del final de su etiqueta:

Luego, incluya la biblioteca Popper.js y el archivo JavaScript Bootstrap principal antes del final de su etiqueta:

¿Tienes curiosidad por saber qué significan los atributos integrityy crossorigin? Aquí está la explicación:

Atributo de integridad : permite al navegador verificar la fuente del archivo para asegurarse de que el código nunca se cargue si la fuente ha sido manipulada.

Atributo de origen cruzado : está presente cuando se carga una solicitud mediante 'CORS', que ahora es un requisito de la verificación SRI cuando no se carga desde el 'mismo origen'.

¡Excelente! Ahora hemos incluido con éxito la versión más reciente de Bootstrap en nuestro proyecto. Una de las diferencias obvias es que ya no tuvimos que requerir jQuery como dependencia, ahorrando alrededor de 82,54 KB en ancho de banda si está en un estado minificado.

Cambiar de jQuery a Vanilla JS

Antes de comenzar con esta sección, debe saber que aún es posible usar Bootstrap 5 con jQuery de acuerdo con la documentación oficial.

Recomendamos usar Vanilla JavaScript si la única razón por la que ha estado usando jQuery fue para el selector de consultas, porque puede hacer lo mismo con el document.querySelector('#element')como si fuera $('#element').

El primer paso es crear un archivo JavaScript e incluirlo antes del final de la etiqueta del cuerpo, pero después de que los otros dos incluyen:

Entonces, ¿cuándo necesita realmente usar Javascript con Bootstrap 5? Hay ciertos componentes en el marco que funcionan solo si se inicializan a través de Javascript, como información sobre herramientas, ventanas emergentes y tostadas.

Además, con componentes como modales, menús desplegables y carruseles, es posible que desee poder cambiarlos mediante programación en función de la acción del usuario o la lógica de la aplicación.

Inicialización de información sobre herramientas a través de Vanilla JavaScript

A todos nos encanta la información sobre herramientas, pero no funcionan a menos que se inicialicen mediante JavaScript. Primero comencemos creando un elemento de información sobre herramientas dentro de nuestro index.htmlarchivo:

 Tooltip on top 

Al pasar el cursor sobre el botón no se mostrará la información sobre herramientas, porque de forma predeterminada es una función de suscripción de Bootstrap y debe inicializarse manualmente con JavaScript. Si desea hacerlo con jQuery, así es como se vería:

$('#tooltip').tooltip();

Usando Vanilla JS, necesitaría usar el siguiente código para habilitar la información sobre herramientas:

var tooltipElement = document.getElementById('tooltip'); var tooltip = new bootstrap.Tooltip(tooltipElement);

Lo que hace el código anterior es que selecciona el elemento con la identificación única de "información sobre herramientas" y luego crea un objeto de información sobre herramientas de Bootstrap. A continuación, puede utilizarlo para manipular el estado de la información sobre herramientas, como mostrar u ocultar la información sobre herramientas mediante programación.

Aquí hay un ejemplo de cómo puede mostrarlo / ocultarlo mediante métodos:

var showTooltip = true; if (showTooltip) { tooltip.show(); } else { tooltip.hide(); }

Si desea habilitar todas las descripciones emergentes, también puede usar el siguiente código:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')); var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) });

Lo que sucede aquí es que seleccionamos todos los elementos que tienen el data-toggle="tooltip"atributo y el valor e inicializamos un objeto de información sobre herramientas para cada uno. También los guarda en una variable tooltipList.

Alternar la visibilidad de sus elementos usando los métodos Collapse JavaScript

La función de colapso en Bootstrap es otra forma muy útil de mostrar y ocultar elementos a través de atributos de datos o JavaScript.

Este es un ejemplo de cómo podemos mostrar u ocultar una tarjeta cuando se hace clic en un botón determinado. Primero creemos el marcado HTML:

Toggle Card ...
Freecodecamp.org

Awesome resource to learn programming from.

Learn coding for free

Entonces creamos un botón con la identificación toggleCardButtony una tarjeta con la identificación card. Comencemos seleccionando los dos elementos:

var toggleButton = document.getElementById('toggleCardButton'); var card = document.getElementById('card');

Luego, necesitamos crear un objeto plegable usando el elemento de tarjeta recién seleccionado:

var collapsableCard = new bootstrap.Collapse(card, {toggle: false});

Lo que hace la toggle:falsebandera es que mantiene el elemento visible después de crear el objeto. Si no está presente, ocultará la tarjeta de forma predeterminada.

Ahora necesitamos agregar un detector de eventos para el botón para la acción de clic:

toggleButton.addEventListener('click', function () { // do something when the button is being clicked });

Y, por último, necesitamos alternar la tarjeta usando el objeto colapsable que inicializamos así:

toggleButton.addEventListener('click', function () { collapsableCard.toggle(); });

¡Eso es! Ahora la tarjeta se mostrará / ocultará cada vez que se haga clic en el botón. Por supuesto, todo esto podría haberse hecho utilizando la función de atributos de datos de Bootstrap, pero es posible que desee alternar ciertos elementos en función de una llamada a la API o una lógica en su aplicación.

Conclusión

Si ha seguido este tutorial, ahora debería poder usar el marco CSS más popular sin la necesidad de requerir jQuery en su proyecto. ¡Esto le permite guardar hasta 85 KB de datos y hace que su sitio web sea más rápido! Felicidades ?

Si aprecia este tutorial y le gusta usar Bootstrap como un marco CSS para sus proyectos, lo invito a ver algunos de los temas, plantillas y kits de interfaz de usuario gratuitos y premium de Bootstrap que creamos en Themesberg ❤️