Unidad 8: Componentes Principales en Bootstrap

8.1 Botones y Grupos de Botones

Los botones en Bootstrap permiten agregar acciones interactivas en una aplicación con estilos personalizables y diferentes tamaños.

📌 Tipos de Botones (.btn-*)

Bootstrap ofrece varios estilos de botones utilizando clases como .btn-primary, .btn-danger, .btn-success, etc.

Ejemplo de botones básicos

<button class="btn btn-primary">Primario</button>
<button class="btn btn-secondary">Secundario</button>
<button class="btn btn-success">Éxito</button>
<button class="btn btn-danger">Peligro</button>
<button class="btn btn-warning">Advertencia</button>
<button class="btn btn-info">Información</button>
<button class="btn btn-light">Claro</button>
<button class="btn btn-dark">Oscuro</button>

Los botones pueden ser de distintos tamaños:

Ejemplo de botones con tamaños

<button class="btn btn-primary btn-lg">Botón Grande</button>
<button class="btn btn-primary">Botón Normal</button>
<button class="btn btn-primary btn-sm">Botón Pequeño</button>

También pueden mostrarse como enlaces:

Ejemplo de botón como enlace

<a href="#" class="btn btn-primary">Enlace como Botón</a>

📌 Botones con Iconos

Podemos agregar iconos dentro de los botones usando Bootstrap Icons.

Ejemplo de botón con icono

<button class="btn btn-primary">
    <i class="bi bi-check-circle"></i> Aceptar
</button>
<button class="btn btn-danger">
    <i class="bi bi-x-circle"></i> Cancelar
</button>

📌 Grupos de Botones (.btn-group)

Podemos agrupar botones con .btn-group para crear opciones relacionadas.

Ejemplo de grupo de botones

<div class="btn-group">
    <button class="btn btn-primary">Izquierda</button>
    <button class="btn btn-primary">Centro</button>
    <button class="btn btn-primary">Derecha</button>
</div>

También se pueden agrupar verticalmente:

Ejemplo de grupo de botones vertical

<div class="btn-group-vertical">
    <button class="btn btn-success">Opción 1</button>
    <button class="btn btn-success">Opción 2</button>
    <button class="btn btn-success">Opción 3</button>
</div>

📌 Botones con Dropdowns

Podemos integrar botones con menús desplegables (dropdowns).

Ejemplo de botón con menú desplegable

<div class="btn-group">
    <button class="btn btn-primary">Acción</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Opción 1</a></li>
        <li><a class="dropdown-item" href="#">Opción 2</a></li>
        <li><a class="dropdown-item" href="#">Opción 3</a></li>
    </ul>
</div>

8.2 Tarjetas (Cards)

Las tarjetas en Bootstrap (.card) permiten agrupar información en contenedores estilizados con bordes, sombras y elementos adicionales como imágenes, títulos y botones.

📌 Estructura Básica de una Tarjeta

Una tarjeta básica contiene un cuerpo (.card-body) que incluye contenido textual o cualquier otro elemento HTML.

Ejemplo de tarjeta básica

<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">Título de la Tarjeta</h5>
        <p class="card-text">Este es un texto dentro de una tarjeta de Bootstrap.</p>
        <a href="#" class="btn btn-primary">Más información</a>
    </div>
</div>

📌 Tarjetas con Imágenes

Podemos incluir imágenes en la parte superior o inferior de una tarjeta.

Ejemplo de tarjeta con imagen

<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">Tarjeta con Imagen</h5>
        <p class="card-text">Este es un ejemplo de tarjeta con una imagen en la parte superior.</p>
        <a href="#" class="btn btn-primary">Ver más</a>
    </div>
</div>

📌 Tarjetas con Listas y Botones

Podemos agregar listas dentro de las tarjetas utilizando .list-group y .list-group-item.

Ejemplo de tarjeta con lista

<div class="card" style="width: 18rem;">
    <div class="card-header">Encabezado</div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Elemento 1</li>
        <li class="list-group-item">Elemento 2</li>
        <li class="list-group-item">Elemento 3</li>
    </ul>
    <div class="card-body">
        <a href="#" class="btn btn-primary">Acción</a>
    </div>
</div>

📌 Tarjetas en Grilla (.card-group)

Las tarjetas pueden organizarse en una grilla para que tengan el mismo tamaño y alineación.

Ejemplo de grilla de tarjetas

<div class="card-group">
    <div class="card">
        <img src="imagen1.jpg" class="card-img-top" alt="Imagen 1">
        <div class="card-body">
            <h5 class="card-title">Tarjeta 1</h5>
            <p class="card-text">Contenido de la primera tarjeta.</p>
        </div>
    </div>
    <div class="card">
        <img src="imagen2.jpg" class="card-img-top" alt="Imagen 2">
        <div class="card-body">
            <h5 class="card-title">Tarjeta 2</h5>
            <p class="card-text">Contenido de la segunda tarjeta.</p>
        </div>
    </div>
    <div class="card">
        <img src="imagen3.jpg" class="card-img-top" alt="Imagen 3">
        <div class="card-body">
            <h5 class="card-title">Tarjeta 3</h5>
            <p class="card-text">Contenido de la tercera tarjeta.</p>
        </div>
    </div>
