karty
Bootstrapové karty poskytujú flexibilný a rozšíriteľný kontajner obsahu s viacerými variantmi a možnosťami.
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<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.
<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-title
k <h*>
štítku. Rovnakým spôsobom sa odkazy pridávajú a umiestňujú vedľa seba pridaním .card-link
do <a>
značky.
Titulky sa používajú pridaním a .card-subtitle
k <h*>
značke. Ak sú .card-title
položky .card-subtitle
a umiestnené v .card-body
polož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<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-top
umiestni obrázok na vrch karty. Pomocou .card-text
, môžete na kartu pridať text. Text vo vnútri .card-text
môž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.
<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
<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>
- Vec
- Druhá položka
- Tretia položka
<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
<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
<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.
Špeciálne spracovanie titulu
S podporným textom nižšie ako prirodzený návod na ďalší obsah.
Ísť niekam<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-header
Hlavič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<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>
Známy citát obsiahnutý v prvku blockquote.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
Špeciálne spracovanie titulu
S podporným textom nižšie ako prirodzený návod na ďalší obsah.
Ísť niekam<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 width
zač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<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 .
<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<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<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>
Navigácia
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<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">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<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í na 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
<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.
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
Horizontálne
Pomocou kombinácie mriežkových a úžitkových tried môžu byť karty vyrobené horizontálne spôsobom, ktorý je vhodný pre mobilné zariadenia a reaguje. V nižšie uvedenom príklade odstránime mriežkové odkvapy .no-gutters
a použijeme .col-md-*
triedy na to, aby bola karta v md
bode 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
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." 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
Na zmenu vzhľadu karty použite pomocné programy pre text a pozadie .
Názov hlavnej karty
Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.
Názov sekundárnej karty
Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.
Názov karty úspechu
Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.
Názov karty nebezpečenstva
Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.
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.
Názov informačnej karty
Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.
Názov svetlej karty
Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.
Tmavý názov karty
Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.
<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>
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 .sr-only
triedou.
Hranica
Použite hraničné nástroje na zmenu len border-color
karty. Všimnite si, že triedy môžete umiestniť .text-{color}
na rodiča .card
alebo podmnožinu obsahu karty, ako je uvedené nižšie.
Názov hlavnej karty
Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.
Názov sekundárnej karty
Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.
Názov karty úspechu
Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.
Názov karty nebezpečenstva
Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.
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.
Názov informačnej karty
Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.
Názov svetlej karty
Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.
Tmavý názov karty
Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.
<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 utility
Môžete tiež zmeniť okraje na hlavičke a päte karty podľa potreby a dokonca ich odstrániť background-color
pomocou .bg-transparent
.
Názov karty úspechu
Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.
<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 sm
bodu 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
<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ší.
Názov karty
Táto karta má nižšie uvedený podporný text ako prirodzený návod na ďalší obsah.
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.
<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>
Balíčky kariet
Potrebujete sadu kariet rovnakej šírky a výšky, ktoré nie sú navzájom spojené? Používajte balíčky kariet.
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ší.
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
<div class="card-deck">
<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>
<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>
Rovnako ako pri skupinách kariet, päty kariet v balíčkoch sa automaticky zoradia.
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ší.
Názov karty
Táto karta má nižšie uvedený podporný text ako prirodzený návod na ďalší obsah.
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.
<div class="card-deck">
<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-cols
tried 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-1
kariet na jeden stĺpec a .row-cols-md-2
rozdelenie š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ší.
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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-3
a 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ší.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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-100
do kariet. Ak chcete štandardne rovnaké výšky, môžete ich 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ší.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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>
Stĺpce kariet
Karty možno usporiadať do stĺpcov podobných murive.card-columns
iba pomocou CSS tak, že ich zabalíte do . Karty sú vytvorené s column
vlastnosťami CSS namiesto flexboxu pre jednoduchšie zarovnanie. Karty sú zoradené zhora nadol a zľava doprava.
Hlavy hore! Váš počet najazdených kilometrov so stĺpcami na karte sa môže líšiť. Aby sme zabránili rozbitiu kariet v stĺpcoch, musíme ich nastaviť na, display: inline-block
pretože column-break-inside: avoid
to zatiaľ nie je nepriestrelné riešenie.
Názov karty, ktorý sa zalomí do nového riadku
Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.
Známy citát obsiahnutý v prvku blockquote.
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
Známy citát obsiahnutý v prvku blockquote.
Názov karty
Táto karta má bežný názov a pod ňou krátky odsek textu.
Naposledy aktualizované pred 3 minútami
Známy citát obsiahnutý v prvku blockquote.
Názov karty
Toto je ďalšia karta s názvom a podporným textom nižšie. Táto karta má nejaký ďalší obsah, aby bola celkovo o niečo vyššia.
Naposledy aktualizované pred 3 minútami
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<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>A well-known quote, contained in a blockquote element.</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 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 bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer text-white">
<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 src="..." class="card-img" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</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>
Stĺpce kariet môžu byť tiež rozšírené a prispôsobené pomocou nejakého dodatočného kódu. Nižšie je uvedené rozšírenie .card-columns
triedy pomocou rovnakého CSS, ktorý používame – stĺpce CSS – na generovanie množiny responzívnych vrstiev na zmenu počtu stĺpcov.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}