Bootstrap 5 incluye componentes avanzados que mejoran la funcionalidad y la presentación de las interfaces web. Estos componentes son personalizables y están diseñados para ser fáciles de integrar, con estilos modernos y soporte para interactividad. Aquí se desarrolla cada componente detalladamente:
Ver índice del contenido
1. Cards (Tarjetas)
Las tarjetas son contenedores flexibles para contenido variado, como texto, imágenes, enlaces o botones.
Estructura Básica de una Card
<div class="card" style="width: 18rem;">
<img src="imagen.jpg" class="card-img-top" alt="Imagen de ejemplo">
<div class="card-body">
<h5 class="card-title">Título de la tarjeta</h5>
<p class="card-text">Este es un texto breve dentro de la tarjeta.</p>
<a href="#" class="btn btn-primary">Ir a algún lugar</a>
</div>
</div>Cards con Grupos de Contenido
Se pueden agrupar elementos dentro de la tarjeta.
<div class="card">
<div class="card-header">Encabezado</div>
<div class="card-body">
<h5 class="card-title">Título</h5>
<p class="card-text">Texto de ejemplo.</p>
<a href="#" class="btn btn-primary">Leer más</a>
</div>
<div class="card-footer text-muted">Pie de tarjeta</div>
</div>Cards en Rejillas
Para organizar múltiples tarjetas en una fila:
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="imagen1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Descripción de la tarjeta 1.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="imagen2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Descripción de la tarjeta 2.</p>
</div>
</div>
</div>
</div>2. Modals (Modales)
Un modal es una ventana emergente que aparece encima del contenido principal.
Estructura Básica de un Modal
<!-- Botón para abrir el modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Abrir modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Título del Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Este es el contenido del modal.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary">Guardar cambios</button>
</div>
</div>
</div>
</div>Opciones Avanzadas
Puedes personalizar el tamaño del modal usando clases como .modal-lg o .modal-sm.
<div class="modal-dialog modal-lg">...</div>
3. Carousels (Carruseles)
El carrusel es un componente interactivo que permite mostrar contenido como imágenes o texto en forma de diapositivas.
Estructura Básica de un Carousel
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="imagen1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="imagen2.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Anterior</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Siguiente</span>
</button>
</div>Opciones Avanzadas
Puedes controlar el intervalo de cambio entre diapositivas con el atributo data-bs-interval.
<div class="carousel-item" data-bs-interval="2000">...</div>
4. Tabs y Acordeones
Tabs (Pestañas)
Las pestañas son útiles para organizar contenido en secciones.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab">Inicio</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab">Perfil</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel">Contenido de Inicio</div>
<div class="tab-pane fade" id="profile" role="tabpanel">Contenido de Perfil</div>
</div>Acordeones
Los acordeones son ideales para mostrar contenido expandible y colapsable.
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
Sección 1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show">
<div class="accordion-body">
Este es el contenido de la sección 1.
</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="#collapseTwo">
Sección 2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse">
<div class="accordion-body">
Este es el contenido de la sección 2.
</div>
</div>
</div>
</div>Conclusión
Los componentes avanzados de Bootstrap 5, como tarjetas, modales, carruseles, pestañas y acordeones, ofrecen versatilidad para crear interfaces ricas y dinámicas. Experimentar con ellos permite diseñar sitios web atractivos y funcionales con facilidad.