A continuaci贸n presentamos c贸mo cambiar de jQuery a Vanilla JS con Bootstrap 5, considerando que Bootstrap 5 es un marco de CSS gratuito y de c贸digo abierto dirigido al desarrollo web front-end receptivo y m贸vil.
Recientemente lanzaron Bootstrap 5 alpha, lo que ha eliminado jQuery como una dependencia, sin admitir a Internet Explorer 9 y 10, y trae algunas actualizaciones para archivos Sass, marcado y una nueva API de utilidades.
A continuaci贸n mostraremos los pasos b谩sicos para usar VanillaJS en lugar de jQuery al crear sitios web con la versi贸n reciente de Bootstrap 5.
El proceso de inicio
Se sugiere incluir Bootstrap 5 en el proyecto. Hay varias formas de hacerlo, pero para simplificarlo incluiremos el marco a trav茅s de CDN.
Primero, deberemos crear una p谩gina index.html en blanco dentro de una carpeta de proyecto:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Bootstrap 5 Vanilla JS tutorial by Themesberg</title>
</head>
<body>
</body>
</html>
Despu茅s hay que incluir la hoja de estilo bootstrap.min.css antes del final de su etiqueta <head>:
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css” integrity=”sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I” crossorigin=”anonymous”>
Posteriormente hay que incluir la biblioteca Popper.js y el archivo JavaScript Bootstrap principal antes del final de la etiqueta <body>:
<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js” integrity=”sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo” crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js” integrity=”sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/” crossorigin=”anonymous”></script>
En este caso integrity y crossorigin significan atributos, veamos la raz贸n:
Atributo de integridad: permite que el navegador verifique la fuente del archivo para asegurarse de que el c贸digo no se cargue si la fuente fue manipulada.
Atributo de origen cruzado: se manifiesta cuando se carga una solicitud utilizando ‘CORS’, que es un requisito de comprobaci贸n SRI cuando no se carga desde el ‘mismo origen’.
La 煤ltima versi贸n de Bootstrap tiene como diferencia principal ya no se requiera jQuery como dependencia, ya que ahorra aproximadamente 82.54 KB en ancho de banda en un estado minimizado.
Cambio de jQuery a Vanilla JS
Debemos considerar que usar Bootstrap 5 con jQuery todav铆a es posible de acuerdo con la documentaci贸n oficial.
Recomendamos usar JavaScript de Vanilla si la 煤nica raz贸n por la que se usa jQuery fue para tener el selector de consultas, porque puedes hacer lo mismo con document.querySelector(‘#element’) como si lo fuera $(‘#element’).
Primeramente crearemos un archivo JavaScript para incluirlo antes del final de la etiqueta del cuerpo, pero despu茅s de los otros dos hay que incluir lo siguiente:
<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js” integrity=”sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo” crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js” integrity=”sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/” crossorigin=”anonymous”></script>
<script src=”js/app.js”></script>
Entonces, 驴cu谩ndo se requiere usar Javascript con Bootstrap 5? Hay ciertos componentes en el marco que funcionan solo si se inician a trav茅s de Javascript, como informaci贸n sobre herramientas, popovers y toasts.
Adem谩s, con componentes como modales, men煤s desplegables y carruseles, es posible que quieras cambiarlos mediante programaci贸n en funci贸n de la respuesta del usuario o la l贸gica de la aplicaci贸n.
Inicializaci贸n de herramientas a trav茅s de Vanilla JavaScript
La informaci贸n sobre herramientas no funciona si no se inicializan mediante JavaScript. Primero deberemos crear un elemento de informaci贸n sobre herramientas dentro del archivo index.html:
<button id=”tooltip” type=”button” class=”btn btn-secondary” data-toggle=”tooltip” data-placement=”top” title=”Tooltip on top”>
Tooltip on top
</button>
Al pasar el cursor sobre el bot贸n no mostrar谩 informaci贸n sobre herramientas, ya que de forma predeterminada es una funci贸n opcional de Bootstrap y deber铆a inicializarse de forma manual con JavaScript. Si se quiere hacer con jQuery, se ver铆a:
$(‘#tooltip’).tooltip();
Usando Vanilla JS se requiere utilizar el siguiente c贸digo para habilitar la informaci贸n sobre herramientas:
var tooltipElement = document.getElementById(‘tooltip’);
var tooltip = new bootstrap.Tooltip(tooltipElement);
Este c贸digo selecciona el elemento con la identificaci贸n 煤nica de “informaci贸n sobre herramientas” y crea un objeto de informaci贸n sobre herramientas de Bootstrap. Luego se puede usar eso 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 podr铆a mostrarlo y ocultarlo mediante algunos m茅todos:
var showTooltip = true;
if (showTooltip) {
tooltip.show();
} else {
tooltip.hide();
}
Si deseas habilitar la informaci贸n sobre herramientas, tambi茅n se 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 en este caso, es que seleccionamos los elementos que tienen el atributo data-toggle=”tooltip” y el valor e inicializamos un objeto de informaci贸n sobre herramientas para cada uno. Tambi茅n los guarda en una variable tooltipList.
Visibilizar elementos con m茅todos de colapso JavaScript
La funci贸n de colapso en Bootstrap es otra forma 煤til de mostrar y ocultar elementos mediante atributos de datos o JavaScript.
A continuaci贸n veremos c贸mo mostrar u ocultar una tarjeta cuando se hace clic en cierto bot贸n. Primero creemos el marcado HTML:
<button id=”toggleCardButton” type=”button” class=”btn btn-primary mb-2″>Toggle Card</button>
<div id=”card” class=”card collapse show” style=”width: 18rem;”>
<img src=”https://dev-to-uploads.s3.amazonaws.com/i/rphqzfoh2cbz3zj8m8t1.png” class=”card-img-top” alt=”…”>
<div class=”card-body”>
<h5 class=”card-title”>Freecodecamp.org</h5>
<p class=”card-text”>Awesome resource to learn programming from.</p>
<a href=”#” class=”btn btn-primary”>Learn coding for free</a>
</div>
</div>
Entonces deberemos crear un bot贸n con la identificaci贸n toggleCardButton y una tarjeta con la identificaci贸n card. Tendremos que seleccionar dos elementos:
var toggleButton = document.getElementById(‘toggleCardButton’);
var card = document.getElementById(‘card’);
Necesitaremos crear un objeto de colapso con el elemento de tarjeta seleccionado:
var collapsableCard = new bootstrap.Collapse(card, {toggle: false});
La bandera toggle:false mantendr谩 el elemento visible despu茅s de crear el objeto. Si no est谩 presente, ocultar谩 la tarjeta por configuraci贸n.
Debemos agregar un detector de eventos para el clic de la acci贸n:
toggleButton.addEventListener(‘click’, function () {
// do something when the button is being clicked
});
Finalmente tenemos que alternar la tarjeta con el objeto de colapso que inicializamos de esta forma:
toggleButton.addEventListener(‘click’, function () {
collapsableCard.toggle();
});
Ahora la tarjeta se mostrar谩 y ocultar谩 cada vez que se haga clic en el bot贸n. Todo esto podr铆a haberse hecho utilizando la funci贸n de atributos de datos de Bootstrap, pero da la posibilidad de alternar ciertos elementos en funci贸n de una llamada API o de la l贸gica en la aplicaci贸n.
A manera de conclusi贸n decimos que se puede usar el marco CSS m谩s popular sin la necesidad de requerir jQuery en su proyecto. Esto permitir谩 guardar hasta 85 KB de datos.
Le铆ste: C贸mo cambiar de jQuery a Vanilla JS con Bootstrap 5, te recomendamos: C贸mo Git Bisect ayuda a la depuraci贸n
Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil:聽@tortugacode
