Saltu al ĉefa enhavo Saltu al navigado de dokumentoj
Check
in English

Kartoj

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

Sur ĉi tiu paĝo

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 .

Placeholder Image cap
Kartotitolo

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

Iru ien
html 
<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>

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

Placeholder Image cap

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

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

Listo grupoj

Kreu listojn de enhavo en karto kun flua listogrupo.

  • Ero
  • Dua ero
  • Tria ero
html 
<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>
Prezentita
  • Ero
  • Dua ero
  • Tria ero
html 
<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>
  • Ero
  • Dua ero
  • Tria ero
Kartpiedo
html 
<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>

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.

Placeholder Image cap
Kartotitolo

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

  • Ero
  • Dua ero
  • Tria ero
Kartligo Alia ligo
html 
<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>

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

Bonkonata citaĵo, enhavita en blokcita elemento.

Iu fama en Fonta Titolo
html 
<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>
Prezentita
Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien
antaŭ 2 tagoj
html 
<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
html 
<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
html 
<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
html 
<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
html 
<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>

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
html 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien
html 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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.

Placeholder Image cap
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

Placeholder Image cap
html 
<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>

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.

Placeholder Card image
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

html 
<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
Notu, ke enhavo ne devus esti pli granda ol la alteco de la bildo. Se enhavo estas pli granda ol la bildo, la enhavo aperos ekster la bildo.

Horizontala

Uzante kombinaĵon de krado kaj servaĵoklasoj, kartoj povas esti horizontalaj en poŝtelefon-amika kaj respondema maniero. En la malsupra ekzemplo, ni forigas la kradkanalojn kun .g-0kaj uzas .col-md-*klasojn por fari la karton horizontala ĉe la mdrompopunkto. Pliaj ĝustigoj eble estos bezonataj depende de via karto enhavo.

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

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

Kartstiloj

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

Fono kaj koloro

Aldonita en v5.2.0

Metu a background-colorkun kontrasta malfono colorkun niaj .text-bg-{color}helpantoj . Antaŭe oni bezonis mane kunigi vian elekton .text-{color}kaj .bg-{color}ilojn por stilado, kiujn vi ankoraŭ povas uzi se vi preferas.

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.

html 
<div class="card text-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-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-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-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-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-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-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-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ŭ evidenta de la enhavo mem (ekz. la videbla teksto), aŭ estas inkluzivita per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .visually-hiddenklaso.

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.

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

Mixins 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
html 
<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 komenciĝas stakigitaj kaj kutimas display: flex;iĝi alkroĉitaj kun unuformaj dimensioj komencante ĉe la smrompopunkto.

Placeholder Image cap
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

Placeholder Image cap
Kartotitolo

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

Laste ĝisdatigita antaŭ 3 minutoj

Placeholder Image cap
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

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

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

Placeholder Image cap
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
Placeholder Image cap
Kartotitolo

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

Laste ĝisdatigita antaŭ 3 minutoj
Placeholder Image cap
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
html 
<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>

Kradaj kartoj

Uzu la Bootstrap kradsistemon kaj ĝiajn .row-colsklasojn por kontroli kiom da kradkolumnoj (envolvitaj ĉirkaŭ viaj kartoj) vi montras per vico. Ekzemple, jen .row-cols-1aranĝado de la kartoj sur unu kolumno, kaj .row-cols-md-2dividado de kvar kartoj al egala larĝo tra pluraj vicoj, de la meza rompopunkto supren.

Placeholder Image cap
Kartotitolo

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

Placeholder Image cap
Kartotitolo

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

Placeholder Image cap
Kartotitolo

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

Placeholder Image cap
Kartotitolo

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

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

Ŝanĝu ĝin al .row-cols-3kaj vi vidos la kvaran karton envolvaĵon.

Placeholder Image cap
Kartotitolo

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

Placeholder Image cap
Kartotitolo

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

Placeholder Image cap
Kartotitolo

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

Placeholder Image cap
Kartotitolo

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

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

Kiam vi bezonas egalan altecon, aldonu .h-100al la kartoj. Se vi volas egalajn altecojn defaŭlte, vi povas agordi $card-height: 100%en Sass.

Placeholder Image cap
Kartotitolo

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

Placeholder Image cap
Kartotitolo

Ĉi tio estas mallonga karto.

Placeholder Image cap
Kartotitolo

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

Placeholder Image cap
Kartotitolo

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

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

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

Placeholder Image cap
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
Placeholder Image cap
Kartotitolo

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

Laste ĝisdatigita antaŭ 3 minutoj
Placeholder Image cap
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
html 
<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>

Masonaĵo

En v4ni uzis CSS-nur-teknikon por imiti la konduton de Masonería - similaj kolonoj, sed ĉi tiu tekniko venis kun multaj malagrablaj kromefikoj . Se vi volas havi ĉi tiun tipon de aranĝo en v5, vi povas simple uzi Masonry-kromaĵon. Masonaĵo ne estas inkluzivita en Bootstrap , sed ni faris demonstran ekzemplon por helpi vin komenci.

CSS

Variabloj

Aldonita en v5.2.0

Kiel parto de la aliro de evoluantaj CSS-variabloj de Bootstrap, kartoj nun uzas lokajn CSS .card-variablojn por plibonigita realtempa personigo. Valoroj por la CSS-variabloj estas fiksitaj per Sass, do ankaŭ Sass-adaptigo ankoraŭ estas subtenata.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sass-variabloj

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;