Kartoj

La kartoj de Bootstrap provizas flekseblan kaj etendeblan enhavujon kun multoblaj variantoj kaj opcioj.

Pri

Karto estas fleksebla kaj etendebla enhavujo . Ĝi inkluzivas eblojn por kaplinioj kaj piedlinioj, ampleksan varion de enhavo, kuntekstajn fonkolorojn kaj potencajn ekranajn opciojn. Se vi konas Bootstrap 3, kartoj anstataŭigas niajn malnovajn panelojn, putojn kaj bildetojn. Simila funkcieco al tiuj komponentoj estas haveblaj kiel modifklasoj por kartoj.

Ekzemplo

Kartoj estas konstruitaj kun kiel eble plej malmulte da markado kaj stiloj, sed tamen sukcesas liveri multe da kontrolo kaj personigo. Konstruitaj kun flexbox, ili ofertas facilan vicigon kaj miksas bone kun aliaj Bootstrap-komponentoj. Ili ne havas margindefaŭlte, do uzu interspacigajn utilecojn laŭbezone.

Malsupre estas ekzemplo de baza karto kun miksita enhavo kaj fiksa larĝo. Kartoj ne havas fiksan larĝon por komenci, do ili nature plenigos la tutan larĝon de ĝia gepatra elemento. Ĉi tio estas facile personecigita per niaj diversaj grandeco-opcioj .

Kartotitolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Iru ien

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

Enhavaj tipoj

Kartoj subtenas ampleksan varion de enhavo, inkluzive de bildoj, tekstoj, listgrupoj, ligiloj kaj pli. Malsupre estas ekzemploj de tio, kio estas subtenata.

Korpo

La konstrubriketo de karto estas la .card-body. Uzu ĝin kiam ajn vi bezonas remburitan sekcion ene de karto.

Ĉi tio estas iu teksto en kartkorpo.

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Titoloj, teksto kaj ligiloj

Karttitoloj estas uzataj per aldonado .card-titleal <h*>etikedo. En la sama maniero, ligiloj estas aldonitaj kaj metitaj unu apud la alia per aldonado .card-linkal <a>etikedo.

Subtekstoj estas uzataj aldonante a .card-subtitleal <h*>etikedo. Se la .card-titlekaj la .card-subtitleeroj estas metitaj en .card-bodyeron, la karttitolo kaj subtitolo estas bele vicigitaj.

Kartotitolo

Kartsubtitolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kartligo Alia ligo

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

Bildoj

.card-img-topmetas bildon al la supro de la karto. Per .card-text, teksto povas esti aldonita al la karto. Teksto ene .card-textankaŭ povas esti stilita per la normaj HTML-etikedoj.

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

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

Listo grupoj

Kreu listojn de enhavo en karto kun flua listogrupo.

Cras justo odio
Dapibus ac facilisis in
Vestibulo ĉe 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>

Prezentita

Cras justo odio
Dapibus ac facilisis in
Vestibulo ĉe 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>

Kuireja lavujo

Miksu kaj kongruu plurajn enhavspecojn por krei la karton, kiun vi bezonas, aŭ ĵeti ĉion tien. Malsupre montriĝas bildaj stiloj, blokoj, tekstaj stiloj kaj listo-grupo—ĉiuj envolvitaj en fikslarĝa karto.

Kartotitolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Cras justo odio
Dapibus ac facilisis in
Vestibulo ĉe eros

Kartligo Alia ligo

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

Kapo kaj piedlinio

Aldonu laŭvolan kaplinion kaj/aŭ piedlinion ene de karto.

Prezentita

Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien

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

Kartkapoj povas esti stilitaj per aldonado .card-headeral <h*>elementoj.

Prezentita

Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien

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

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

Iu fama en Fonta Titolo

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

Prezentita

Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien

antaŭ 2 tagoj

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

Dimensio

Kartoj supozas neniun specifan widthpor komenci, do ili estos 100% larĝaj krom se alie dirite. Vi povas ŝanĝi ĉi tion laŭbezone per kutimaj CSS, kradaj klasoj, kradaj Sass-miksaĵoj aŭ iloj.

Uzante kradmarkadon

Uzante la kradon, envolvu kartojn en kolumnoj kaj vicoj laŭbezone.

Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien

Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien

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

Uzante utilecojn

Uzu nian manplenon da disponeblaj grandecoj por rapide agordi la larĝecon de karto.

Kartotitolo

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Butono

Kartotitolo

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Butono

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

Uzante kutiman CSS

