karty

Bootstrapové karty poskytujú flexibilný a rozšíriteľný kontajner obsahu s viacerými variantmi a možnosťami.

Na tejto stránke

O

Karta je flexibilný a rozšíriteľný kontajner obsahu . Obsahuje možnosti pre hlavičky a päty, širokú škálu obsahu, kontextové farby pozadia a výkonné možnosti zobrazenia. Ak poznáte Bootstrap 3, karty nahrádzajú naše staré panely, jamky a miniatúry. Podobné funkcie ako tieto komponenty sú dostupné ako modifikátorové triedy pre karty.

Príklad

Karty sú vytvorené s čo najmenším množstvom značiek a štýlov, no stále dokážu poskytnúť množstvo kontroly a prispôsobenia. Postavené s flexboxom, ponúkajú jednoduché zarovnanie a dobre sa miešajú s ostatnými komponentmi Bootstrap. V predvolenom nastavení nemajú žiadne margin, takže podľa potreby použite nástroje na vytváranie rozstupov .

Nižšie je uvedený príklad základnej karty so zmiešaným obsahom a pevnou šírkou. Karty nemajú na začiatku žiadnu pevnú šírku, takže prirodzene vyplnia celú šírku nadradeného prvku. To sa dá ľahko prispôsobiť pomocou našich rôznych možností veľkosti .

Názov karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Ísť niekam

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>

Typy obsahu

Karty podporujú širokú škálu obsahu vrátane obrázkov, textu, skupín zoznamov, odkazov a ďalších. Nižšie sú uvedené príklady toho, čo je podporované.

Telo

Stavebným kameňom karty je .card-body. Použite ho vždy, keď potrebujete polstrovanú časť na karte.

Toto je nejaký text v tele karty.

html

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

Názvy, text a odkazy

Názvy kariet sa používajú pridaním .card-titlek <h*>štítku. Rovnakým spôsobom sa odkazy pridávajú a umiestňujú vedľa seba pridaním .card-linkdo <a>značky.

Titulky sa používajú pridaním a .card-subtitledo <h*>značky. Ak sú .card-titlepoložky .card-subtitlea umiestnené v .card-bodypoložke, názov karty a podnadpis sú pekne zarovnané.

Názov karty

Podnadpis karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Odkaz na kartu Ďalší odkaz

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>

snímky

.card-img-topumiestni obrázok na vrch karty. Pomocou .card-text, môžete na kartu pridať text. Text vo vnútri .card-textmôže byť tiež štylizovaný pomocou štandardných značiek HTML.

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

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>

Zoznam skupín

Vytvorte zoznamy obsahu na karte pomocou skupiny flush list.

Vec
Druhá položka
Tretia položka

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>

Odporúčané

Vec
Druhá položka
Tretia položka

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>

Vec
Druhá položka
Tretia položka

Päta karty

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>

Kuchynský drez

Zmiešajte a spojte viacero typov obsahu, aby ste vytvorili kartu, ktorú potrebujete, alebo tam vložte všetko. Nižšie sú zobrazené štýly obrázkov, bloky, štýly textu a skupina zoznamov – všetko zabalené do karty s pevnou šírkou.

Názov karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Vec
Druhá položka
Tretia položka

Odkaz na kartu Ďalší odkaz

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>

Hlavička a päta

Pridajte voliteľnú hlavičku a/alebo pätu na kartu.

Odporúčané

Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam

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>

.card-headerHlavičky kariet je možné upraviť pridaním <h*>prvkov.

Odporúčané

Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam

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>

Citovať

Známy citát obsiahnutý v prvku blockquote.

Niekto slávny v Source Title

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>

Odporúčané

Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam

pred 2 dňami

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>

Dimenzovanie

Karty nepredpokladajú žiadny konkrétny widthzačiatok, takže ak nie je uvedené inak, budú 100 % široké. Môžete to zmeniť podľa potreby pomocou vlastných CSS, tried mriežky, mixov mriežky Sass alebo pomôcok.

Použitie mriežkového označenia

Pomocou mriežky obalte karty podľa potreby do stĺpcov a riadkov.

Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam

Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam

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>

Používanie pomôcok

Na rýchle nastavenie šírky karty použite naše množstvo dostupných nástrojov na úpravu veľkosti .

Názov karty

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Tlačidlo

Názov karty

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Tlačidlo

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>

Použitie vlastného CSS

Na nastavenie šírky použite vlastný CSS vo svojich šablónach so štýlmi alebo ako vložené štýly.

Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam

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>

Zarovnanie textu

