Tarxetas
As tarxetas de Bootstrap ofrecen un contedor de contido flexible e extensible con múltiples variantes e opcións.
Sobre
Unha tarxeta é un contedor de contido flexible e extensible. Inclúe opcións para cabeceiras e pés de páxina, unha gran variedade de contidos, cores de fondo contextuais e poderosas opcións de visualización. Se estás familiarizado con Bootstrap 3, as tarxetas substitúen aos nosos antigos paneis, pozos e miniaturas. Unha funcionalidade similar a eses compoñentes está dispoñible como clases modificadoras para tarxetas.
Exemplo
As tarxetas constrúense co menor marcado e estilos posibles, pero aínda así conseguen ofrecer moito control e personalización. Construídos con flexbox, ofrecen un aliñamento sinxelo e mestúranse ben con outros compoñentes de Bootstrap. Non teñen marginpor defecto, polo que use as utilidades de espazamento segundo sexa necesario.
A continuación móstrase un exemplo de tarxeta básica con contido mixto e ancho fixo. As tarxetas non teñen un ancho fixo para comezar, polo que encherán naturalmente todo o ancho do seu elemento principal. Isto pódese personalizar facilmente coas nosas distintas opcións de tamaño .
Título da tarxeta
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
Vai a algún lado<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Tipos de contido
As tarxetas admiten unha gran variedade de contido, incluíndo imaxes, texto, grupos de listas, ligazóns e moito máis. Abaixo amósanse exemplos do que se admite.
Corpo
O bloque de construción dunha tarxeta é o .card-body. Utilízao sempre que necesites unha sección acolchada dentro dunha tarxeta.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Títulos, texto e ligazóns
Os títulos das tarxetas úsanse engadindo .card-titlea unha <h*>etiqueta. Do mesmo xeito, as ligazóns engádense e colócanse unha á beira das outras engadindo .card-linka unha <a>etiqueta.
Os subtítulos úsanse engadindo un .card-subtitlea unha <h*>etiqueta. Se os .card-titleelementos e .card-subtitlese colocan nun .card-bodyelemento, o título e o subtítulo da tarxeta están ben aliñados.
Título da tarxeta
Subtítulo da tarxeta
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
Ligazón da tarxeta Outra ligazón<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>Imaxes
.card-img-topcoloca unha imaxe na parte superior da tarxeta. Con .card-text, pódese engadir texto á tarxeta. O texto dentro .card-texttamén se pode estilizar coas etiquetas HTML estándar.
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>Lista de grupos
Crea listas de contido nunha tarxeta cun grupo de listas de descarga.
- Cras justo odio
- Dapibus ac facilisis in
- Vestíbulo no eros
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>- Cras justo odio
- Dapibus ac facilisis in
- Vestíbulo no eros
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>- Cras justo odio
- Dapibus ac facilisis in
- Vestíbulo no eros
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>Pía da cociña
Mestura e combina varios tipos de contido para crear a tarxeta que necesitas ou bótao todo alí. A continuación móstranse estilos de imaxe, bloques, estilos de texto e un grupo de listas, todo envolto nunha tarxeta de ancho fixo.
Título da tarxeta
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
- Cras justo odio
- Dapibus ac facilisis in
- Vestíbulo no eros
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>Cabeceira e pé de páxina
Engade un encabezado e/ou pé de páxina opcional nunha tarxeta.
Tratamento especial do título
Con texto de apoio a continuación como inicio natural de contido adicional.
Vai a algún lado<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>As cabeceiras das tarxetas pódense modificar engadindo .card-headeraos <h*>elementos.
Destacado
Tratamento especial do título
Con texto de apoio a continuación como inicio natural de contido adicional.
Vai a algún lado<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>Tratamento especial do título
Con texto de apoio a continuación como inicio natural de contido adicional.
Vai a algún lado<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>Talla
As tarxetas non supoñen un inicio específico width, polo que terán un ancho 100 % a non ser que se indique o contrario. Podes cambialo segundo sexa necesario con CSS personalizados, clases de cuadrícula, mesturas de Sass de cuadrícula ou utilidades.
Usando o marcado de cuadrícula
Usando a grade, envolve as tarxetas en columnas e filas segundo sexa necesario.
Tratamento especial do título
Con texto de apoio a continuación como inicio natural de contido adicional.
Vai a algún ladoTratamento especial do título
Con texto de apoio a continuación como inicio natural de contido adicional.
Vai a algún lado<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>Usando utilidades
Use o noso puñado de utilidades de tamaño dispoñibles para definir rapidamente o ancho dunha tarxeta.
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>Usando CSS personalizado
Use CSS personalizado nas súas follas de estilo ou como estilos en liña para establecer un ancho.
Tratamento especial do título
Con texto de apoio a continuación como inicio natural de contido adicional.
Vai a algún lado<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Aliñación do texto
Podes cambiar rapidamente a aliñación do texto de calquera tarxeta (na súa totalidade ou partes específicas) coas nosas clases de aliñamento de texto .
Tratamento especial do título
Con texto de apoio a continuación como inicio natural de contido adicional.
Vai a algún ladoTratamento especial do título
Con texto de apoio a continuación como inicio natural de contido adicional.
Vai a algún ladoTratamento especial do título
Con texto de apoio a continuación como inicio natural de contido adicional.
Vai a algún lado<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-right" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Navegación
Engade algo de navegación á cabeceira (ou bloque) dunha tarxeta cos compoñentes de navegación de Bootstrap .
Tratamento especial do título
Con texto de apoio a continuación como inicio natural de contido adicional.
Vai a algún lado<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Tratamento especial do título
Con texto de apoio a continuación como inicio natural de contido adicional.
Vai a algún lado<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Imaxes
As tarxetas inclúen algunhas opcións para traballar con imaxes. Escolle entre engadir "caps de imaxe" a cada extremo dunha tarxeta, superpoñer imaxes co contido da tarxeta ou simplemente inserir a imaxe nunha tarxeta.
Capas de imaxe
Do mesmo xeito que os encabezados e os pés de páxina, as tarxetas poden incluír "caps de imaxe" superior e inferior: imaxes na parte superior ou inferior dunha tarxeta.
Título da tarxeta
Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Este contido é un pouco máis longo.
Última actualización hai 3 minutos
Título da tarxeta
Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Este contido é un pouco máis longo.
Última actualización hai 3 minutos
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-bottom" alt="...">
</div>Superposicións de imaxes
Converte unha imaxe nun fondo de tarxeta e superpoña o texto da túa tarxeta. Dependendo da imaxe, pode ou non necesitar estilos ou utilidades adicionais.
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>Teña en conta que o contido non debe ser maior que a altura da imaxe. Se o contido é maior que a imaxe, o contido mostrarase fóra da imaxe.
Horizontal
Usando unha combinación de clases de rede e utilidade, as tarxetas pódense facer horizontais de forma adaptada aos móbiles e á resposta. No seguinte exemplo, eliminamos as cunetas da reixa .no-gutterse usamos .col-md-*clases para facer a tarxeta horizontal no punto de mdinterrupción. É posible que sexan necesarios máis axustes dependendo do contido da túa tarxeta.
Título da tarxeta
Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Este contido é un pouco máis longo.
Última actualización hai 3 minutos
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>Estilos de tarxeta
As tarxetas inclúen varias opcións para personalizar os seus fondos, bordos e cor.
Fondo e cor
Use utilidades de texto e fondo para cambiar a aparencia dunha tarxeta.
Título da tarxeta principal
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
Título da tarxeta secundaria
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
Título da tarxeta de éxito
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
Título da tarxeta de perigo
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
Título da tarxeta de advertencia
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
Título da tarxeta de información
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
Título da tarxeta lixeira
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
Título da tarxeta escuro
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>Transmitir significado ás tecnoloxías de asistencia
Usar cor para engadir significado só proporciona unha indicación visual, que non se transmitirá aos usuarios de tecnoloxías auxiliares, como lectores de pantalla. Asegúrese de que a información indicada pola cor sexa obvia desde o propio contido (por exemplo, o texto visible) ou se inclúa a través de medios alternativos, como o texto adicional oculto coa .sr-onlyclase.
Borde
Use as utilidades de bordo para cambiar só a border-colortarxeta dunha tarxeta. Teña en conta que pode poñer .text-{color}clases no pai .cardou nun subconxunto do contido da tarxeta como se mostra a continuación.
Título da tarxeta principal
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
Título da tarxeta secundaria
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
Título da tarxeta de éxito
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
Título da tarxeta de perigo
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
Título da tarxeta de advertencia
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
Título da tarxeta de información
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
Título da tarxeta lixeira
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
Título da tarxeta escuro
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-info">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>Mixins utilidades
Tamén pode cambiar os bordos da cabeceira e do pé de páxina da tarxeta segundo sexa necesario, e incluso eliminalos background-colorcon .bg-transparent.
Título da tarxeta de éxito
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>Disposición da tarxeta
Ademais de dar estilo ao contido das tarxetas, Bootstrap inclúe algunhas opcións para organizar series de tarxetas. Polo momento, estas opcións de deseño aínda non responden .
Grupos de tarxetas
Usa grupos de tarxetas para renderizar tarxetas como un único elemento anexo con columnas de igual ancho e altura. Os grupos de tarxetas comezan apilados e adoitan display: flex;unirse con dimensións uniformes a partir do punto de sminterrupción.
Título da tarxeta
Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Este contido é un pouco máis longo.
Última actualización hai 3 minutos
Título da tarxeta
Esta tarxeta ten texto de apoio a continuación como un inicio natural de contido adicional.
Última actualización hai 3 minutos
Título da tarxeta
Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Esta tarxeta ten un contido aínda máis longo que a primeira para mostrar esa acción de igual altura.
Última actualización hai 3 minutos
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>Ao utilizar grupos de tarxetas con pés de páxina, o seu contido aliñarase automaticamente.
Título da tarxeta
Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Este contido é un pouco máis longo.
Título da tarxeta
Esta tarxeta ten texto de apoio a continuación como un inicio natural de contido adicional.
Título da tarxeta
Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Esta tarxeta ten un contido aínda máis longo que a primeira para mostrar esa acción de igual altura.
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>Barallas de cartas
Necesitas un conxunto de tarxetas de igual ancho e alto que non estean unidas entre si? Usa barallas de cartas.
Título da tarxeta
Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional. Este contido é un pouco máis longo.
Última actualización hai 3 minutos
Título da tarxeta
Esta tarxeta ten texto de apoio a continuación como un inicio natural de contido adicional.
Última actualización hai 3 minutos
Título da tarxeta
Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Esta tarxeta ten un contido aínda máis longo que a primeira para mostrar esa acción de igual altura.
Última actualización hai 3 minutos
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>Do mesmo xeito que cos grupos de cartas, os pés de páxina das tarxetas aliñaranse automaticamente.
Título da tarxeta
Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Este contido é un pouco máis longo.
Título da tarxeta
Esta tarxeta ten texto de apoio a continuación como un inicio natural de contido adicional.
Título da tarxeta
Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Esta tarxeta ten un contido aínda máis longo que a primeira para mostrar esa acción de igual altura.
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>Tarxetas de reixa
Usa o sistema de grade Bootstrap e as súas .row-colsclases para controlar cantas columnas de grade (envoltas nas túas tarxetas) mostras por fila. Por exemplo, aquí tes a .row-cols-1disposición das tarxetas nunha columna e .row-cols-md-2a división de catro tarxetas para igual ancho en varias filas, desde o punto de ruptura medio cara arriba.
Título da tarxeta
Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional. Este contido é un pouco máis longo.
Título da tarxeta
Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional. Este contido é un pouco máis longo.
Título da tarxeta
Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional.
Título da tarxeta
Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional. Este contido é un pouco máis longo.
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>Cámbiao a .row-cols-3e verás o envoltorio da cuarta tarxeta.
Título da tarxeta
Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional. Este contido é un pouco máis longo.
Título da tarxeta
Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional. Este contido é un pouco máis longo.
Título da tarxeta
Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional.
Título da tarxeta
Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional. Este contido é un pouco máis longo.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>Cando necesites a mesma altura, engádese .h-100ás tarxetas. Se queres alturas iguais por defecto, podes configurar $card-height: 100%en Sass.
Título da tarxeta
Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional. Este contido é un pouco máis longo.
Título da tarxeta
Esta é unha tarxeta curta.
Título da tarxeta
Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional.
Título da tarxeta
Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional. Este contido é un pouco máis longo.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>Columnas de tarxetas
As tarxetas pódense organizar en columnas tipo Masonry con só CSS envolvéndoas en .card-columns. As tarxetas constrúense con columnpropiedades CSS en lugar de flexbox para facilitar o aliñamento. As tarxetas están ordenadas de arriba abaixo e de esquerda a dereita.
Aviso! A túa quilometraxe coas columnas da tarxeta pode variar. Para evitar que as tarxetas se rompan entre as columnas, debemos configuralas display: inline-blockcomo column-break-inside: avoidunha solución a proba de balas aínda.
Título da tarxeta que se envolve nunha nova liña
Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional. Este contido é un pouco máis longo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Título da tarxeta
Esta tarxeta ten texto de apoio a continuación como un inicio natural de contido adicional.
Última actualización hai 3 minutos
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Enteiro posuere erat.
Título da tarxeta
Esta tarxeta ten un título normal e un breve parágrafo de texto debaixo dela.
Última actualización hai 3 minutos
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Título da tarxeta
Esta é outra tarxeta co título e texto de apoio a continuación. Esta tarxeta ten algún contido adicional para facelo un pouco máis alto en xeral.
Última actualización hai 3 minutos
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>As columnas das tarxetas tamén se poden ampliar e personalizar con algún código adicional. A continuación móstrase unha extensión da .card-columnsclase que usa o mesmo CSS que usamos (columnas CSS) para xerar un conxunto de niveis de resposta para cambiar o número de columnas.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}