En la última semana se lanzó la tan esperada versión 5 de Bootstrap. En este artículo veremos las novedades que llegan en esta versión y cómo pueden ser útiles para nuestro desarrollo si deseamos utilizar este increíble framework en nuestros proyectos.
Cómo instalar el nuevo Bootstrap
Para usar el nuevo Bootstrap, simplemente podemos informar su CDN en nuestras etiquetas y . Esta información está disponible en el sitio de Bootstrap, en el área de descarga.
Otra alternativa es instalar Bootstrap utilizando algún gestor de paquetes, como npm. Para hacer esto, solo necesitas ejecutar npm install bootstrap en tu Terminal.
Entonces, podemos hacer referencia a los archivos CSS y JS de este framework en nuestro código:
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
Ahora que sabemos cómo usar Bootstrap en su versión más actual, vayamos a las novedades en sí.
Nuevo Componente Offcanvas
El nuevo componente offcanvas consiste en un panel lateral que no forma parte del área visible del sitio, pero que puede ser utilizado para mostrar información a los usuarios.
Para utilizarlo necesitamos crear un A continuación, vemos un ejemplo de un offcanvas: Cuando usamos solo la clase “offcanvas”, por defecto nuestro Offcanvas no aparecerá. Sin embargo, al agregar la clase “show” se mostrará: Para hacer este proceso dinámico, podemos crear un botón que manipule cómo se muestra u oculta el Offcanvas en la página. Podemos crearlo dentro de una tarjeta: Tendrá la siguiente apariencia: Lo que hace posible que se abra y cierre el offcanvas es el atributo data-bs-toggle, que deja explícito que el objetivo de este botón es ser como un “interruptor” de nuestro offcanvas y esta información será utilizada por el JavaScript de Bootstrap para ejecutar este comportamiento. Además, el atributo href también es muy importante, porque indica qué offcanvas deseamos abrir o cerrar al hacer clic en el botón. Ahora, al hacer clic en este botón, veremos el offcanvas abrirse y cerrarse: Otra personalización que podemos hacer en este componente es determinar en qué posición de la página colocaremos nuestro offcanvas. Para definir esto, cambiamos la clase que está en la etiqueta de apertura de nuestro offcanvas. Además de tener la clase “offcanvas”, recuerda que también teníamos la clase “offcanvas-start”. Esta clase definía que nuestro offcanvas aparecería a la izquierda de nuestra página. Si cambiamos esta segunda clase a “offcanvas-end”, aparecerá a la derecha de nuestra página: Si definimos la clase como “offcanvas-bottom”, el offcanvas aparecerá en la parte inferior de la página: Y si definimos la clase como “offcanvas-top”, el offcanvas aparecerá en la parte superior de la página: Otra novedad notable fue el nuevo componente de accordion. En versiones anteriores de Bootstrap podíamos crear este componente con la clase “card”. A partir de la versión 5 podremos usar la clase “accordion”. A continuación, vemos un ejemplo de un accordion: El resultado de este código será el siguiente: Además de la clase “accordion”, los atributos data-bs-target y data-bs-toggle son esenciales para que el accordion funcione. Como podemos ver en el ejemplo, al hacer clic en otras opciones, el elemento clicado aparece y los otros se ocultan: Esto es posible gracias al atributo data-bs-parent, que se añade a todas las divs con la clase “accordion-collapse”. Si este atributo se elimina, los elementos que clicamos permanecerán abiertos, incluso si hacemos clic en otras opciones: Con estos conceptos, podemos desarrollar componentes de accordion, que pueden ser útiles en varios contextos en nuestros sistemas. La próxima novedad de la que hablaremos está relacionada con los formularios de Bootstrap. A continuación, comentaremos algunas simplificaciones relacionadas a los formularios, así como la adición de nuevos recursos. A partir de la versión 5 de Bootstrap será posible posicionar los formularios de una manera más simple, utilizando el concepto ya tan conocido de Grid Layout, a través de las clases “row” y “col”. Debido a esta simplificación, las clases “form-group”, “form-row” y “form-inline” fueron eliminadas del Bootstrap 5. Podemos ver cómo posicionar los campos de nuestro formulario con el Grid System en el ejemplo a continuación: El código es mucho más simple, ¿no? El resultado de este código será el siguiente: El próximo recurso que analizaremos son las floating labels, un recurso muy común en la Web Moderna, que consiste en seleccionar el texto de la etiqueta que da la sugerencia para el llenado de un campo y “elevarlo” a la parte superior de nuestro input. Para crear una floating label, necesitamos usar la clase “form-floating” y dentro de ella definir nuestra etiqueta input y label. Mira un ejemplo a continuación: Un detalle muy importante que siempre debemos recordar: es esencial que definamos un placeholder para los inputs de texto. La documentación de Bootstrap informa que esto es necesario porque el framework hará uso del pseudo-selector :placeholder-shown para poder seleccionar el contenido del texto de la etiqueta. Ahora, al ejecutar nuestro código, veremos el siguiente resultado: Ten en cuenta que los campos se han renderizado correctamente. Cuando hacemos clic en alguno de ellos, vemos el siguiente cambio: Ten en cuenta que ahora el texto “Contraseña” aparece un poco más arriba en nuestro input y podemos escribir su contenido. También es posible aplicar este recurso en la etiqueta select. Solo hay que añadir la clase “form-select” a ella y también crear una etiqueta: Con este código veremos el siguiente resultado: Si has estado deseando agregar el concepto de floating labels en tus proyectos, este nuevo recurso de Bootstrap puede ser de gran ayuda. En la versión 5 de Bootstrap también se añadió una mejor estilización para los campos checkbox y radio. Para aplicar estos nuevos estilos, es necesario usar la clase “form-check” en un div que envolverá cada uno de estos campos. Además, debemos hacer uso de las clases “form-check-input” y “form-check-label”, como podemos ver a continuación: El resultado de este código será el siguiente: Ten en cuenta que la estilización de estos campos es mucho más agradable, siguiendo un patrón que se está utilizando bastante en los sistemas más modernos actualmente. Además de mejorar la estilización de campos de formulario existentes, en la versión 5 también se añadió un nuevo estilo para el input conocido como switch, que desempeña el mismo papel que un interruptor. Es muy común, especialmente en aplicaciones móviles, pero ahora también puede ser aplicado en aplicaciones Web. Para usar este nuevo recurso, además de añadir la clase “form-check”, también debemos usar la clase “form-switch”: Este código resultará en lo siguiente: Esta novedad es de hecho bastante interesante, ¿no crees? Aún hablando de formularios, Bootstrap 5 trajo una novedad relacionada a los campos para seleccionar archivos. Para crear un campo de selección de archivos, podemos usar el siguiente código: El resultado será el siguiente: Ten en cuenta que este es otro caso en el que la funcionalidad y estructura del elemento HTML continúan siendo las mismas, pero la estilización ha cambiado, volviéndose también más agradable. Otras novedades que podemos comentar en la versión 5 de Bootstrap son: Todas las novedades mostradas en este artículo fueron presentadas en un video en Hcode Café, nuestro programa semanal sobre programación y tecnología que se transmite en nuestro canal de YouTube. Además de mostrar las novedades, también hicimos comentarios sobre buenas prácticas en el desarrollo y respondimos a las dudas de los inscritos en vivo. Mira la explicación en video haciendo clic aquí. Puedes ver el código desarrollado en este artículo en nuestro GitHub. Esperamos que este artículo te haya ayudado a analizar las novedades de Bootstrap 5 y que la nueva versión de este increíble framework CSS nos ayude a seguir desarrollando proyectos increíbles para la Web. ¡Hasta el próximo artículo! :) Regístrate en la plataforma de cursos y sigue las próximas guías del blog.<div class="offcanvas offcanvas-start show" tabindex="-1" id="miOffCanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Actualización realizada</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Cerrar"></button>
</div>
<div class="offcanvas-body">
En la última semana hicimos un cambio en nuestro sistema. Consulta a continuación las novedades
</div>
</div>
<div class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">Actualizaciones en el Sistema</h5>
<p class="card-text">Tuvimos actualizaciones en nuestro Sistema la última semana. Haz clic en el botón a continuación para saber más</p>
<a class="btn btn-success" data-bs-toggle="offcanvas" href="#miOffCanvas" role="button" aria-controls="miOffCanvas">Ver actualizaciones</a>
</div>
</div>
Nuevo Componente Accordion
<div class="accordion" id="miAccordion" style="width: 50vw;">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#opcionUno" aria-expanded="true" aria-controls="opcionUno">
Curso de Bootstrap
</button>
</h2>
<div id="opcionUno" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#miAccordion">
<div class="accordion-body">
¿Quieres mejorar tu conocimiento en Desarrollo Web con un Framework CSS que aumenta tu productividad y hace que tus proyectos sean cada vez más profesionales? ¿Te gustaría entender las novedades del Bootstrap 4? ¿O será que ha llegado el momento de mejorar tu conocimiento en Bootstrap y entender su estructura y cómo extraer lo mejor de él?
Cualquiera que sea tu motivación, has llegado al lugar correcto.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#opcionDos" aria-expanded="false" aria-controls="opcionDos">
Curso Completo de PHP 7
</button>
</h2>
<div id="opcionDos" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#miAccordion">
<div class="accordion-body">
¿Buscas especializarte como Programador WEB? ¿O tal vez buscas una carrera que ofrezca más tiempo libre y flexibilidad? ¿Siempre has tenido curiosidad por aprender de manera práctica, cómo programar en el lado Back-End?
Cualquiera que sea tu motivación, has llegado al lugar correcto.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#opcionTres" aria-expanded="false" aria-controls="opcionTres">
Dominando Base de Datos con MySQL
</button>
</h2>
<div id="opcionTres" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#miAccordion">
<div class="accordion-body">
¿Te gustaría saber por qué todos los programadores necesitan dominar la base de datos? ¿Cómo se almacenan las informaciones de las empresas y cómo manipular esta información? ¿Quieres convertirte en un programador Web completo?
Cualquiera que sea tu motivación, has llegado al lugar correcto.
</div>
</div>
</div>
</div>
Actualizaciones en los Formularios
Simplificación en el Posicionamiento
<form>
<div class="row">
<label for="primerNombre" class="form-label col-5">Primer Nombre</label>
<div class="col-7">
<input type="text" class="form-control" id="primerNombre" />
</div>
</div>
<div class="row">
<label for="apellido" class="form-label col-5">Apellido</label>
<div class="col-7">
<input type="text" class="form-control" id="apellido" />
</div>
</div>
</form>
Floating Labels
<div class="form-floating">
<input type="email" class="form-control" id="email" placeholder="yo@ejemplo.com" />
<label for="email">Dirección de Email</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="password" placeholder="Tu contraseña" />
<label for="password">Contraseña</label>
</div>
<div class="form-floating">
<select id="selectEstado" class="form-select">
<option value="" selected>Seleccione un estado</option>
<option value="AC">AC</option>
<option value="AL">AL</option>
<option value="AP">AP</option>
…
</select>
<label for="selectEstado">Estado de residencia</label>
</div>
Mejor Estilización de los Campos Checkbox y Radio
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="recordar">
<label class="form-check-label" for="recordar">
Recordar de mí
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="mayoría" id="checkUno">
<label class="form-check-label" for="checkUno">
Menor de edad
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="mayoría" id="checkDos">
<label class="form-check-label" for="checkDos">
Mayor de edad
</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="notificaciones">
<label class="form-check-label" for="notificaciones">Habilitar notificaciones</label>
</div>
Mejor Estilización del Input File
<div>
<label for="foto" class="form-label">Agregar foto a tu perfil</label>
<input class="form-control" type="file" id="foto">
</div>
Otras Novedades
Ve más en YouTube
Conclusión
Sigue aprendiendo con Hcode