Cards o tarjetas es un contenedor de contenido flexible y extensible. Incluye opciones para encabezados y pies de página, una amplia variedad de contenido, colores de fondo contextuales y opciones de visualización potentes.
Si está familiarizado con Bootstrap 3, las cards reemplazan a panels, wells, y thumbnails. La funcionalidad es similar a esos componentes que están disponible como clases modificadoras para cards.Card layout
Utilice grupos de cards para representar las cards como un solo elemento adjunto con columnas de anchura y altura iguales. Los grupos de cards utilizandisplay:flex;
para lograr su tamaño uniforme
<div class="card-group"<<div class="card"<
<img class="card-img-top" src="..." alt="Card image cap"<
<div class="card-block"<
<h4 class="card-title"<Titulo de Card</h4<
<p class="card-text"<Ésta es una tarjeta más ancha con el texto de apoyo abajo como entrada natural al contenido adicional. Este contenido es un poco más largo.</p<
<p class="card-text"<<small class="text-muted"<Última actualización hace 3 minutos</small<</p<
</div<
</div<
<div class="card"<
<img class="card-img-top" src="..." alt="Card image cap"<
<div class="card-block"<
<h4 class="card-title"<Titulo de Card</h4<
<p class="card-text"<Esta tarjeta tiene el texto de apoyo a continuación como un lead-in natural a contenido adicional.</p<
<p class="card-text"<<small class="text-muted"<Última actualización hace 3 minutos</small<</p<
</div<
</div<
<div class="card"<
<img class="card-img-top" src="..." alt="Card image cap"<
<div class="card-block"<
<h4 class="card-title"<Titulo de Card</h4<
<p class="card-text"<Ésta es una tarjeta más ancha con el texto de apoyo abajo como entrada natural al contenido adicional. Esta tarjeta tiene un contenido aún más largo que el primero para mostrar que la acción de altura igual.</p<
<p class="card-text"<<small class="text-muted"<Última actualización hace 3 minutos</small<</p<
</div<
</div<
</div<
Estilos de Card
Las cards incluyen varias opciones para personalizar sus fondos, bordes y color.De forma predeterminada, las cards utilizan texto oscuro y asumen un fondo claro. Usted puede invertir eso cambiando el color del texto dentro, así como el de los subcomponentes de la tarjeta, con .card-inverse
. A continuación, especifique un background-color
oscuro y un border-color
para ir con él.
También puede utilizar .card-inverse
con las variantes contextuales de fondos
<div class="card-block"<
<h3 class="card-title"<Special title treatment</h3<
<p class="card-text"<Con el texto de apoyo a continuación, como una introducción natural al contenido adicional.</p<
<a href="#" class="btn btn-primary"<Ve a algún lugar
</a<
</div<
</div<
Tipos de contenidos
Las cards admiten una amplia variedad de contenido, incluyendo imágenes, texto, grupos de listas, enlaces y más. A continuación se muestran ejemplos de lo que se admiteBlocks
El bloque de construcción de una cards es el.card-block
. Úselo siempre que necesite una sección acolchada dentro de una tarjeta.
Ejemplo de Blocks
<div class="card"<<div class="card-block">Este es un texto dentro de un bloque de tarjetas.</div<
</div<
Titulos, textos y links
Los títulos de las cards se utilizan añadiendo.card-title
a una etiqueta <h*<
. De la misma manera, los enlaces se agregan y colocan uno junto al otro añadiendo .card-link
a una etiqueta <a<
.
Los subtítulos se usan añadiendo un subtítulo .card-subtitle
a una etiqueta <h *<. Si los elementos .card-title
y .card-subtitle
se colocan en un elemento .card-block
, el título de la tarjeta y el subtítulo están bien alineados.
Ejemplo de Subtitulo
<div class="card"<<div class="card-block"<
<h4 class="card-title"<Titulo de la tarjeta</h4<
<h6 class="card-subtitle mb-2 text-muted"<Subtitulo de la tarjeta</h6<
<p class="card-text"<Algunos ejemplos rápidos de texto para construir sobre el título de la tarjeta y componen la mayor parte del contenido de la tarjeta.</p<
<a href="#" class="card-link"<Card link</a<
<a href="#" class="card-link"<Another link</a<
</div<
</div<
Imagenes
.card-img-top
coloca una imagen en la parte superior de la tarjeta. Con .card-text
, se puede agregar texto a la tarjeta. El texto dentro de .card-text
también se puede diseñar con las etiquetas HTML estándar.
Ejemplo de Imagenes
<div class="card"<<img class="card-img-top" src="..." alt="Card imagen"<
<div class="card-block"<
<p class="card-text"<Ejemplos rápidos de texto para construir sobre el título de la tarjeta y componen la mayor parte del contenido de la tarjeta.</p<
</div<
</div<
Lista de grupos
Crear una lista de contenido en una tarjeta con un grupo de lista de color.Ejemplo de lista de grupos
<div class="card"<<ul class="list-group list-group-flush"<
<li class="list-group-item"<Opcion 1</li<
<li class="list-group-item"<Opcion 2</li<
<li class="list-group-item"<Opcion 3</li<
</ul<
</div<
Kitchen sink
Mezcla y combina varios tipos de contenido para crear la tarjeta que necesitas. A continuación se muestran image styles, blocks, text styles, y list group—all wrapped en fixed-width card., todos ellos envueltos en una tarjeta de ancho fijo.Ejemplo de Kitchen sink
<div class="card" style="width:20rem;"<<img class="card-img-top" src="..." alt="Card image cap"<
<div class="card-block"<
<h4 class="card-title"<Card title</h4<
<p class="card-text"<Algunos ejemplos rápidos de texto para construir sobre el título de la tarjeta y componen la mayor parte del contenido de la tarjeta.</p<
</div<
<ul class="list-group list-group-flush"<
<li class="list-group-item"<Opcion 1</li<
<li class="list-group-item"<Opcion 2</li<
<li class="list-group-item"<Opcion 3</li<
</ul<
<div class="card-block"<
<a href="#" class="card-link"<Link de tarjeta</a<
<a href="#" class="card-link"<Otro enlace</a<
</div<
</div<