¡Bootstrap 5 ha sido lanzado oficialmente! Después de tres versiones alpha, tres betas y varios meses de arduo trabajo. Conjunto a varios lanzamientos de los iconos de bootstrap.
El equipo de Bootstrap ha lanzado definitivamente la versión estable de Bootstrap 5.
Sigue leyendo para conocer los detalles sobre las nuevas novedades en la versión de Bootstrap 5.
Nuevo logotipo de Bootstrap
Uno de los mayores cambios respecto a la versión 5 es el cambio del logotipo, ahora rediseñado e inspirado en el trabajo que el equipo de Bootstrap realizó en los iconos de Bootstrap.
El nuevo logo, agrega el aspecto de llaves a los extremos del logo anterior. Es una pequeña actualización, pero divertida que da un carácter especial a la nueva versión de Bootstrap 5.
Nuevo componente offcanvas
¡Una de las grandes adiciones de componentes nuevos es el nuevo offcanvas!
Basado en y compartiendo piezas fundamentales de los elementos modales ya existentes en Bootstrap, el nuevo componente offcanvas viene con un fondo configurable, un desplazamiento del cuerpo y una ubicación que generan una ventana sobre expuesta al resto del contenido.
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
</div>
</div>
Los componentes Offcanvas se pueden colocar en la parte superior, derecha, inferior o izquierda de la ventana gráfica.
Vas a poder configurar estas opciones con el atributo
data
o mediante las API de JavaScript.
Nuevo acordeón
Se reemplaza el acordeón
.card
por un mejorado componente de
.accordion
intentando dar así, solución a varios problemas existentes.
El nuevo acordeón todavía usa el complemento
collapse
de JavaScript, pero con HTML y CSS personalizados que lo admiten; lo que lo hace mejor y más fácil de usar.
El nuevo acordeón incluye los íconos de Bootstrap como iconos que indican el estado y la funcionalidad de donde se puede hacer Clic.
Además, se ha incluido soporte para un acordeón sin bordes (
.accordion-flush
) que permite una mejor integración del elemento en cualquier lugar.
Nuevos y actualizados formularios
Bootstrap 5, trae una nueva documentación y componentes formularios totalmente revisados.
Se han consolidado los estilos incluidos en los formularios, mediante una nueva sección de formularios, para darles el énfasis que se merecen.
Con la nueva versión de Bootstrap 5, los formularios se han vuelto completamente personalizados.
Botones de selección: check y radio
Con un solo conjunto de controles de formulario y un enfoque unificado en el rediseño. Se logra una apariencia mucho más consistente de los botones de selección.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
Cada casilla de verificación, radio, selección, archivo, rango y más; incluyen una apariencia personalizada que unifica el estilo y el comportamiento de los controles de formulario en el sistema operativo y el navegador.
Todos estos nuevos controles de formulario se basan en controles de formulario estándar completamente semánticos, no más marcas superfluas, solo controles de formulario y etiquetas.
Etiquetas flotantes
Las etiquetas flotantes incluyen soporte para entradas de texto, selecciones y áreas de texto. Con una limitación con las áreas de texto en las que las etiquetas flotantes pueden ocultar varias líneas de texto.
Que se está trabajando por solucionar.
Nueva entrada de archivos
Se ha eliminado la antigua clase
.form-file
por la nueva clase personalizada
.form-control
.
Esto significa que ya no necesitamos JavaScript adicional para que los estilos de las botoneras de las entradas de archivos sean funcionales.
¡El nuevo formulario de entrada de archivos es todo CSS!
Disposición simplificada
Con las nuevas actualizaciones de la cuadrícula (layouts), el diseño y creación de formularios es más fácil y sencillo que nunca.
Mucho más cambios
Se han agregado más cambios, como por ejemplo:
- Se ha aumentado la funcionalidad del API.
- Añadido nuevos atributos para diferentes aspectos del diseño.
- Modificado el nombre de algunas clases y variables.
- Modificado los tamaños por defecto que aplican las clases encargadas de dibujar la interfaz.
- Cambiado LibSASS (desfasado) por Dart SASS.
- Añadido algunas mejoras respecto a el código de Javascript.
Migrar a Bootstrap 5
Desde Bootstrap nos dejan una guía de migración por si quieres actualizar tus proyectos / código.
Instalar Bootstrap 5
Desde el enlace Oficial de la página oficial de Bootstrap o actualizando a la última versión desde el instalador de paquetes NPM.
npm i bootstrap
Esto es todo, seguiremos pendientes de los cambios futuros de Bootstrap, uno de los frameworks CSS más usados y queridos por la comunidad.
Fuente: Blog de Bootstrap