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

Cards jsou v Bootstrapu 4 novinkou a působí zde jako univerzální kontejnery na další HTML obsah. Ve starších verzích se k této funkcionalitě využívaly panely, wells (studny) a miniatury (thumbnails). Tyto všechny 3 kontejnery nyní vytvoříme jen za pomoci karet přiřazením modifikačních tříd.

Ukázka

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 jak jinak, než divem 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ěte 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.

Jako vždy při použití barevných utilit bychom měli přidat i <span> se třídou .sr-only s informacemi co barva označuje pro hlasové čtečky.

Pomocí border utilit 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ě 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 tzv. 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šíte 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činou od informačních technologií? :) Dobrý je např. 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ěte si, že patičky se zarovnaly vedle sebe, i když je každá karta ve skutečnosti jinak vysoká. Co více si může webdesigner přát?

Kromě třídy .card-group můžeme použít i .card-deck. Karty jsou potom dále od sebe.

Zdi

Máte mnoho karet různých výšek, např. fotografií, a chtěli byste z nich poskládat zdi jako vypadají např. na Google+? Tato fíčura je pravděpodobně jedna z nejlepších v Bootstrapu, posuďte sami.

Všechny karty obalíme elementem <div> se třídou .card-columns. Poté již není k dosažení rozložení využíván flex box, ale CSS columns. Položky se řadí shora dolů a zleva doprava. Druhá položka je tedy stále v prvním sloupci a tak dále.

<div class="card-columns">
    <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činou od informačních technologií? :) Dobrý je např. 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.dropbox.com/s/j81olx214b9wjoc/itnetwork_tshirt.jpg?dl=1" alt="Tričko ITnetwork">
        <div class="card-body">
            <h4 class="card-title">Tričko ITnetwork</h4>
            <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>
    <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 bg-danger text-white">
        <div class="card-body">
            Nikdy nevkládejte neošetřené proměnné přímo do SQL dotazů!
        </div>
    </div>
    <div class="card border-success">
        <div class="card-body text-success">
            <h4 class="card-title">Splacená částka</h4>
            Splaceno 100%
        </div>
    </div>
    <div class="card">
        <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>
    <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 prohlížeči:

V příští lekci, Bootstrap - Carousely a Progress, nás čekají komponenty carousel a progress.