</div>

8.3 Alertas y Barras de Progreso

Las alertas en Bootstrap permiten mostrar mensajes visuales destacados en diferentes colores para notificaciones o advertencias. Las barras de progreso facilitan la visualización del estado de una tarea o proceso en curso.

📌 Alertas (.alert- *)

Las alertas pueden tener diferentes colores según su tipo.

Ejemplo de alertas básicas

<div class="alert alert-primary" role="alert">Alerta Azul (Primaria)</div>
<div class="alert alert-success" role="alert">Alerta Verde (Éxito)</div>
<div class="alert alert-danger" role="alert">Alerta Roja (Error)</div>
<div class="alert alert-warning" role="alert">Alerta Amarilla (Advertencia)</div>

- .alert-primary → Información general. - .alert-success → Éxito en una operación. - .alert-danger → Error o fallo. - .alert-warning → Advertencia o precaución.

📌 Alertas con Botón de Cierre

Podemos hacer que las alertas sean descartables agregando un botón de cierre.

Ejemplo de alerta con botón de cierre

<div class="alert alert-info alert-dismissible fade show" role="alert">
    Esta es una alerta con botón de cierre.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button>
</div>

- .alert-dismissible → Permite que la alerta sea cerrada. - .btn-close → Agrega el botón de cierre. - .fade show → Permite una animación de desaparición suave.

📌 Barras de Progreso (.progress)

Las barras de progreso permiten visualizar el estado de una tarea.

Ejemplo de barra de progreso básica

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>

- .progress → Contenedor de la barra de progreso. - .progress-bar → Representa el estado de progreso. - style="width: 50%;" → Define el porcentaje de avance.

📌 Barras de Progreso con Diferentes Colores

Podemos cambiar el color de la barra usando clases de contexto.

Ejemplo de barras de progreso de colores

<div class="progress mb-2">
    <div class="progress-bar bg-success" style="width: 75%;">75%</div>
</div>
<div class="progress">
    <div class="progress-bar bg-danger" style="width: 40%;">40%</div>
</div>

- .bg-success → Barra verde. - .bg-danger → Barra roja.

📌 Barras de Progreso Animadas y Estratificadas

Podemos agregar animaciones o dividir la barra en segmentos de diferentes colores.

Ejemplo de barra de progreso animada

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%;">60%</div>
</div>

- .progress-bar-striped → Agrega un patrón rayado. - .progress-bar-animated → Agrega animación en la barra.

Ejemplo de barra de progreso con múltiples segmentos

<div class="progress">
    <div class="progress-bar bg-primary" style="width: 30%;">30%</div>
    <div class="progress-bar bg-warning" style="width: 40%;">40%</div>
    <div class="progress-bar bg-success" style="width: 30%;">30%</div>
</div>

- Permite combinar diferentes colores en una misma barra.

8.4 Modales y Ventanas Emergentes

Los modales en Bootstrap (.modal) permiten mostrar contenido emergente sobre la página principal. Se utilizan para formularios, confirmaciones, notificaciones, entre otros.

📌 Estructura Básica de un Modal

Un modal está compuesto por: - .modal → Contenedor principal. - .modal-dialog → Define la posición y tamaño. - .modal-content → Contenido del modal. - .modal-header, .modal-body, .modal-footer → Secciones del modal.

Ejemplo de modal básico

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#miModal">Abrir Modal</button>

<div class="modal fade" id="miModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLabel">Título del Modal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                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>

📌 Modales con Formularios

Podemos incluir formularios dentro de los modales para recolección de datos.

Ejemplo de modal con formulario

<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#formModal">Abrir Formulario</button>

<div class="modal fade" id="formModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Formulario en Modal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="nombre" class="form-label">Nombre</label>
                        <input type="text" class="form-control" id="nombre">
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Correo Electrónico</label>
                        <input type="email" class="form-control" id="email">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn btn-primary">Enviar</button>
            </div>
        </div>
    </div>
</div>

📌 Modales de Tamaño Personalizado

Podemos modificar el tamaño del modal con .modal-sm, .modal-lg y .modal-xl.

Ejemplo de modales de diferentes tamaños

<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

📌 Modales Centrados y Desplegables

Los modales pueden centrarse verticalmente y activarse sin desvanecimiento.

Ejemplo de modal centrado

<div class="modal-dialog modal-dialog-centered">...</div>

Ejemplo de modal sin efecto fade

<div class="modal fade show" id="miModal">...</div>

