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.