Bootstrap 5: La nueva versión de Bootstrap, el framework más popular de desarrollo web

Bootstrap 5 es la nueva versión del framework más papular, esta vez lanzó nuevas características como la independecia de jQuery y algunas mejoras en las propiedades personalizadas de CSS. Todo esto con el fin de crear herramientas que sean favorables para el futuro.

Características de Bootstrap 5:

Algunas de las características más resaltantes en esta nueva versión del framework más popular es su nueva apariencia, simplicidad de las propiedades de css para la personalización, mejora en la documentanción y uno de los más grandes cambios es la independencia de jQuery, pues ya no es necesario implementarlo a nuestro proyecto para poder utilziar Bootstrap 5!. A continuación te detallamos cada una de estas nuevas características de esta nueva versión.

Nueva apariencia

Unos de los cambios de esta nueva versión empiezan en la mejora del diseño de la página donde deja de ser menos como una aplicación y más como contenido. Además, incluye una actualización en la barra lateral para usar secciones expandibles para una navegación más rápida. Por otro lado, hay un nuevo logotipo inspirado en las llaves “{ }” que a menudo se usa en CSS.

jQuery y JavaScritp

El equipo de Bootstrap argumenta que jQuery ha sido un factor complejo en el comportamiento de JavaScript durante más de una década. En esta nueva versión, la dependencia de jQuery se ha eliminado, además, el tamaño del archivo y la carga de la página se reducirán considerablemente. Sin embargo, se comenta que la activación de JavaScript en sí misma aportada por jQuery es lo más importante y agradecen a todos los interesados ​​en jQuery.

Propiedades personalizadas CSS

Como se mencionó, se ha comenzado a usar propiedades personalizadas de CSS, gracias a la eliminación de la compatibilidad con Internet Explorer. Por ejemplo, en esta nueva versión, puede establecer elementos de tabla con propiedades personalizadas CSS. Cabe mencionar que, Bootstrap está haciendo esfuerzos para utilizar más Sass y CSS para crear un sistema más flexible.

.table {

 --bs-table-bg: #{$table-bg};

 --bs-table-accent-bg: transparent;

 --bs-table-striped-color: #{$table-striped-color};

 --bs-table-striped-bg: #{$table-striped-bg};

 --bs-table-active-color: #{$table-active-color};

 --bs-table-active-bg: #{$table-active-bg};

 --bs-table-hover-color: #{$table-hover-color};

 --bs-table-hover-bg: #{$table-hover-bg};

 // Styles here...

}

Mejora de documentos

Muestra mejoras de la documentación en varios lugares, dando más explicaciones, eliminando ambigüedades y brindando mucho más soporte para extender Bootstrap. También proporcionan proyecto npm de inicio para que pueda comenzar de manera más rápida y fácil para poder encontrar como un repositorio de plantillas en GitHub.

Por otro lado, la paleta de colores también se ha ampliado en está nueva versión ya que, es posible personalizar la apariencia sin abandonar la base del código.  El contraste de color e incluso proporcionando métricas de contraste al documento, también son parte de las mejoras en esta nueva versión de Bootstrap.

Mejora de formularios

En esta nueva versión se da a conocer que todos los formularios se implementan con una apariencia para unificar el estilo y el comportamiento del formulario en el sistema operativo y los navegadores.

Bootstrap 5

API de utilidades

Bootstrap dice: "Me encantan las nuevas e interesantes bibliotecas y kits de herramientas CSS que muchas personas han creado en la web durante más de una década", sumando a esta idea aporto que coexistirán con otras bibliotecas CSS en la versión 5, anunciando para implementar una nueva API de utilidad.

Recuerde que en la clase global "$ enable- *" ya se implementó en la versión 4 por ende, la versión 5 la hereda. Sin embargo, el enfoque basado en API también hizo posible escribir el lenguaje y la sintaxis en Sass para crear, modificar o eliminar fácilmente sus propias utilidades.

Docs

Se cambio el generador de sitios estáticos de documentación de Jekyll a Hugo. Jekyll ha sido durante mucho tiempo el generador de elección dado lo fácil que es ponerlo en funcionamiento y su simplicidad con la implementación en las páginas de GitHub.

Desafortunadamente, se llegó a dos problemas principales con Jekyll a lo largo de los años:

  1. Jekyll requiere que se instale Ruby
  2. La generación del sitio fue muy lenta

En cambio, Hugo está escrito en Go por lo que no tiene dependencias externas de tiempo de ejecución y es mucho más rápido.

El equipo de Bootstrap también planea implementar nuevas características como RTL, offcanvas y más, como también mejoras en la documentación, correcciones de errores entre otros.

Para empezar, dirígete a la página oficial de Bootstrap 5 y explora la nueva versión.

Robin Villegas

Sin tiempo no hay futuro, pero con tiempo puedes perderte el presente.

×