Pomocou našich tried zarovnania textu môžete rýchlo zmeniť zarovnanie textu ľubovoľnej karty – celej jej alebo konkrétnych častí .

Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam

Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam

Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam

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>

Pridajte navigáciu do hlavičky (alebo bloku) karty pomocou navigačných komponentov Bootstrapu .

Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam

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>

Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam

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>

snímky

Karty obsahujú niekoľko možností pre prácu s obrázkami. Vyberte si medzi pripájaním „uzáverov obrázkov“ na ktorýkoľvek koniec karty, prekrytím obrázkov obsahom karty alebo jednoduchým vložením obrázka na kartu.

Obrázkové čiapky

Podobne ako hlavičky a päty môžu karty obsahovať horné a spodné „uzávery obrázkov“ – obrázky v hornej alebo dolnej časti karty.

Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Naposledy aktualizované pred 3 minútami

Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Naposledy aktualizované pred 3 minútami

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>

Prekryvné obrázky

Premeňte obrázok na pozadie karty a prekryte text karty. V závislosti od obrázka môžete alebo nemusíte potrebovať ďalšie štýly alebo pomôcky.

Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Naposledy aktualizované pred 3 minútami

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>

Upozorňujeme, že obsah by nemal byť väčší ako výška obrázka. Ak je obsah väčší ako obrázok, zobrazí sa mimo obrázka.

Horizontálne

Pomocou kombinácie mriežkových a úžitkových tried môžu byť karty horizontálne prispôsobené mobilným a citlivým spôsobom. V nižšie uvedenom príklade odstránime mriežkové odkvapy .g-0a použijeme .col-md-*triedy, aby bola karta v mdbode prerušenia vodorovná. V závislosti od obsahu karty môžu byť potrebné ďalšie úpravy.

Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Naposledy aktualizované pred 3 minútami

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>

Štýly kariet

Karty obsahujú rôzne možnosti prispôsobenia ich pozadia, okrajov a farby.

Pozadie a farba

Pridané vo verzii 5.2.0

Nastavte a background-colors kontrastným popredím colors našimi .text-bg-{color}pomocníkmi . Predtým bolo potrebné manuálne spárovať váš výber .text-{color}a .bg-{color}nástroje na úpravu štýlu, ktoré môžete stále používať, ak chcete.

Hlavička

Názov hlavnej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička

Názov sekundárnej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička

Názov karty úspechu

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička

Názov karty nebezpečenstva

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička

Názov výstražnej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička

Názov informačnej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička

Názov svetlej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička

Tmavý názov karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

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>

Odovzdanie významu asistenčným technológiám

Použitie farby na pridanie významu poskytuje iba vizuálnu indikáciu, ktorá nebude poskytnutá používateľom asistenčných technológií – ako sú čítačky obrazovky. Uistite sa, že informácia označená farbou je buď zrejmá zo samotného obsahu (napr. viditeľný text), alebo je zahrnutá alternatívnymi prostriedkami, ako je dodatočný text skrytý spolu s .visually-hiddentriedou.

Hranica

Použite hraničné nástroje na zmenu len border-colorkarty. Všimnite si, že triedy môžete umiestniť .text-{color}na rodiča .cardalebo podmnožinu obsahu karty, ako je uvedené nižšie.

Hlavička

Názov hlavnej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička

Názov sekundárnej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička

Názov karty úspechu

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička

Názov karty nebezpečenstva

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička

Názov výstražnej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička

Názov informačnej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička

Názov svetlej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička

Tmavý názov karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

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 utility

Môžete tiež zmeniť okraje na hlavičke a päte karty podľa potreby a dokonca ich odstrániť background-colorpomocou .bg-transparent.

Hlavička

Názov karty úspechu

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Päta

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>

Rozloženie karty

Okrem úpravy obsahu v rámci kariet obsahuje Bootstrap niekoľko možností na usporiadanie sérií kariet. Tieto možnosti rozloženia zatiaľ nereagujú .

Skupiny kariet

Skupiny kariet použite na vykreslenie kariet ako jedného pripojeného prvku s rovnakou šírkou a výškou stĺpcov. Skupiny kariet začínajú naskladané a používajú display: flex;sa na pripevnenie s jednotnými rozmermi od smbodu zlomu.

Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Naposledy aktualizované pred 3 minútami

Názov karty

Táto karta má nižšie uvedený podporný text ako prirodzený návod na ďalší obsah.