8.5 Menús de Navegación (Navbar)

El componente Navbar en Bootstrap permite crear barras de navegación responsivas y adaptables a cualquier dispositivo.

📌 Estructura Básica de un Navbar

Un navbar se compone de: - .navbar → Contenedor principal. - .navbar-expand-* → Define la responsividad. - .navbar-brand → Representa el logo o nombre de la marca. - .navbar-nav → Contiene los elementos del menú. - .nav-item y .nav-link → Definen los elementos del menú.

Ejemplo de Navbar básico

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Mi Sitio</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Inicio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Acerca</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Servicios</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contacto</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

📌 Navbar Responsivo (.navbar-expand-*)

Podemos hacer que el menú se colapse en tamaños pequeños y se expanda en tamaños mayores (.navbar-expand-sm, .navbar-expand-md, .navbar-expand-lg).

Ejemplo de Navbar responsivo

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Mi Empresa</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a class="nav-link" href="#">Inicio</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contacto</a></li>
            </ul>
        </div>
    </div>
</nav>

📌 Personalización del Navbar

Podemos modificar el color de fondo, alineación y otros estilos usando clases adicionales.

Ejemplo de Navbar con colores personalizados

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Empresa</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCustom">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCustom">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Inicio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Servicios</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contacto</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

8.6 Tooltips y Popovers

Los tooltips y popovers en Bootstrap permiten mostrar información emergente al pasar el cursor sobre un elemento o al hacer clic en él.

📌 Tooltips (.tooltip)

Los tooltips son cuadros de texto pequeños que aparecen cuando el usuario coloca el cursor sobre un elemento.

Activación de Tooltips

Para usar tooltips, es necesario inicializarlos con JavaScript.

Ejemplo de Tooltip básico

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Texto del Tooltip">
    Pasa el cursor aquí
</button>

<script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
</script>

- data-bs-toggle="tooltip" → Activa el tooltip. - data-bs-placement="top" → Define la posición del tooltip (top, bottom, left, right). - Se debe inicializar con JavaScript.

Diferentes Posiciones de Tooltips

Ejemplo de Tooltips con diferentes posiciones

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Arriba">Arriba</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="Derecha">Derecha</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Abajo">Abajo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="Izquierda">Izquierda</button>

---

📌 Popovers (.popover)

Los popovers son cuadros emergentes más grandes que los tooltips y pueden contener títulos y contenido más detallado.

Activación de Popovers

Al igual que los tooltips, los popovers deben ser inicializados con JavaScript.

Ejemplo de Popover básico

<button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-placement="top" title="Título del Popover" data-bs-content="Este es el contenido del popover.">
    Haz clic aquí
</button>

<script>
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl);
    });
</script>

- data-bs-toggle="popover" → Activa el popover. - title="Título del Popover" → Define el título del popover. - data-bs-content="Este es el contenido del popover." → Contenido del popover. - Se debe inicializar con JavaScript.

Popovers con Diferentes Posiciones

Ejemplo de Popovers en diferentes posiciones

<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="top" title="Arriba" data-bs-content="Contenido del popover en la parte superior.">
    Arriba
</button>
<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="right" title="Derecha" data-bs-content="Contenido del popover en la derecha.">
    Derecha
</button>
<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="bottom" title="Abajo" data-bs-content="Contenido del popover en la parte inferior.">
    Abajo
</button>
<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="left" title="Izquierda" data-bs-content="Contenido del popover en la izquierda.">
    Izquierda
</button>

8.7 Otros Componentes

Bootstrap incluye muchos otros componentes útiles que pueden mejorar la funcionalidad y la experiencia del usuario en una aplicación web. A continuación, se presenta una tabla con algunos de estos componentes, su descripción y un enlace a la documentación oficial de Bootstrap.

📌 Tabla de Otros Componentes de Bootstrap

Componente	Descripción	Enlace a la documentación
Breadcrumb	Indica la ruta de navegación de un usuario.	Ver documentación
Carousel	Permite crear carruseles de imágenes y contenido.	Ver documentación
Collapse	Muestra u oculta contenido con animaciones.	Ver documentación
List Group	Crea listas con estilos personalizados.	Ver documentación
Offcanvas	Permite mostrar menús laterales ocultos.	Ver documentación
Pagination	Agrega paginación a listas de contenido.	Ver documentación
Progress	Barra de progreso para representar carga o avance.	Ver documentación
Scrollspy	Destaca enlaces de navegación al hacer scroll.	Ver documentación
Spinner	Indicadores de carga animados.	Ver documentación
Toast	Notificaciones emergentes en pantalla.	Ver documentación
Badge	Etiquetas para resaltar información.	Ver documentación

Estos componentes pueden ser utilizados en diversas situaciones para mejorar la experiencia del usuario y proporcionar una interfaz más interactiva y atractiva.