Bootstrap 5 Beta2. ¿qué Ofrece?

Diferencias entre Bootstrap 4 y 5 beta.

by Tibor Kopca Date: 05-04-2021 CSS Bootstrap Desarollo web


Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la construcción de sitios responsivos y mobile-first. Si quieres saber cuáles son los cambios significativos que vienen con la próxima versión 5 que está en beta, sigue leyendo.

Bootstrap 5 Beta2

Bueno, todos conocemos las ventajas de trabajar con Bootstrap: ayuda con el diseño responsivo, podemos producir nuestro trabajo más rápido y más fácil, y es gratis. Después de la alfa que se lanzó oficialmente el 16 de junio de 2020, ahora tenemos la v5.0.0-beta2 que es actualmente la última versión del paquete (lanzada el 7 de diciembre de 2020). Todavía no hay una fecha de lanzamiento oficial de Bootstrap 5, pero como se esperaba ya en el año 2020, hay bastante trabajo realizado en la nueva versión.

El equipo de Bootstrap ha mejorado las características y componentes existentes, ha corregido algunos problemas, ha eliminado la compatibilidad con los navegadores más antiguos, ha dejado de lado jQuery para sustituirlo por JavaScript normal y ha adoptado tecnologías más orientadas al futuro, como las propiedades personalizadas de CSS, como parte de las herramientas de Bootstrap. Hablemos de los cambios con más detalle.

Cambios importantes

En primer lugar, puede ver el nuevo logotipo actualizado.
bootstrap4_and_bootstrap5NewLogo
 

Opciones de alineación del menú desplegable

Antes había algunos problemas, ahora están resueltos y tenemos opciones como dropstart, dropend, documentación separada de texto y color de fondo, navbar con desplazamiento, actualizaciones de formularios.
La carga más rápida se consigue con un tamaño de archivo más ligero en comparación con la versión anterior.

Punto de ruptura más grande - Grid tier XXL

Lo que podría ser útil para la construcción responsiva especialmente en pantallas más grandes es la adición del breakpoint extra grande con clase xxl. Tendríamos un mejor control para dispositivos más grandes como monitores de escritorio con 1400px y más.

Eliminación de JQuery

Puede que estés encantado, puede que estés disgustado, pero lo cierto es que se ha eliminado el JQuerry. Después de más de 8 años no hay necesidad de esta librería, en su lugar se utiliza el Javascript plain vanilla. Suponemos que con menos podemos hacer más aquí..

Bootstrap5_Jquerry

Optimización de la barra de navegación

Todas las barras de navegación requieren ahora un contenedor dentro de navbar para que el contenido sea responsive. Esto debería simplificar los requisitos de espaciado y eliminar la necesidad de extensas sobrecargas de CSS.
Además, también se ha implementado una versión oscura del menú desplegable con fondo negro.


Propiedades personalizadas

Añadir características modernas como las propiedades personalizadas de CSS es posible gracias a la eliminación del soporte de Internet Explorer.
Todas las propiedades personalizadas de bootstrap llevan el prefijo bs- para evitar conflictos con otros CSS.


API de utilidades personalizadas

Ahora hay una utility API - una herramienta basada en Sass para generar clases de utilidades basadas en mapas de Sass. Ahora somos libres de sobrescribir o crear un conjunto de clases de utilidad a través de Sass. También es posible utilizar la opción de estado para generar variaciones de pseudoclases como :focus or :hover .

Eliminado el soporte de IE10,11

Al igual que las versiones anteriores, continúa con el soporte de Google Chrome, Firefox, Internet Explorer, Opera y Safari, que no han cambiado. Sin embargo, ha cambiado el soporte para IE10 e IE11. Si necesitas soporte para Internet Explorer, utiliza Bootstrap 4. Las versiones anteriores de Bootstrap fueron eliminando las versiones anteriores de IE, pero esta vez este navegador de Microsoft parece haber sido prohibido por completo. Esto significa que podemos tener elementos CSS más modernos.


Componentes y espaciado

Se están produciendo cambios engorrosos en el espaciado.
Considerando el renombramiento de algunas variables, utilidades y mixings con algunos nombres más lógicos, por ejemplo left es ahora start y right es ahora end, no estamos impresionados con eso, significa que podemos tener un tiempo difícil para averiguar cuál es el problema cuando tu código no está funcionando debido a algún pequeño cambio en la nomenclatura.
Por ejemplo CSS margin-left es ahora representado por la clase ms-5 (margin start spacer 5), padding-right es ahora pe.

Bootstrap5_spacer

Reescritura de la rejilla para soportar columnas colocadas fuera de las filas

Las clases de columnas ahora pueden ser usadas de forma independiente. Siempre que se utilicen fuera de una .row , no se añadirá el relleno horizontal.


Gutters

Algunas de las clases CSS se han eliminado, como el formulario en línea, pero otras se han añadido, como por ejemplo gutters.
Los medianiles son el relleno entre columnas o filas, utilizado para espaciar y alinear el contenido en un sistema de cuadrícula.
El ancho del canalón se basará en rem en lugar de px.
g-*, gx-*, gy-*

Formularios actualizados

Los formularios están ahora en su categoría principal y soportan etiquetas de formulario que flotan sobre sus campos de entrada.

Bootstrap5_Floating

Paleta de colores ampliada

