¿Por qué Bootstrap 5 dejo de usar jQuery? y ¿Qué es lo que viene?

17108

Sí, leíste bien: La versión de Bootstrap 5 ya no incluirá jQuery, ahora será ¡JavaScript puro! pues prometen que en esta versión será más rápida, tendrá menos dependencias y contará con una mejor API.

¿Aún quieres usar jQuery? ¡Es posible!

Si Bootstrap detecta que declaramos una sentencia con jQuery en el objeto window, agregará todos nuestros componentes en el sistema de complementos de jQuery. Ejemplo: En lugar de usar addEventListener, tendrás que hacer lo siguiente:

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

Pero ¿Cuándo estará disponible?

Bootstrap 5 está disponible desde el 16 de junio de 2020 en versión alfa, así que todavía se considera en fase de prueba. Aún no se develan las fechas para su lanzamiento oficial, pero estos son algunos de las novedades que se han implementado y que desde ya puedes usar:

Bootstrap 5 Alpha1:

• 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.

Bootstrap 5 Alpha 2
• Los siguientes elementos están disponibles en modo oscuro: Carrusel, Drop Down Menu.
• Rediseño del Botón de Cierre

Bootstrap 5 Alpha 3
• 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.

Y ¿Cómo puedo usarlo?

Puedes instalarlo desde la consola si usas alguno de estos:

NPM:
npm install bootstrap@next

YARN
yarn add bootstrap@next

RubyGems
gem 'bootstrap', '~> 5.0.0.beta2'

COMPOSER
composer require twbs/bootstrap:5.0.0-beta2

NuGet
Install-Package bootstrap

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/[email protected]/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.

<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/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><htmllang="en"><head><!-- Required meta tags --><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><!-- Bootstrap CSS --><linkhref="https://cdn.jsdelivr.net/npm/[email protected]/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 --><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
    --></body></html>

En resumen

Bootstrap 5 ha hecho cambios muy notables al quitar jquery de su sistema, y a
futuro presentará más ventajas que inconvenientes, pues trabajaremos con los componentes que ya conocíamos de Bootstrap (más los que se van agregando en el camino), ahora será más ligero y rápido en el rendimiento de nuestras páginas WEB.

Cuéntame, ¿Te ha gustado esta nueva actualización de Bootstrap? ¿Qué es lo que le cambiarias?

Puedes mantenerte al tanto de sus nuevas actualizaciones en la siguiente página oficial de Bootstrap:

https://blog.getbootstrap.com/

hace 4 años