Naposledy aktualizované pred 3 minútami

Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Táto karta má ešte dlhší obsah ako prvá, čo ukazuje akciu rovnakej výšky.

Naposledy aktualizované pred 3 minútami

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>

Pri použití skupín kariet s pätami sa ich obsah automaticky zarovná.

Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Naposledy aktualizované pred 3 minútami

Názov karty

Táto karta má nižšie uvedený podporný text ako prirodzený návod na ďalší obsah.

Naposledy aktualizované pred 3 minútami

Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Táto karta má ešte dlhší obsah ako prvá, čo ukazuje akciu rovnakej výšky.

Naposledy aktualizované pred 3 minútami

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>

Grid karty

Pomocou mriežkového systému Bootstrap a jeho .row-colstried môžete ovládať, koľko stĺpcov mriežky (omotaných okolo vašich kariet) zobrazíte na riadok. Tu je napríklad rozloženie .row-cols-1kariet na jeden stĺpec a .row-cols-md-2rozdelenie štyroch kariet na rovnakú šírku vo viacerých riadkoch, od stredného bodu zlomu nahor.

Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu.

Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

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>

Zmeňte ho na .row-cols-3a uvidíte obal štvrtej karty.

Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu.

Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

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>

Keď potrebujete rovnakú výšku, pridajte .h-100do kariet. Ak chcete štandardne rovnaké výšky, môžete to nastaviť $card-height: 100%v Sass.

Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Názov karty

Toto je krátka karta.

Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu.

Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

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>

Rovnako ako pri skupinách kariet sa päty kariet automaticky zarovnajú.

Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Naposledy aktualizované pred 3 minútami

Názov karty

Táto karta má nižšie uvedený podporný text ako prirodzený návod na ďalší obsah.

Naposledy aktualizované pred 3 minútami

Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Táto karta má ešte dlhší obsah ako prvá, čo ukazuje akciu rovnakej výšky.

Naposledy aktualizované pred 3 minútami

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>

Murárstvo

v4Použili sme iba techniku CSS na napodobnenie správania stĺpov podobných murivu , ale táto technika mala veľa nepríjemných vedľajších účinkov . Ak chcete mať tento typ rozloženia v v5, môžete použiť doplnok Masonry. Masonry nie je súčasťou Bootstrapu , ale vytvorili sme ukážkový príklad , ktorý vám pomôže začať.

CSS

Premenné

Pridané vo verzii 5.2.0

Ako súčasť vyvíjajúceho sa prístupu premenných CSS od Bootstrapu, karty teraz používajú lokálne premenné CSS zapnuté .cardna vylepšené prispôsobenie v reálnom čase. Hodnoty pre premenné CSS sa nastavujú cez Sass, takže prispôsobenie Sass je stále podporované.

  --#{$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 premenné

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

karty

O

Príklad

Názov karty

Typy obsahu

Telo

Názvy, text a odkazy

Názov karty

Podnadpis karty

snímky

Zoznam skupín

Kuchynský drez

Názov karty

Hlavička a päta

Špeciálne spracovanie titulu

Odporúčané

Špeciálne spracovanie titulu

Špeciálne spracovanie titulu

Dimenzovanie

Použitie mriežkového označenia

Špeciálne spracovanie titulu

Špeciálne spracovanie titulu

Používanie pomôcok

Názov karty

Názov karty

Použitie vlastného CSS

Špeciálne spracovanie titulu

Zarovnanie textu

Špeciálne spracovanie titulu

Špeciálne spracovanie titulu

Špeciálne spracovanie titulu

Navigácia

Špeciálne spracovanie titulu

Špeciálne spracovanie titulu

snímky

Obrázkové čiapky

Názov karty

Názov karty

Prekryvné obrázky

Názov karty

Horizontálne

Názov karty

Štýly kariet

Pozadie a farba

Názov hlavnej karty

Názov sekundárnej karty

Názov karty úspechu

Názov karty nebezpečenstva

Názov výstražnej karty

Názov informačnej karty

Názov svetlej karty

Tmavý názov karty

Odovzdanie významu asistenčným technológiám

Hranica

Názov hlavnej karty

Názov sekundárnej karty

Názov karty úspechu

Názov karty nebezpečenstva

Názov výstražnej karty

Názov informačnej karty

Názov svetlej karty

Tmavý názov karty

Mixins utility

Názov karty úspechu

Rozloženie karty

Skupiny kariet

Názov karty

Názov karty

Názov karty

Názov karty

Názov karty

Názov karty

Grid karty

Názov karty

Názov karty

Názov karty

Názov karty

Názov karty

Názov karty

Názov karty