Bootstrap es uno de los frameworks de código abierto más conocidos para diseño de sitios y aplicaciones web. Ahora está desarrollando una nueva versión ya disponible en pruebas, Bootstrap 5, que trae importantes novedades. Si ya utilizas Bootstrap 4 te interesa conocer qué cambios vas a encontrar en la nueva versión. Y si aún no conoces este framework esta es la oportunidad para conocerlo y valorar si es la herramienta que te interesa para desarrollar tus proyectos web y APPs.
Vanilla JS en lugar de jQuery
Desde que se introdujo Bootstrap, utilizó jQuery como una dependencia para ofrecer características dinámicas como expansión de menú, carrusel, menús desplegables, etc. Sin embargo, esta dependencia forzada de jQuery no fue del agrado de muchos desarrolladores que querían usar Bootstrap con marcos de JavaScript modernos como React y Vue.js. Con Bootstrap 5, han eliminado esta dependencia.
Tenga en cuenta que esto no significa que no haya dependencia de JavaScript en Bootstrap 5. Los comportamientos como el menú desplegable, el control deslizante, la ventana emergente, etc. en Bootstrap 5 dependen de Popper, así como de su propio módulo de Vanilla JS. No habrá ningún requisito de agregar jQuery. Si tu proyecto depende de jQuery, aún puedes agregarlo.
Hasta Bootstrap 5 Alpha 3 otras novedades:
- jQuery fue eliminado.
- Bootstrap ahora está escrito con full Vanilla JavaScript.
- Ya no se tendrá soporte para el navegador de Internet Explorer en la versión 10 y 11.
- El Sistema de cuadricula mejorado, ahora se ha incluido un nuevo breakpoint la cuál será usada para dispositivos con dimensión de 1400px o mayores.
- Nueva API disponible, con ella puedes incluir tus propias herramientas y eliminar las proporcionadas por Bootstrap si no las necesitas.
- Los siguientes elementos están disponibles en modo oscuro: Carrusel, Drop Down Menu.
- Rediseño del Botón de Cierre
- Soporte de Offcanvas llega gracias a los nuevos modales secundarios
- Se está agregando utilidades de tamaño de fuente y actualizando de las utilidades de peso de fuente.
Agregándolo manualmente a tu proyecto:
Copia el siguiente código <link> en tu etiqueta <head> antes de todas las demás hojas de estilo para cargar nuestro CSS.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
A continuación coloca el siguiente código <script> justo antes de la etiqueta </body> de cierre.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
Recomendaciones:
Asegúrese de tener sus páginas configuradas con los últimos estándares de diseño y desarrollo. Eso significa usar una etiqueta doctype HTML5 e incluir también una etiqueta de meta, en conclusión tu página se deberá ver de la siguiente manera:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
-->
</body>
</html>
Linkedin @vertegrande
Instagram @holavertegrande