Título: Semana 4

Subtítulo:
Subtítulo: Componentes
adicionales

Nombre:
Nombre: Adrián Alvarado
Ramírez
Introducción
En el video anterior trabajamos las alertas y los modales. En este video, continuaremos trabajando con los
componentes de Bootstrap: la tarjeta y el acordeón.
Tarjeta
La tarjeta facilita presentar contenido en marcos. Estos marcos pueden configurarse de diferentes formas, para
presentar listas, cuadros con encabezados, elementos de navegación entre otros. También pueden
personalizarse empleando las utilidades de texto y fondo que proporciona la herramienta.
Tarjeta
Las clases que se utilizan para definir una tarjeta son 1) “card”, para establecer el contenedor de la tarjeta, la
cual define el borde, entre otros aspectos, y 2) “card-body”, para definir el contenido principal de la tarjeta:

<div class="card">
    <div class="card-body">
        Tarjeta básica
    </div>
</div> 
Tarjeta
Si se agrega un bloque con la clase “card-header”, se crea una tarjeta con encabezado y contenido principal.
Además, se pueden utilizar clases utilitarias como bg-success para cambiar el color de fondo de la tarjeta.

<div class="card bg-success">
    <div class="card-header">
        Encabezado
    </div>
    <div class="card-body">
        Tarjeta personalizada
    </div>
</div>
Tarjeta
Se puede emplear la clase “card-header” en un elemento de tipo <h*> para simplificar el empleo de etiquetas.
Recordemos que los elementos h* son bloques.

<div class="col">
    <div class="card">
        <h5 class="card-
header">Encabezado usando h*</h5>
        <div class="card-body">
            Tarjeta básica
        </div>
    </div>                  
</div>
Tarjeta
Se pueden agregar elementos de acción como botones y enlaces.

<div class="card">
    <h5 class="card-header">Tarjeta con enlaces</
h5>
    <div class="card-body">
        <p class="card-text">
            Esta tarjeta contiene enlaces
        </p>
        <a href="#" class="card-link">Enlace 1</a>
        <a href="#" class="card-link">Enlace 2</a>
    </div>
</div>  
Tarjeta
Esta tarjeta mezcla texto, una lista y además agrega un pie, el cual se centró mediante las utilidades de texto
de Bootstrap.
Tarjeta
<div class="card">
    <h4 class="card-header">Encabezado</h4>
    <div class="card-body">
        <p class="card-text">
Tarjeta con encabezado, lista de ítems y pie. Además se
            centra el texto del pie utilizando las utilidades.
        </p>
    </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-footer text-center">
        Pie de la tarjeta
    </div>
</div>
 
Acordeón
Utilizando la funcionalidad “collapse”, para crear elementos contraíbles, en combinación con las tarjetas, es
posible crear un acordeón, donde se cuenta con un conjunto de bloques, donde se expande 1 bloque a la vez.
Acordeón
<div class="accordion" id="ejemplo-acordeon">
    <!-- Panel 1-->
    <div class="card">
        <div class="card-header">
            <button class="btn btn-primary" data-toggle="collapse" data-target="#panel1">
                Panel 1
            </button>
        </div>
        <div id="panel1" class="card-body collapse" data-parent="#ejemplo-acordeon">
            <p>Contenido del panel 1</p>
        </div>
    </div>
    <!-- Panel 2-->
    <div class="card">
        <div class="card-header">
            <button class="btn btn-primary" data-toggle="collapse" data-target="#panel2">
                Panel 2
            </button>
        </div>
        <div id="panel2" class="card-body collapse" data-parent="#ejemplo-acordeon">
            <p>Contenido del panel 2</p>
        </div>
    </div>
</div>
Acordeón
<div class="accordion" id="ejemplo-acordeon">
    <!-- Panel 1-->
    <div class="card">
        <div class="card-header">
            <button class="btn btn-primary" data-toggle="collapse" data-target="#panel1">
                Panel 1
            </button>
        </div>
        <div id="panel1" class="card-body collapse" data-parent="#ejemplo-acordeon">
            <p>Contenido del panel 1</p>
        </div>
    </div>
    <!-- Panel 2-->
    <div class="card">
        <div class="card-header">
            <button class="btn btn-primary" data-toggle="collapse" data-target="#panel2">
                Panel 2
            </button>
        </div>
        <div id="panel2" class="card-body collapse" data-parent="#ejemplo-acordeon">
            <p>Contenido del panel 2</p>
        </div>
    </div>
</div>
Acordeón
<div class="accordion" id="ejemplo-acordeon">
    <!-- Panel 1-->
    <div class="card">
        <div class="card-header">
            <button class="btn btn-primary" data-toggle="collapse" data-target="#panel1">
                Panel 1
            </button>
        </div>
        <div id="panel1" class="card-body collapse" data-parent="#ejemplo-acordeon">
            <p>Contenido del panel 1</p>
        </div>
    </div>
    <!-- Panel 2-->
    <div class="card">
        <div class="card-header">
            <button class="btn btn-primary" data-toggle="collapse" data-target="#panel2">
                Panel 2
            </button>
        </div>
        <div id="panel2" class="card-body collapse" data-parent="#ejemplo-acordeon">
            <p>Contenido del panel 2</p>
        </div>
    </div>
</div>
Acordeón
<div class="accordion" id="ejemplo-acordeon">
    <!-- Panel 1-->
    <div class="card">
        <div class="card-header">
            <button class="btn btn-primary" data-toggle="collapse" data-target="#panel1">
                Panel 1
            </button>
        </div>
        <div id="panel1" class="card-body collapse" data-parent="#ejemplo-acordeon">
            <p>Contenido del panel 1</p>
        </div>
    </div>
    <!-- Panel 2-->
    <div class="card">
        <div class="card-header">
            <button class="btn btn-primary" data-toggle="collapse" data-target="#panel2">
                Panel 2
            </button>
        </div>
        <div id="panel2" class="card-body collapse" data-parent="#ejemplo-acordeon">
            <p>Contenido del panel 2</p>
        </div>
    </div>
</div>
Gracias