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 pomocí 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> s třídou
.card. Ve výchozím nastavení se karty roztahují přes celou
šířku rodičovského elementu, my 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 třídu má přiřazenou i nadpis .card-title a podnadpis
.card-subtitle (s dalšími třídami pro margin a barvu). Odstavec
s textem má třídu .card-text.
Karta pouze s .card-body
Jednoduché karty můžeme vytvořit pouze pomocí elementů
<div> s 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:
<body> <div class="card bg-danger text-white"> <div class="card-body"> Nikdy nevkládejte neošetřené proměnné přímo do SQL dotazů! </div> </div> </body>
Jako vždy bychom měli při použití barevných utilit přidat také
<span> s třídou .visually-hidden s informacemi
pro hlasové čtečky, co barva označuje.
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:
<body> <div class="card border-success"> <div class="card-body text-success"> <h4 class="card-title">Splacená částka</h4> Splaceno 100 % </div> </div> </body>
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 a 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 s 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 přidělujeme třídu
.card-link, která jim dodá pravý okraj a díky čemuž je
můžeme 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 také vložit do responzivního gridu. Jelikož se karty 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
Dále krátce nahlédneme k navigacím, k nimž se teprve dostaneme. Komponenty Bootstrapu jsou mezi sebou různě provázané, a proto je nemožné vše v kurzu vysvětlit 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řídy .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> s třídou .card-img. Další obsah karty
bude přes obrázek zobrazen jako tzv. overlay, tedy překryvná vrstva, a to
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. Výsledek je plně responzivní. Pokud zmenšíme okno prohlížeče a karty se vedle sebe nevejdou, začnou se řadit pod 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, přestože je každá karta ve skutečnosti jinak vysoká.
V příští lekci, Bootstrap - Carousely a progress, nás čekají komponenty carousel a progress.
David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.