Bootstrap 5, uno de los frameworks front-end más populares, ofrece una variedad de componentes y utilidades útiles que ayudan a los desarrolladores a crear rápidamente sitios web responsivos y visualmente atractivos.

Tarjetas

Las tarjetas son un componente versátil en Bootstrap 5 que le permiten mostrar contenido de una manera limpia y organizada. Son perfectos para mostrar información de una manera estéticamente agradable y funcional.

Estructura básica

Una tarjeta básica consta de un contenedor con la clase .card, que contiene elementos como el encabezado, el cuerpo y el pie de página de la tarjeta.

  

    Featured
  
  

    
Card Title
    
Some quick example text.
    Go somewhere
  
  

    2 days ago
  

Personalización de tarjetas

Puedes personalizar las tarjetas ampliamente:

• Imágenes: Agrega imágenes usando .card-img-top o .card-img-bottom.
• Diseños: utiliza mazos de cartas, grupos o columnas para diferentes diseños.
• Colores: utiliza clases contextuales como .bg-primary, .text-white.

  
Header
  

    
Primary card title
    
Text content goes here.
  

Casos de uso

• Perfiles de usuario: muestra información del usuario con un avatar.
• Listados de productos: muestra productos con imágenes y descripciones.
• Publicaciones de blog: resumir artículos con títulos y extractos.

selector de fechas

Si bien Bootstrap 5 no incluye un selector de fechas nativo, integrar uno es sencillo utilizando bibliotecas de terceros como Tempus Dominus o Bootstrap Datepicker.

Implementación

Primero, incluya los archivos CSS y JS requeridos:

Luego, inicializa el selector de fecha:

Opciones de personalización

• Formatos: Personaliza el formato de fecha.
• Fechas de inicio y finalización: limita el rango de fechas seleccionables.
• Temas: aplica diferentes estilos.

Barra lateral

Las barras laterales son esenciales para la navegación, especialmente en aplicaciones web complejas.

Crear una barra lateral responsiva

Puedes crear una barra lateral responsiva usando el sistema de cuadrícula de Bootstrap y el componente de colapso.

Barras laterales interactivas

Mejore la experiencia del usuario agregando interacción:

• Efectos de desplazamiento: usa CSS para resaltar elementos del menú.
• Menús plegables: implemente submenús que se expandan al hacer clic.
• Iconos: Incorpora íconos usando Font Awesome o Bootstrap Icons.

Caja

Las casillas de verificación permiten a los usuarios seleccionar múltiples opciones de un conjunto.

Estilo de casillas de verificación

Bootstrap 5 proporciona estilos de casilla de verificación personalizados:

  
    Default checkbox
  

Grupos de casillas de verificación

Casillas de verificación de grupo para una mejor organización:

  Select Options:
  

    
  

Pie de página

Los pies de página son cruciales para proporcionar navegación e información adicionales.

Diseño de pies de página

Crear un pie de página simple:

Pies de página adhesivos

Hacer que el pie de página se adhiera a la parte inferior:

html, body {
  height: 100%;
}

#page-content {
  flex: 1 0 auto;
}

#sticky-footer {
  flex-shrink: none;
}

Conclusión

Dominar estos componentes de Bootstrap 5 puede mejorar significativamente la funcionalidad y la estética de sus proyectos web. Si comprende cómo personalizar e implementar Tarjetas, Selectores de fechas, Barras laterales, Casillas de verificación y Pies de página, podrá Cree sitios web fáciles de usar y visualmente atractivos. Continúe experimentando con diferentes estilos y configuraciones para encontrar lo que mejor se adapte a sus necesidades específicas.

Lectura adicional:

• Documentación oficial de Bootstrap
• Personalizar Bootstrap