Lekce 13 - Bootstrap - Karty
V předešlém cvičení, Řešené úlohy k 11.-12. lekci Bootstrap CSS frameworku, jsme si procvičili nabyté zkušenosti z předchozích lekcí.
V dnešním tutoriálu CSS frameworku Bootstrap nás čekají karty.
Karty v Bootstrapu
Karty (Cards) v Bootstrapu jsou multifunkční komponenty, které poskytují univerzální kontejnery pro další HTML obsah. Ve starších verzích se k této funkcionalitě využívaly panely, wells (studny) a miniatury (thumbnails). Nyní lze všechny tyto kontejnery vytvořit jen za pomoci karet s příslušnými modifikačními třídami.
Ukažme si kód karty, která se často používá např. k výpisu položek v e-shopu. Bude obsahovat obrázek, titulek, podtitulek, popis a tlačítko:
<div class="card" style="width: 20rem;"> <img class="card-img-top" src="https://www.itnetwork.cz/images/5/css/bootstrap/itnetwork_tshirt.jpg" alt="Tričko ITnetwork"> <div class="card-body"> <h4 class="card-title">Tričko ITnetwork</h4> <h6 class="card-subtitle mb-2 text-muted">kolekce jaro-léto</h6> <p class="card-text">Programátorské tričko ze 100% bavlny pro všechny pravé geeky.</p> <a href="#" class="btn btn-primary">Do košíku</a> </div> </div>
Do karty jsme vložili opravdu mnoho položek, abychom si je představili. V praxi by lépe vypadala jen s některými z nich. Výsledek v prohlížeči:
Kartu vytvoříme elementem <div>
se třídou
.card
. Ve výchozím nastavení se karty roztahují přes celou
šířku rodičovského elementu, zde jsme té naší specifikovali šířku
20 rem
. Úplně ideální by bylo vložit kartu do gridu, čímž
by byla její šířka responzivní (viz dále). Stejně tak můžeme použít
utility třídy jako např. .w-50
pro 50 % šířky a podobně.
Pro obrázek jsme použili třídu .card-img-top
. Pokud bychom
obrázek umístili dolů, přiřadili bychom mu třídu
.card-img-bottom
. Poslední <div>
má třídu
.card-body
a obsahuje jakýkoli HTML obsah karty. Všimněme si,
že i nadpis má přiřazenou třídu .card-title
, podnadpis
.card-subtitle
a nějaké další třídy pro margin a barvu.
Odstavec s textem má třídu .card-text
.
Karta jen s .card-body
Jednoduché karty můžeme vytvořit pouze pomocí divů se třídami
.card
a .card-body
. Ke stylování můžeme použít
standardní background a text utility, o kterých jsme mluvili v lekci Bootstrap - Tabulky:
Jako vždy při použití barevných utilit bychom měli přidat i
<span>
se třídou .visually-hidden
s
informacemi, co barva označuje pro hlasové čtečky.
Pomocí border utilit, které známe z lekce Bootstrap - Obrázky, můžeme upravovat i rámeček. To se hodí pro jemné barevné zvýraznění karty:
Hlavička/patička, list groups a odkazy
Karty jsou ve frameworku Bootstrap opravdu mocným pomocníkem. V další ukázce si předvedeme jak definovat hlavičku nebo patičku karty, jak do ní vložit list group a odkazy:
<div class="card" style="width: 20rem;"> <h4 class="card-header"> Jan Novák </h4> <ul class="list-group list-group-flush"> <li class="list-group-item active">Události</li> <li class="list-group-item">Zprávy</li> <li class="list-group-item">Články</li> <li class="list-group-item disabled">Aukce</li> </ul> <div class="card-body"> <a href="#" class="card-link">Odkaz 1</a> <a href="#" class="card-link">Odkaz 2</a> </div> </div>
Hlavičku karet definujeme pomocí elementu se třídou
.card-header
. Místo elementu <h4>
bychom mohli
použít i element <div>
. Taková hlavička by poté mohla
obsahovat libovolný HTML obsah a byla by stále podbarvena šedě. List group
přiřazujeme třídu .list-group-flush
, která způsobí, že rohy
okolo list group nebudou zaoblené. Odkazům dodáváme třídu
.card-link
, která odkazům dodá pravý okraj a můžeme je snadno
skládat vedle sebe.
Výsledek v prohlížeči:
Obsahy samozřejmě můžeme míchat se vším, co jsme si již ukázali
výše (obrázky, nadpisy, ...). Patičku bychom přidali obdobně a to pomocí
elementu <div>
na konci karty, kterému bychom přiřadili
třídu .card-footer
.
Použití gridu
Karty můžeme vložit do responzivního gridu. Jelikož se roztahují přes celý rodičovský element, budou se krásně přizpůsobovat a zalamovat přesně tak, jak si na gridu definujeme:
<div class="row"> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Karta 1</h4> <p class="card-text">Karta vložená v responzivním gridu. Zkuste si zmenšit velikost okna a zalomí se.</p> <a href="#" class="btn btn-primary">Tlačítko</a> </div> </div> </div> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Karta 2</h4> <p class="card-text">Karta vložená v responzivním gridu. Zkuste si zmenšit velikost okna a zalomí se.</p> <a href="#" class="btn btn-primary">Tlačítko</a> </div> </div> </div> </div>
Výsledek:
Podrobnosti o gridu se dozvíme dále v kurzu, poté se sem můžete vrátit a vyzkoušet si další jeho funkce s kartami uvnitř.
Navigace
Další nakouknutí bude k navigacím, ke kterým se teprve dostaneme. Komponenty Bootstrapu jsou mezi sebou různě provázané a proto je nemožné vysvětlit je v kurzu postupně. To ale vůbec nevadí, podívejme se, jak se do hlavičky karty vloží navigační lišta a zbytek si vysvětlíme později:
<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="#">Aktivní</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Odkaz</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Neaktivní</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">Nadpis</h4> <p class="card-text">Obsah karty.</p> </div> </div>
Výsledek:
Pro alternativní vzhled, kde jsou místo záložek v liště tlačítka,
využijeme tříd .nav-pills
a .card-header-pills
a
třídy .nav-tabs
a .card-header-tabs
odebereme.
Výsledek:
Obrázkové pozadí
Díky podpoře image overlays můžeme kartám přiřadit obrázkové
pozadí. To však nevložíme jako obrázek na pozadí, ale jako element
<img>
se třídou .card-img
. Další obsah karty
bude přes obrázek zobrazen jako tzv. overlay, překryvná vrstva, pomocí
třídy .card-img-overlay
:
<div class="card text-white" style="text-shadow: black 0px 0px 5px;"> <img class="card-img" src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_les.jpeg" alt="Les"> <div class="card-img-overlay" style="text-shadow: black 0px 0px 5px;"> <h4 class="card-title">Odpočíváte také někdy?</h4> <p class="card-text">Víte, že do lesa si můžete zajít odpočinout od informačních technologií? :)</p> </div> </div>
Výsledek:
Barvy můžeme používat i u hlavičky a patičky. Pokud bychom chtěli, aby
byla hlavička nebo patička průhledná, použijeme třídu
.bg-transparent
.
Layouty
Kromě tvorby layoutů pomocí gridu pro nás Bootstrap připravil i takzvané skupiny karet (card groups). Ty jsou na rozdíl od gridu nalepené těsně na sebe. Asi je zbytečně podotýkat, že výsledek je plně responzivní. Pokud zmenšíme okno prohlížeče a karty se vedle sebe nevejdou, začnou se řadit nad sebe:
<div class="card-group"> <div class="card"> <img class="card-img-top" src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_les.jpeg" alt="Les"> <div class="card-body"> <h4 class="card-title">Les</h4> <p class="card-text">Víte, že do lesa si můžete zajít odpočinout od informačních technologií? :) Dobrý je například ten Klánovický hned u Prahy.</p> </div> <div class="card-footer"> <small class="text-muted">21. září</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_poust.jpeg" alt="Poušť"> <div class="card-body"> <h4 class="card-title">Poušť</h4> <p class="card-text">Tato karta je velmi krátká.</p> </div> <div class="card-footer"> <small class="text-muted">12. listopadu</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_jezero.jpeg" alt="Jezero"> <div class="card-body"> <h4 class="card-title">Jezero</h4> <p class="card-text">Jezera se často vyskytovala v poezii, pravděpodobně pro pocity plynoucí z klidné hladiny rozlehlé vodní plochy. Není náhodou, že jedno z nejznámějších českých jezer nese jméno Karla Hynka Máchy, autora známé básně Máj.</p> </div> <div class="card-footer"> <small class="text-muted">6. února</small> </div> </div> </div>
Výsledek:
Všimněme si, že patičky se zarovnaly vedle sebe, i když je každá karta ve skutečnosti jinak vysoká.
V příští lekci, Bootstrap - Carousely a Progress, nás čekají komponenty carousel a progress.