Evilnapsis

Programming, Hacking and More

Web Development

Probando Bootstrap 5 Alpha 3

Ya es posible probar la version Bootstrap 5 Alpha 3 la cual incluye muchas novedades visuales y de comportamiento, y mas cosas por venir en la versión definitiva de Bootstrap 5.

Para obtener la version 5 de Bootstrap vamos a ir a la siguiente pagina oficial. https://v5.getbootstrap.com/ y vamos a descargar los archivos CSS y JS necesarios.

Debemos crear un documento HTML e incluir los archivos CSS y JS de bootstrap y ya podemos empezar a probar.

Colores

Lo primero que vamos a notal con Bootstrap 4 es un pequeño cambio en los colores por defecto de los botones, alertas, badges, navbar y otros componentes.

Componentes

Ahora vamos a ver algunas novedades en algunos de sus componentes.

Accordion

Parece que el Componente Accordion se ha convertido en un nuevo componente, recordemos que en versiones anteriores el accordion se lograba con el componente collapse.

Accordion Flush

Otra novedad del accordion es la variante Accordion Flush, que agrega un fondo de color grid y se eliminan los bordes redondeados para que se acople mejor a un contenedor.

Carousel

El carousel o slider tambien se actualizo un poco en apariencia y se agrego una variante dark donde el texto es color negro o dark.

Formularios

En los formularios se agregaron nuevas actualizaciones a los componentes.

Select

Se agrego una clase form-select para los combobox, tambien estan las variantes form-select-lg y form-select-sm para hacer mas grande o pequeño el componente.

File input

Se actualizaron los componentes de file input para dar una mejor apariencia.

Utilidades

En utilidades se le da un poco mas de uso a las clases bg-* para cambiar fondo, p-* para agregar padding.

Se elimino el componente jumbotron y ahora se puede lograr el mismo comportamiento usando las clases bg-light p-3

Tambien se elimino la clase btn-block en su lugar se puede usar el d-grid que convierte en bloques todo lo que esta dentro.

<div class="d-grid">
<a href="" class="btn btn-primary">Boton</a>
<div>

Conclusiones

El desarrollo de Bootstrap 5 lleva buen camino, esperamos pronto hacer otro artículos con mas novedades cuando se lance una beta o una version oficial.

Si aun no estas usando bootstrap, que usas? o que esperas para empezar a usar bootstrap?

Saludos a todos

Agustin Ramos

Desarrollador de Software

Leave a Reply