Uzu kutiman CSS en viaj stilfolioj aŭ kiel enliniajn stilojn por agordi larĝecon.

Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien

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

Teksta vicigo

Vi povas rapide ŝanĝi la tekstan vicigon de iu ajn karto—en ĝia tutaĵo aŭ specifajn partojn—per niaj tekstalign klasoj .

Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien

Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien

Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien

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

Aldonu iom da navigado al la kaplinio (aŭ bloko) de karto kun la navkomponentoj de Bootstrap .

Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien

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

Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien

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

Bildoj

Kartoj inkluzivas kelkajn eblojn por labori kun bildoj. Elektu el aldonado de "bildaj ĉapoj" ĉe ambaŭ finoj de karto, supermetado de bildoj kun karto enhavo aŭ simple enkonstrui la bildon en karton.

Bildaj ĉapoj

Simile al kaplinioj kaj piedlinioj, kartoj povas inkluzivi suprajn kaj malsuprajn "bildĉapojn"—bildojn ĉe la supro aŭ malsupro de karto.

Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Laste ĝisdatigita antaŭ 3 minutoj

Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Laste ĝisdatigita antaŭ 3 minutoj

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

Bildaj supermetaĵoj

Turnu bildon en kartan fonon kaj superigu la tekston de via karto. Depende de la bildo, vi eble aŭ eble ne bezonas pliajn stilojn aŭ ilojn.

Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Laste ĝisdatigita antaŭ 3 minutoj

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

Kartstiloj

Kartoj inkluzivas diversajn eblojn por agordi siajn fonojn, limojn kaj kolorojn.

Fono kaj koloro

Uzu tekston kaj fonajn ilojn por ŝanĝi la aspekton de karto.

Kapo

Primara karttitolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo

Sekundara karto titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo

Sukceskarta titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo

Danĝera karto titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo

Titolo de avertkarto

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo

Titolo de informkarto

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo

Luma karto titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo

Malhela karto titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

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

Transdonante signifon al helpaj teknologioj

Uzi koloron por aldoni signifon nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidentaj el la enhavo mem (ekz. la videbla teksto), aŭ estas inkluzivitaj per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .sr-onlyklaso.

Limo

Uzu randajn ilojn por ŝanĝi nur la border-colorkarton. Notu, ke vi povas meti .text-{color}klasojn sur la gepatro .cardaŭ subaron de la enhavo de la karto kiel montrite sube.

Kapo

Primara karttitolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo

Sekundara karto titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo

Sukceskarta titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo

Danĝera karto titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo

Titolo de avertkarto

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo

Titolo de informkarto

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo

Luma karto titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo

Malhela karto titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins utilecoj

Vi ankaŭ povas ŝanĝi la randojn sur la kartkapo kaj piedo laŭbezone, kaj eĉ forigi iliajn background-colorper .bg-transparent.

Kapo

Sukceskarta titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Piedo

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

Karta aranĝo

Krom stiligi la enhavon ene de kartoj, Bootstrap inkluzivas kelkajn eblojn por aranĝi seriojn de kartoj. Por la momento, ĉi tiuj aranĝaj opcioj ankoraŭ ne respondas .

Kartgrupoj

Uzu kartgrupojn por bildi kartojn kiel ununuran, alkroĉitan elementon kun egalaj larĝaj kaj altecaj kolumnoj. Kartgrupoj uzas display: flex;por atingi sian unuforman grandecon.

Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Laste ĝisdatigita antaŭ 3 minutoj

Kartotitolo

Ĉi tiu karto havas subtenan tekston kiel naturan enkondukon al plia enhavo.

Laste ĝisdatigita antaŭ 3 minutoj

Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu karto havas eĉ pli longan enhavon ol la unua por montri tiun egalan altecan agon.

Laste ĝisdatigita antaŭ 3 minutoj

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

Kiam vi uzas kartgrupojn kun piedlinioj, ilia enhavo aŭtomate viciĝas.

Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Laste ĝisdatigita antaŭ 3 minutoj

Kartotitolo

Ĉi tiu karto havas subtenan tekston kiel naturan enkondukon al plia enhavo.

Laste ĝisdatigita antaŭ 3 minutoj

Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu karto havas eĉ pli longan enhavon ol la unua por montri tiun egalan altecan agon.

Laste ĝisdatigita antaŭ 3 minutoj

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

Kartferdekoj

Ĉu vi bezonas aron da egalaj larĝaj kaj altecaj kartoj, kiuj ne estas kunligitaj unu al la alia? Uzu kartojn.

Kartotitolo

Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Laste ĝisdatigita antaŭ 3 minutoj

