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 margin
por 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-title
a unha <h*>
etiqueta. Do mesmo xeito, as ligazóns engádense e colócanse unha á beira das outras engadindo .card-link
a unha <a>
etiqueta.
Os subtítulos úsanse engadindo un .card-subtitle
a unha <h*>
etiqueta. Se os .card-title
elementos e .card-subtitle
se colocan nun .card-body
elemento, 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-top
coloca unha imaxe na parte superior da tarxeta. Con .card-text
, pódese engadir texto á tarxeta. O texto dentro .card-text
tamé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.
- Un elemento
- Un segundo elemento
- Un terceiro elemento
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- Un elemento
- Un segundo elemento
- Un terceiro elemento
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- Un elemento
- Un segundo elemento
- Un terceiro elemento
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</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ótalle 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.
- Un elemento
- Un segundo elemento
- Un terceiro elemento
<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">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</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-header
aos <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>
Unha cita coñecida, contida nun elemento blockquote.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</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-end" 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" aria-current="true" 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">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">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>
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 .g-0
e usamos .col-md-*
clases para facer a tarxeta horizontal no punto de md
interrupció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 g-0">
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" 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 a cor do texto e as utilidades de fondo para cambiar o aspecto 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-dark 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-dark 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 text-dark 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 .visually-hidden
clase.
Borde
Use as utilidades de bordo para cambiar só a border-color
tarxeta dunha tarxeta. Teña en conta que pode poñer .text-{color}
clases no pai .card
ou 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">
<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">
<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-color
con .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 sm
interrupció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>
Tarxetas de reixa
Usa o sistema de grade Bootstrap e as súas .row-cols
clases para controlar cantas columnas de grade (envoltas nas túas tarxetas) mostras por fila. Por exemplo, aquí tes a .row-cols-1
disposición das tarxetas nunha columna e .row-cols-md-2
a 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 g-4">
<div class="col">
<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">
<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">
<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">
<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-3
e 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 g-4">
<div class="col">
<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">
<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">
<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">
<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 g-4">
<div class="col">
<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">
<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">
<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">
<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>
Do mesmo xeito que cos grupos de tarxetas, os pés de páxina 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="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<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 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>
<div class="col">
<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 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>
<div class="col">
<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 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>
</div>
albanelería
En v4
utilizamos unha técnica só CSS para imitar o comportamento das columnas tipo mampostería , pero esta técnica tivo moitos efectos secundarios desagradables . Se queres ter este tipo de deseño en v5
, só podes facer uso do complemento Masonry. Masonry non está incluído en Bootstrap , pero fixemos un exemplo de demostración para axudarche a comezar.
Sass
Variables
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-color: rgba($black, .125);
$card-border-radius: $border-radius;
$card-box-shadow: null;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
$card-cap-padding-y: $card-spacer-y * .5;
$card-cap-padding-x: $card-spacer-x;
$card-cap-bg: rgba($black, .03);
$card-cap-color: null;
$card-height: null;
$card-color: null;
$card-bg: $white;
$card-img-overlay-padding: $spacer;
$card-group-margin: $grid-gutter-width * .5;