Bootstrap 5: novedades en el framework CSS

Bootstrap es uno de los frameworks más populares para el desarrollo del frontend de páginas web. La herramienta proporciona plantillas para CSS y HTML que facilitan la colocación y el diseño de la página, las fuentes, los botones y los elementos de navegación, de modo que implementar con ella un diseño web moderno resulta muy sencillo.

Desarrollado originalmente para Twitter, el marco de trabajoestá disponible desde hace algún tiempo como proyecto de código abierto gratuito. Ahora, con Bootstrap 5, nace la nueva versión, al menos como versión alfa.

¿Cuándo se lanzará Bootstrap 5?

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. Una gran parte de los cambios previstos ya se ha aplicado, pero aún no ha terminado de desarrollarse y los desarrolladores no han desvelado aún las fechas para su lanzamiento oficial. Por ello, aún no es posible asegurar cuándo saldrá la primera versión beta y la definitiva. Sin embargo, sabemos que en la versión anterior hubo un margen de dos años y medio entre la versión alfa y la final. Al mismo tiempo, se seguirán publicando actualizaciones para la versión 4 del popular framework.

Consejo

¿Aún no conoces Bootstrap y te gustaría aprender lo básico de este framework? En nuestro tutorial de Bootstrap aprenderás cómo empezar a usar esta herramienta. Si aún no sabes si Bootstrap es la solución para tu proyecto, te presentamos las mejores alternativas a Bootstrap.

¿Qué novedades presentará Bootstrap 5?

Bootstrap ha anunciado cientos de cambios para su nueva versión. Muchos de ellos son pequeñas mejoras. Sin embargo, hay algunas novedades relevantes para los usuarios de este framework de código abierto.

Consejo

¿Te gustaría tener una página web profesional? Con nuestro servicio MyWebsite Now, podrás presentar fácilmente tu negocio en Internet.

No será compatible con Internet Explorer

Aunque fue retirado por Microsoft hace mucho tiempo, el navegador Internet Explorer sigue contando con un reducto de fieles usuarios. Sin embargo, al ser tan reducido, Bootstrap 5 ya no será compatible con este navegador. Al volverse obsoleto y carecer de las actualizaciones (Microsoft ofrece en su lugar Edge), se debía añadir mucho código innecesario.

Con el cese de la compatibilidad con Internet Explorer, el tamaño delos proyectos con Bootstrap se reduce, porqueel obsoleto navegador de Microsoft no podía interpretar los métodos de JavaScript más modernos y por ello necesitaba un esfuerzo adicional que se reflejaba, tanto en el tamaño del archivo, como en el trabajo que invertía el programador.

No será compatible con jQuery

Para facilitar el trabajo con JavaScript, muchos diseñadores y desarrolladores web utilizan la biblioteca gratuita jQuery. Bootstrap fue compatible con esta biblioteca durante años, pero ya no lo será en esta nueva versión. Se supone que los usuarios de Bootstrap 5 ya no la necesitarán. Sin jQuery, se podrán crear fácilmente los mismos efectos que antes. Para ello, se deberá utilizar o bien un código JavaScript más avanzado, o se deberá cambiar a HTML y CSS.

Esto significa que los proyectos que se creen ahora con Bootstrap serán más ligeros. El tamaño de los archivos y, por lo tanto, el tiempo de carga, disminuirá. Esto supondrá una mejor experiencia de usuario.

Se introducirán variables CSS

Dado que Internet Explorer ya no será compatible, Bootstrap 5 podrá desarrollar más técnicas modernas de diseño web. Esto incluye las variables CSS. Esta técnica se conoce desde hace tiempo en Sass y Less, y ahora también se ha desarrollado en el CSS clásico. Las variables facilitan el diseño con CSS y permiten crear diseños de página muy modernos.

Grid CSS

Ya en la versión 4 del marco de trabajose podían crear diseños usando grids CSS (cuadrículas). En Bootstrap 5 seguirá siendo igual, pero con extensiones. Con xxl, el equipo introduce un tamaño adicional. Además, se dispondrá de más clases para el espaciado vertical.

Hugo en lugar de Jekyll

Hasta ahora, Bootstrap estaba asociado estrechamente al generador de sitios web estáticos Jekyll. Sin embargo, la herramienta tiene la desventaja de tener que instalarse para poder utilizarse en Ruby. Por ello, los desarrolladores decidieron cambiar a Hugo. Esta herramienta está escrita en el nuevo lenguaje Go y no requiere ningún otro software. Hugo promete, además, ser mucho más rápido que sus competidores.

Nueva API

Para aumentar la flexibilidad e impulsar el desarrollo de Bootstrap, la nueva versión ofrece la posibilidad de incluir bibliotecas y herramientas propias. Anteriormente era solo posible integrar bibliotecas y herramientas externas en un proyecto a través de clases. Ahora, se ha desarrollado una nueva interfaz con Sass. Con ella, puedes incluir tus propias herramientas y eliminar las proporcionadas por Bootstrap si no las necesitas.

Documentación técnica clara

El proyecto Bootstrap, que entre tanto ha crecido enormemente, tendrá una documentación técnica clara que ha sido reorganizada. De esta manera, tanto los usuarios nuevos, como los experimentados, podrán familiarizarse plenamente con el framework. Una novedad radica en la sección de personalización (Customize) que explica al usuario cómo ampliar Bootstrap. También se ha añadido una nueva paleta de colores, que ofrece aún más posibilidades para diseñar directamente dentro del código.

La sección que concierne a los formularios web se ha editado y ahora podrás encontrar información sobre la creación de formularios mucho más rápido. También en este aspecto, Bootstrap 5 ofrecerá mucha flexibilidad en el diseño de elementos como botones, cajas, etc.

Otros cambios confirmados

No todos los cambios están ya incluidos en la versión alfa. Sin embargo, los desarrolladores ya han anunciado algunas funciones cruciales que se incluirán en futuras versiones:

  • Escritura de derecha a izquierda (RTL): los idiomas que se escriben de derecha a izquierda tendrán mejor compatibilidad en el futuro.
  • Menús fuera de lienzo: con los menús fuera de lienzo, aumentarán las posibilidades de diseño de los menús.
  • SVG en HTML: actualmente, los archivos SVG se incrustan a través de CSS. Próximamente, podrá usarse el código HTML en su lugar.
En resumen

Bootstrap 5 no ha reinventado toda su estructura. Esto concuerda con la intención de sus desarrolladores, que pretendían hacer una transición fácil de la versión 4 a la 5. Lo que quizá más costará al principio a los usuarios de Bootstrap será la omisión de jQuery. Sin embargo, después de un período de familiarización, la herramienta presentará más ventajas que inconvenientes. Los cambios prometen unos procesos de trabajo más simples y un código más ligero y rápido.


¡No te vayas! ¡Tenemos algo para ti!
Consigue tu dominio .mx un año gratis.

Introduce el dominio que deseas en la barra de búsqueda para comprobar su disponibilidad.
12 meses desde $0/año
después $700/año