Kartotitolo

Ĉi tiu karto havas subtenan tekston kiel naturan enkondukon al plia enhavo.

Laste ĝisdatigita antaŭ 3 minutoj

Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu karto havas eĉ pli longan enhavon ol la unua por montri tiun egalan altecan agon.

Laste ĝisdatigita antaŭ 3 minutoj

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

Same kiel ĉe kartgrupoj, kartpiedoj en ferdekoj aŭtomate viciĝos.

Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Laste ĝisdatigita antaŭ 3 minutoj

Kartotitolo

Ĉi tiu karto havas subtenan tekston kiel naturan enkondukon al plia enhavo.

Laste ĝisdatigita antaŭ 3 minutoj

Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu karto havas eĉ pli longan enhavon ol la unua por montri tiun egalan altecan agon.

Laste ĝisdatigita antaŭ 3 minutoj

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

Kartkolumnoj

Kartoj povas esti organizitaj en Masonry -similajn kolumnojn kun nur CSS envolvante ilin en .card-columns. Kartoj estas konstruitaj kun CSS- columnecoj anstataŭ flexbox por pli facila vicigo. Kartoj estas ordigitaj de supre malsupre kaj de maldekstre dekstren.

Atentu! Via kilometraĵo kun kartkolumnoj povas varii. Por eviti ke kartoj rompas trans kolumnojn, ni devas agordi ilin display: inline-blockkiel column-break-inside: avoidankoraŭ ne estas kuglorezista solvo.

Karttitolo kiu envolvas al nova linio

Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

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

Iu fama en Fonta Titolo

Kartotitolo

Ĉi tiu karto havas subtenan tekston kiel naturan enkondukon al plia enhavo.

Laste ĝisdatigita antaŭ 3 minutoj

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

Iu fama en Fonta Titolo

Kartotitolo

Ĉi tiu karto havas regulan titolon kaj mallongan alineon de teksto sub ĝi.

Laste ĝisdatigita antaŭ 3 minutoj

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

Iu fama en Fonta Titolo

Kartotitolo

Ĉi tio estas alia karto kun titolo kaj subtena teksto. Ĉi tiu karto havas iom da plia enhavo por fari ĝin iomete pli alta entute.

Laste ĝisdatigita antaŭ 3 minutoj

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

Kartkolumnoj ankaŭ povas esti etenditaj kaj personecigitaj per iu aldona kodo. Montrita malsupre estas etendaĵo de la .card-columnsklaso uzante la saman CSS kiun ni uzas—CSS-kolumnoj—por generi aron da respondemaj niveloj por ŝanĝi la nombron da kolumnoj.

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

Kartoj

Pri

Ekzemplo

Kartotitolo

Enhavaj tipoj

Korpo

Titoloj, teksto kaj ligiloj

Kartotitolo

Kartsubtitolo

Bildoj

Listo grupoj

Kuireja lavujo

Kartotitolo

Kapo kaj piedlinio

Speciala titoltraktado

Prezentita

Speciala titoltraktado

Speciala titoltraktado

Dimensio

Uzante kradmarkadon

Speciala titoltraktado

Speciala titoltraktado

Uzante utilecojn

Kartotitolo

Kartotitolo

Uzante kutiman CSS

Speciala titoltraktado

Teksta vicigo

Speciala titoltraktado

Speciala titoltraktado

Speciala titoltraktado

Navigado

Speciala titoltraktado

Speciala titoltraktado

Bildoj

Bildaj ĉapoj

Kartotitolo

Kartotitolo

Bildaj supermetaĵoj

Kartotitolo

Kartstiloj

Fono kaj koloro

Primara karttitolo

Sekundara karto titolo

Sukceskarta titolo

Danĝera karto titolo

Titolo de avertkarto

Titolo de informkarto

Luma karto titolo

Malhela karto titolo

Transdonante signifon al helpaj teknologioj

Limo

Primara karttitolo

Sekundara karto titolo

Sukceskarta titolo

Danĝera karto titolo

Titolo de avertkarto

Titolo de informkarto

Luma karto titolo

Malhela karto titolo

Mixins utilecoj

Sukceskarta titolo

Karta aranĝo

Kartgrupoj

Kartotitolo

Kartotitolo

Kartotitolo

Kartotitolo

Kartotitolo

Kartotitolo

Kartferdekoj

Kartotitolo

Kartotitolo

Kartotitolo

Kartotitolo

Kartotitolo

Kartotitolo

Kartkolumnoj

Karttitolo kiu envolvas al nova linio

Kartotitolo