Han actualizado el sistema de colores para mejorar el contraste de los mismos y han añadido tintes y matices para cada color.
Los colores base azul y rosa son un poco más oscuros.
Ahora están presentes diferentes matices como $blue-300 , etc.
También ahora tenemos documentaciones separadas para el color del texto y el color de fondo.

 

Bootstrap5_Colors

Conjunto propio de iconos SVG

Bootstrap Icons es una biblioteca en crecimiento y en la última versión han añadido un conjunto propio de iconos SVG. Actualmente hay más de 1300 iconos gratuitos de alta calidad. Además, no podríamos estar más contentos de que con la nueva versión venga una nueva alineación de iconos similar a la de FontAwesome.

Bootstrap5_Icons_Grid

Tamaños de Fuentes Responsivos (RFS)

RFS es un motor de redimensionamiento de unidades que ofrece muchas posibilidades para redimensionar prácticamente todos los valores de cualquier propiedad CSS.
Es un mecanismo potenciado por el preprocesador o el postprocesador y calcula automáticamente los valores adecuados para las fuentes en función del tamaño de la pantalla.
Ahora puedes tener un diseño responsivo en forma de maqueta pero además el tamaño de la fuente cambiará dinámicamente por defecto. Esto será útil cuando tengamos que manejar diferentes dispositivos modernos, las fuentes se basan ahora en el viewport del usuario.

Eliminación de Card Decks

La clase de Card Deck se ha eliminado en la beta2 en favor de las tarjetas de rejilla que añade más flexibilidad sobre el comportamiento responsivo.


Migración de la documentación de Jekyll a Hugo escrita en Go.

Además, la separación de Jquery muestra el traslado de la infraestructura de pruebas de QUnit a Jasmine.


Eliminación de Jumbotron

Se elimina el componente Jumbotron.


Popper v2

Los tooltips y popovers son impulsados por la nueva versión de Popper.js.


Cambios que están por venir

    Implementación de un menú fuera del lienzo


Cambios que se están evaluando

    Sistema de módulos Sass
    Mayor uso de las propiedades personalizadas de CSS
    Incorporación de SVGs en HTML en lugar de CSS

Bootstrap5_Icons

Migración a la v5

Seguir y revisar los cambios en los archivos fuente, la documentación y los componentes de Bootstrap para ayudarte a migrar de la v4 a la v5 es posible también en su repositorio oficial de Github. Hasta que el equipo de desarrollo publique la versión estable, es mejor comprobar siempre las cuestiones abiertas o consultar la pestaña de migración directamente en el sitio de Bootstrap.

github.com - migration.md
getbootstrap/com - migración

Conclusión


La última versión, Bootstrap 5, aún en desarrollo, se centra en mejorar el código base de la versión 4 con el menor número posible de cambios importantes. Además, el equipo de desarrollo de Bootstrap ha anunciado que la próxima actualización de la beta podría ser promovida a la versión estable.

En general, estamos entusiasmados de que este importante marco de trabajo de front-end siga evolucionando. Si aún no lo has probado, te recomendamos encarecidamente que lo compruebes.

Imagen by Tibor Kopca

 
by Tibor Kopca Date: 05-04-2021 CSS Bootstrap Desarollo web visitas : 636  
 
Tibor Kopca

Tibor Kopca

From tinkering with computers as a teenager, through a career in datacenter he stepped into web development with full force and started coding. Absorbs all information like a sponge.
Fan of aerospace, engineering, information technologies and watches.

 
 
 

Artículos relacionados

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Creación de un sencillo spinner-loader CSS

En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…

Los mejores selectores de fechas para Bootstrap y tu aplicación

Los selectores de fecha son widgets que permiten a los usuarios elegir una sola fecha o rango de fechas y horas. Es un elemento habitual para todo usuario de Internet,…

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Modo oscuro persistente con CSS y JS

Recientemente escribimos acerca de cómo hacer un modo de color o tema alternativo intercambiable, una característica muy útil y popular para los sitios web. El artículo de hoy tratará sobre…

Modo oscuro en el sitio web usando CSS y JavaScript

En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…

Cómo superponer múltiples imágenes usando CSS?

CSS significa Hoja de Estilo en Cascada. Es un lenguaje de hojas de estilo que define la presentación del documento en un lenguaje de marcado como HTML. La hoja de estilo…

Cómo usar el Masking en CSS

Cuando recortas un elemento usando la propiedad de clip-path, el área recortada se vuelve invisible. Si en cambio quieres hacer opaca una parte de la imagen o aplicarle algún otro…

¿Cuál es la diferencia entre Flexbox y Grid?

Vamos directos al grano e intentemos responder a esta pregunta con explicaciones sencillas. Hay muchas similitudes entre Flexbox y Grid, empezando por el hecho de que se utilizan para el diseño…

Integración de Bootstrap 4 con Vue.js usando Bootstrap-Vue

React y Vue.js son dos marcos de trabajo líderes y modernos de JavaScript para el desarrollo del front-end. Mientras que React tiene una curva de aprendizaje considerable, y un proceso…

Transiciones y Transformaciones CSS : guia básica con ejemplos

Desde el lanzamiento de CSS3, las transiciones permiten a los diseñadores web y desarrolladores web front-end crear animaciones sin necesidad de usar JavaScript. A partir de este mismo año 2019, las…

Cómo hacer animaciones en CSS3

Las animaciones CSS son una alternativa más poderosa que las transiciones. En vez de confiar en el secuencia de un estado inicial a un estado final, las animaciones pueden tener…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración