Targetes
Les targetes de Bootstrap proporcionen un contenidor de contingut flexible i extensible amb múltiples variants i opcions.
Sobre
Una targeta és un contenidor flexible i extensible. Inclou opcions per a capçaleres i peus de pàgina, una gran varietat de contingut, colors de fons contextuals i potents opcions de visualització. Si esteu familiaritzat amb Bootstrap 3, les targetes substitueixen els nostres panells, pous i miniatures antics. Hi ha disponible una funcionalitat similar a aquests components com a classes modificadores per a les targetes.
Exemple
Les targetes es creen amb el mínim marcat i estils possibles, però tot i així aconsegueixen oferir un munt de control i personalització. Construïts amb flexbox, ofereixen una fàcil alineació i es barregen bé amb altres components Bootstrap. No tenen margin
per defecte, així que utilitzeu les utilitats d'espaiat segons sigui necessari.
A continuació es mostra un exemple de targeta bàsica amb contingut mixt i amplada fixa. Les targetes no tenen una amplada fixa per començar, de manera que ompliran naturalment tota l'amplada del seu element principal. Això es pot personalitzar fàcilment amb les nostres diferents opcions de mida .
Títol de la targeta
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
Anar a algun lloc<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>
Tipus de contingut
Les targetes admeten una gran varietat de contingut, com ara imatges, text, grups de llista, enllaços i molt més. A continuació es mostren exemples del que s'admet.
Cos
El bloc de construcció d'una targeta és el .card-body
. Utilitzeu-lo sempre que necessiteu una secció encoixinada dins d'una targeta.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Títols, text i enllaços
Els títols de les targetes s'utilitzen afegint -los .card-title
a una <h*>
etiqueta. De la mateixa manera, s'afegeixen enllaços i es col·loquen un al costat de l'altre afegint -los .card-link
a una <a>
etiqueta.
Els subtítols s'utilitzen afegint a .card-subtitle
a una <h*>
etiqueta. Si els .card-title
elements i .card-subtitle
es col·loquen en un .card-body
element, el títol i el subtítol de la targeta s'alineen perfectament.
Títol de la targeta
Subtítol de la targeta
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
Enllaç de la targeta Un altre enllaç<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>
Imatges
.card-img-top
col·loca una imatge a la part superior de la targeta. Amb .card-text
, es pot afegir text a la targeta. El text dins .card-text
també es pot dissenyar amb les etiquetes HTML estàndard.
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
<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>
Llista de grups
Creeu llistes de contingut en una targeta amb un grup de llistes d'encaix.
- Un element
- Un segon element
- Un tercer element
<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 element
- Un segon element
- Un tercer element
<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 element
- Un segon element
- Un tercer element
<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>
Pica de la cuina
Barreja i combina diversos tipus de contingut per crear la targeta que necessites o tira-hi tot. A continuació es mostren estils d'imatge, blocs, estils de text i un grup de llista, tot embolicat en una targeta d'amplada fixa.
Títol de la targeta
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
- Un element
- Un segon element
- Un tercer element
<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>
Capçalera i peu de pàgina
Afegiu una capçalera i/o un peu de pàgina opcionals dins d'una targeta.
Tractament especial del títol
Amb el text de suport a continuació com a introducció natural a contingut addicional.
Anar a algun lloc<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>
Les capçaleres de les targetes es poden dissenyar afegint .card-header
- hi <h*>
elements.
Destacat
Tractament especial del títol
Amb el text de suport a continuació com a introducció natural a contingut addicional.
Anar a algun lloc<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>
Una cita coneguda, continguda en un element 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>
Tractament especial del títol
Amb el text de suport a continuació com a introducció natural a contingut addicional.
Anar a algun lloc<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
Les targetes assumeixen que no s'especifica width
per començar, de manera que seran 100% amples tret que s'indiqui el contrari. Podeu canviar-ho segons sigui necessari amb CSS personalitzat, classes de quadrícula, mixins Sass de quadrícula o utilitats.
Utilitzant el marcatge de quadrícula
Utilitzant la quadrícula, embolcalleu les targetes en columnes i files segons sigui necessari.
Tractament especial del títol
Amb el text de suport a continuació com a introducció natural a contingut addicional.
Anar a algun llocTractament especial del títol
Amb el text de suport a continuació com a introducció natural a contingut addicional.
Anar a algun lloc<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>
Ús d'utilitats
Utilitzeu el nostre grapat d' utilitats de mida disponibles per configurar ràpidament l'amplada d'una targeta.
Títol de la targeta
Amb el text de suport a continuació com a introducció natural a contingut addicional.
BotóTítol de la targeta
Amb el text de suport a continuació com a introducció natural a contingut addicional.
Botó<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>
Utilitzant CSS personalitzat
Utilitzeu CSS personalitzat als vostres fulls d'estil o com a estils en línia per establir una amplada.
Tractament especial del títol
Amb el text de suport a continuació com a introducció natural a contingut addicional.
Anar a algun lloc<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>
Alineació del text
Podeu canviar ràpidament l'alineació del text de qualsevol targeta (en la seva totalitat o parts específiques) amb les nostres classes d'alineació de text .
Tractament especial del títol
Amb el text de suport a continuació com a introducció natural a contingut addicional.
Anar a algun llocTractament especial del títol
Amb el text de suport a continuació com a introducció natural a contingut addicional.
Anar a algun llocTractament especial del títol
Amb el text de suport a continuació com a introducció natural a contingut addicional.
Anar a algun lloc<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ó
Afegiu una mica de navegació a la capçalera (o bloc) d'una targeta amb els components de navegació de Bootstrap .
Tractament especial del títol
Amb el text de suport a continuació com a introducció natural a contingut addicional.
Anar a algun lloc<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" 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>
Tractament especial del títol
Amb el text de suport a continuació com a introducció natural a contingut addicional.
Anar a algun lloc<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>
Imatges
Les targetes inclouen algunes opcions per treballar amb imatges. Trieu entre afegir "majúscules d'imatge" a qualsevol dels extrems d'una targeta, superposar imatges amb el contingut de la targeta o simplement incrustar la imatge en una targeta.
Caps d'imatge
De manera semblant a les capçaleres i peus de pàgina, les targetes poden incloure "majúscules d'imatge" superior i inferior, imatges a la part superior o inferior d'una targeta.
Títol de la targeta
Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.
Última actualització fa 3 minuts
Títol de la targeta
Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.
Última actualització fa 3 minuts
<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>
Superposicions d'imatges
Converteix una imatge en un fons de targeta i superposa el text de la targeta. Depenent de la imatge, pot ser que necessiteu estils o utilitats addicionals o no.
<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>
Horitzontal
Utilitzant una combinació de classes de graella i utilitat, les targetes es poden fer horitzontals d'una manera adaptada per a mòbils i sensible. A l'exemple següent, eliminem els canals de la quadrícula .g-0
i fem servir .col-md-*
classes per fer que la targeta sigui horitzontal al punt d' md
interrupció. És possible que calguin més ajustos en funció del contingut de la targeta.
Títol de la targeta
Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.
Última actualització fa 3 minuts
<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>
Estils de targetes
Les targetes inclouen diverses opcions per personalitzar els seus fons, vores i color.
Fons i color
Utilitzeu el color del text i les utilitats de fons per canviar l'aparença d'una targeta.
Títol de la targeta principal
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
Títol de la targeta secundària
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
Títol de la targeta d'èxit
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
Títol de la targeta de perill
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
Títol de la targeta d'advertència
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
Títol de la targeta d'informació
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
Títol de la targeta lleugera
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
Títol fosc de la targeta
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
<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>
Transmetre significat a les tecnologies d'assistència
L'ús del color per afegir significat només proporciona una indicació visual, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla. Assegureu-vos que la informació indicada pel color sigui òbvia des del contingut mateix (per exemple, el text visible) o s'inclogui mitjançant mitjans alternatius, com ara text addicional amagat amb la .visually-hidden
classe.
Frontera
Utilitzeu les utilitats de vora per canviar només el border-color
d'una targeta. Tingueu en compte que podeu posar .text-{color}
classes al pare .card
o a un subconjunt del contingut de la targeta tal com es mostra a continuació.
Títol de la targeta principal
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
Títol de la targeta secundària
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
Títol de la targeta d'èxit
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
Títol de la targeta de perill
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
Títol de la targeta d'advertència
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
Títol de la targeta d'informació
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
Títol de la targeta lleugera
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
Títol fosc de la targeta
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
<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>
Utilitats mixins
També podeu canviar les vores de la capçalera i el peu de pàgina de la targeta segons sigui necessari, i fins i tot eliminar-les background-color
amb .bg-transparent
.
Títol de la targeta d'èxit
Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.
<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>
Disseny de la targeta
A més de dissenyar el contingut de les targetes, Bootstrap inclou algunes opcions per dissenyar sèries de targetes. De moment, aquestes opcions de disseny encara no responen .
Grups de targetes
Utilitzeu grups de targetes per representar targetes com a element únic adjunt amb columnes d'amplada i alçada iguals. Els grups de targetes comencen apilats i s'acostumen display: flex;
a unir-se amb dimensions uniformes a partir del punt d' sm
interrupció.
Títol de la targeta
Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.
Última actualització fa 3 minuts
Títol de la targeta
Aquesta targeta té text de suport a continuació com a introducció natural a contingut addicional.
Última actualització fa 3 minuts
Títol de la targeta
Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquesta targeta té un contingut fins i tot més llarg que la primera que mostra aquesta acció d'alçada igual.
Última actualització fa 3 minuts
<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>
Quan utilitzeu grups de targetes amb peus de pàgina, el seu contingut s'alinearà automàticament.
Títol de la targeta
Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.
Títol de la targeta
Aquesta targeta té text de suport a continuació com a introducció natural a contingut addicional.
Títol de la targeta
Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquesta targeta té un contingut fins i tot més llarg que la primera que mostra aquesta acció d'alçada igual.
<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>
Targetes de graella
Utilitzeu el sistema de quadrícula Bootstrap i les seves .row-cols
classes per controlar quantes columnes de quadrícula (embolicades al voltant de les vostres targetes) mostreu per fila. Per exemple, aquí es .row-cols-1
distribueixen les cartes en una columna i es .row-cols-md-2
divideixen quatre cartes a la mateixa amplada en diverses files, des del punt de ruptura mitjà cap amunt.
Títol de la targeta
Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.
Títol de la targeta
Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.
Títol de la targeta
Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional.
Títol de la targeta
Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.
<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>
Canvieu-lo a .row-cols-3
i veureu l'embolcall de la quarta targeta.
Títol de la targeta
Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.
Títol de la targeta
Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.
Títol de la targeta
Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional.
Títol de la targeta
Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.
<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>
Quan necessiteu la mateixa alçada, afegiu .h-100
a les cartes. Si voleu altures iguals de manera predeterminada, podeu configurar-lo $card-height: 100%
a Sass.
Títol de la targeta
Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.
Títol de la targeta
Aquesta és una carta curta.
Títol de la targeta
Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional.
Títol de la targeta
Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.
<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>
Igual que amb els grups de targetes, els peus de pàgina s'alinearan automàticament.
Títol de la targeta
Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.
Títol de la targeta
Aquesta targeta té text de suport a continuació com a introducció natural a contingut addicional.
Títol de la targeta
Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquesta targeta té un contingut fins i tot més llarg que la primera que mostra aquesta acció d'alçada igual.
<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>
maçoneria
En v4
vam utilitzar una tècnica només de CSS per imitar el comportament de les columnes de maçoneria , però aquesta tècnica va comportar molts efectes secundaris desagradables . Si voleu tenir aquest tipus de disseny a v5
, només podeu fer ús del connector Masonry. La maçoneria no està inclosa a Bootstrap , però hem fet un exemple de demostració per ajudar-vos a començar.
Sass
Les variables
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-radius: $border-radius;
$card-border-color: rgba($black, .125);
$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;