Bootstrap 4 karty
karty
Karta v Bootstrap 4 je ohraničená krabička s nějakým vycpávkou kolem jejího obsahu. Obsahuje možnosti pro záhlaví, zápatí, obsah, barvy atd.
Základní karta
Základní karta je vytvořena s .cardtřídou a obsah uvnitř karty má .card-bodytřídu:
Příklad
<div class="card">
<div class="card-body">Basic
card</div>
</div>
Pokud znáte Bootstrap 3, karty nahrazují staré panely, jamky a miniatury.
Záhlaví a zápatí
Třída .card-headerpřidá nadpis na kartu a .card-footertřída přidá zápatí na kartu:
Příklad
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
Kontextové karty
Chcete-li přidat barvu pozadí karty, použijte kontextové třídy ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondarya .bg-dark..bg-light
Příklad
Titulky, text a odkazy
Slouží .card-titlek přidání názvů karet k libovolnému prvku nadpisu. Třída .card-textse používá k odstranění spodních okrajů prvku <p>, pokud je posledním (nebo jediným) podřízeným prvkem uvnitř .card-body. Třída .card-linkpřidá modrou barvu každému odkazu a efekt přechodu.
Příklad
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p
class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#"
class="card-link">Another link</a>
</div>
</div>
Obrázky karet
Přidejte .card-img-topnebo .card-img-bottomdo
<img>a umístěte obrázek nahoře nebo dole uvnitř karty. Všimněte si, že jsme přidali obrázek mimo, .card-bodyaby zabíral celou šířku:
Příklad
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-body">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Natažený odkaz
Přidejte .stretched-linktřídu do odkazu uvnitř karty a na celou kartu bude možné kliknout a umístit na ni kurzor (karta bude fungovat jako odkaz):
Příklad
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
Překryvné obrázky karet
Proměňte obrázek na pozadí karty a použijte .card-img-overlay
k přidání textu na horní část obrázku:
Příklad
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-img-overlay">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Sloupce karet
Nějaký text uvnitř první karty
Nějaký text uvnitř druhé karty
Nějaký text uvnitř třetí karty
Nějaký text uvnitř čtvrté karty
Nějaký text uvnitř páté karty
Nějaký text uvnitř šesté karty
Třída .card-columnsvytvoří mřížku karet podobnou zdiva (jako Pinterest). Rozložení se automaticky upraví, jakmile vložíte více karet.
Poznámka: Karty se zobrazují svisle na malých obrazovkách (méně než 576 pixelů):
Příklad
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
<div
class="card bg-light">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fifth
card</p>
</div>
</div>
<div
class="card bg-info">
<div class="card-body
text-center">
<p class="card-text">Some text inside the sixth
card</p>
</div>
</div>
</div>
Balíček karet
Nějaký text uvnitř první karty
Ještě nějaký text pro zvýšení výšky
Ještě nějaký text pro zvýšení výšky
Ještě nějaký text pro zvýšení výšky
Nějaký text uvnitř druhé karty
Nějaký text uvnitř třetí karty
Nějaký text uvnitř čtvrté karty
Třída .card-deckvytvoří mřížku karet, které mají stejnou výšku a šířku . Rozložení se automaticky upraví, jakmile vložíte více karet.
Poznámka: Karty se zobrazují svisle na malých obrazovkách (méně než 576 pixelů):
Příklad
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>
Skupina karet
Nějaký text uvnitř první karty
Ještě nějaký text pro zvýšení výšky
Ještě nějaký text pro zvýšení výšky
Ještě nějaký text pro zvýšení výšky
Nějaký text uvnitř druhé karty
Nějaký text uvnitř třetí karty
Nějaký text uvnitř čtvrté karty
Třída .card-groupje podobná .card-deck. Jediný rozdíl je v tom, že .card-grouptřída odstraňuje levý a pravý okraj mezi každou kartou.
Poznámka: Karty se zobrazují svisle na malých obrazovkách (méně než 576 pixelů), S horním a spodním okrajem:
Příklad
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>