Source

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 marginper 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 class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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.

Aquest és un text dins del cos 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-titlea una <h*>etiqueta. De la mateixa manera, s'afegeixen enllaços i es col·loquen un al costat de l'altre afegint -los .card-linka una <a>etiqueta.

Els subtítols s'utilitzen afegint a .card-subtitlea una <h*>etiqueta. Si els .card-titleelements i .card-subtitlees col·loquen en un .card-bodyelement, 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-topcol·loca una imatge a la part superior de la targeta. Amb .card-text, es pot afegir text a la targeta. El text dins .card-texttambé 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 class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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.

Cras justo odio
Dapibus ac facilitis in
Vestíbul a l'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>

Destacat

Cras justo odio
Dapibus ac facilitis in
Vestíbul a l'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>

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.

Cras justo odio
Dapibus ac facilitis in
Vestíbul a l'eros

Enllaç de la targeta Un altre enllaç

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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>

Capçalera i peu de pàgina

Afegiu una capçalera i/o un peu de pàgina opcionals dins d'una targeta.

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">
  <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>

Cita

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Algú famós a Source Title

<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>

Destacat

Tractament especial del títol

Amb el text de suport a continuació com a introducció natural a contingut addicional.

Anar a algun lloc

fa 2 dies

<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 widthper començar, de manera que seran 100% amples tret que s'indiqui el contrari. Podeu canviar-ho segons sigui necessari amb CSS personalitzats, classes de quadrícula, mixins Sass de quadrícula o utilitats.

Utilitzant el marcatge de quadrícula

Utilitzant la quadrícula, emboliqui 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 lloc

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="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 lloc

Tractament especial del títol

Amb el text de suport a continuació com a introducció natural a contingut addicional.

Anar a algun lloc

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>

<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>

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" 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="#">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="#">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 class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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 class="card-img-bottom" src=".../100px180/" alt="Card image cap">
</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.

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 bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <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>

Estils de targetes

Les targetes inclouen diverses opcions per personalitzar els seus fons, vores i color.

Fons i color

Utilitzeu les utilitats de text i fons per canviar l'aparença d'una targeta.

Capçalera

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.

Capçalera

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.

Capçalera

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.

Capçalera

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.

Capçalera

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.

Capçalera

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.

Capçalera

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.

Capçalera

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-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>

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 .sr-onlyclasse.

Frontera

Utilitzeu les utilitats de vora per canviar només el border-colord'una targeta. Tingueu en compte que podeu posar .text-{color}classes al pare .cardo a un subconjunt del contingut de la targeta tal com es mostra a continuació.

Capçalera

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.

Capçalera

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.

Capçalera

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.

Capçalera

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.

Capçalera

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.

Capçalera

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.

Capçalera

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.

Capçalera

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 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>

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-coloramb .bg-transparent.

Capçalera

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.

Peu de pàgina

<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 utilitzen display: flex;per aconseguir la seva mida uniforme.

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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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.

Ú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

Última actualització fa 3 minuts

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

Baralles de cartes

Necessites un conjunt de targetes d'amplada i alçada iguals que no estiguin enganxades entre si? Utilitzeu baralles de cartes.

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.

Ú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

Última actualització fa 3 minuts

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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>

Igual que amb els grups de cartes, els peus de cartes de les baralles 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.

Ú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

Última actualització fa 3 minuts

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

Columnes de targetes

Les targetes es poden organitzar en columnes semblants a maçoneria amb només CSS embolicant-les en .card-columns. Les targetes es creen amb columnpropietats CSS en lloc de flexbox per facilitar l'alineació. Les cartes s'ordenen de dalt a baix i d'esquerra a dreta.

Caps amunt! El vostre quilometratge amb columnes de targetes pot variar. Per evitar que les targetes es trenquin a través de columnes, hem de configurar-les display: inline-blockperquè column-break-inside: avoidencara no és una solució a prova de bales.

Títol de la targeta que s'ajusta a una línia nova

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Algú famós a Source Title

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Algú famós a Source Title

Títol de la targeta

Aquesta targeta té un títol normal i un paràgraf curt de text a sota.

Última actualització fa 3 minuts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Algú famós a Source Title

Títol de la targeta

Aquesta és una altra targeta amb títol i text de suport a continuació. Aquesta targeta té contingut addicional per fer-la una mica més alta en general.

Última actualització fa 3 minuts

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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">
        <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 class="card-img" src=".../100px260/" alt="Card image">
  </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>

Les columnes de la targeta també es poden ampliar i personalitzar amb algun codi addicional. A continuació es mostra una extensió de la .card-columnsclasse que utilitza el mateix CSS que fem servir (columnes CSS) per generar un conjunt de nivells responsius per canviar el nombre de columnes.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

Targetes

Sobre

Exemple

Títol de la targeta

Tipus de contingut

Cos

Títols, text i enllaços

Títol de la targeta

Subtítol de la targeta

Imatges

Llista de grups

Pica de la cuina

Títol de la targeta

Capçalera i peu de pàgina

Tractament especial del títol

Destacat

Tractament especial del títol

Tractament especial del títol

Talla

Utilitzant el marcatge de quadrícula

Tractament especial del títol

Tractament especial del títol

Ús d'utilitats

Títol de la targeta

Títol de la targeta

Utilitzant CSS personalitzat

Tractament especial del títol

Alineació del text

Tractament especial del títol

Tractament especial del títol

Tractament especial del títol

Navegació

Tractament especial del títol

Tractament especial del títol

Imatges

Caps d'imatge

Títol de la targeta

Títol de la targeta

Superposicions d'imatges

Títol de la targeta

Estils de targetes

Fons i color

Títol de la targeta principal

Títol de la targeta secundària

Títol de la targeta d'èxit

Títol de la targeta de perill

Títol de la targeta d'advertència

Títol de la targeta d'informació

Títol de la targeta lleugera

Títol fosc de la targeta

Transmetre significat a les tecnologies d'assistència

Frontera

Títol de la targeta principal

Títol de la targeta secundària

Títol de la targeta d'èxit

Títol de la targeta de perill

Títol de la targeta d'advertència

Títol de la targeta d'informació

Títol de la targeta lleugera

Títol fosc de la targeta

Utilitats mixins

Títol de la targeta d'èxit

Disseny de la targeta

Grups de targetes

Títol de la targeta

Títol de la targeta

Títol de la targeta

Títol de la targeta

Títol de la targeta

Títol de la targeta

Baralles de cartes

Títol de la targeta

Títol de la targeta

Títol de la targeta

Títol de la targeta

Títol de la targeta

Títol de la targeta

Columnes de targetes

Títol de la targeta que s'ajusta a una línia nova

Títol de la targeta