13. diel - Bootstrap - Karty

V predchádzajúcom cvičení, Riešené úlohy k 11.-12. lekciu Bootstrap CSS frameworku, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V dnešnom tutoriáli CSS frameworku Bootstrap nás čakajú karty.

Karty v Bootstrape

Karty (Cards) v Bootstrape sú multifunkčné komponenty, ktoré poskytujú univerzálne kontajnery pre ďalší HTML obsah. V starších verziách sa k tejto funkcionalite využívali panely, wells (studne) a miniatúry (thumbnails). Teraz je možné všetky tieto kontajnery vytvoriť len za pomoci kariet s príslušnými modifikačnými triedami.

Ukážme si kód karty, ktorá sa často používa napr. na výpis položiek v e-shope. Bude obsahovať obrázok, titulok, podtitulok, popis a tlačidlo:

<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 sme vložili naozaj mnoho položiek, aby sme si ich predstavili. V praxi by lepšie vyzerala len s niektorými z nich. Výsledok v prehliadači:

Kartu vytvoríme elementom <div> s triedou .card. V predvolenom nastavení sa karty rozťahujú cez celú šírku rodičovského elementu, tu sme tej našej špecifikovali šírku 20 rem. Úplne ideálne by bolo vložiť kartu do gridu, čím by bola jej šírka responzívna (viď ďalej). Rovnako môžeme použiť utility triedy ako napr. .w-50 pre 50 % šírky a podobne.

Pre obrázok sme použili triedu .card-img-top. Pokiaľ by sme obrázok umiestnili dole, priradili by sme mu triedu .card-img-bottom. Posledná <div> má triedu .card-body a obsahuje akýkoľvek HTML obsah karty. Všimnime si, že aj nadpis má priradenú triedu .card-title, podnadpis .card-subtitle a nejaké ďalšie triedy pre margin a farbu. Odsek s textom má triedu .card-text.

Karta len s .card-body

Jednoduché karty môžeme vytvoriť iba pomocou divov s triedami .card a .card-body. Na štýlovanie môžeme použiť štandardné background a text utility, o ktorých sme hovorili v lekcii Bootstrap - Tabuľky:

Ako vždy pri použití farebných utilít by sme mali pridať aj <span> s triedou .visually-hidden s informáciami, čo farba označuje pre hlasové čítačky.

Pomocou border utilít, ktoré poznáme z lekcie Bootstrap - Obrázky, môžeme upravovať aj rámček. To sa hodí pre jemné farebné zvýraznenie karty:

Hlavička/pätička, list groups a odkazy

Karty sú vo frameworku Bootstrap skutočne mocným pomocníkom. V ďalšej ukážke si predvedieme ako definovať hlavičku alebo pätičku karty, ako do nej vložiť 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 kariet definujeme pomocou elementu s triedou .card-header. Namiesto elementu <h4> by sme mohli použiť aj element <div>. Taká hlavička by potom mohla obsahovať ľubovoľný HTML obsah a bola by stále podfarbená sivo. List group priraďujeme triedu .list-group-flush, ktorá spôsobí, že rohy okolo list group nebudú zaoblené. Odkazom dodávame triedu .card-link, ktorá odkazom dodá pravý okraj a môžeme ich ľahko skladať vedľa seba.

Výsledok v prehliadači:

Obsahy samozrejme môžeme miešať so všetkým, čo sme si už ukázali vyššie (obrázky, nadpisy, ...). Pätičku by sme pridali obdobne a to pomocou elementu <div> na konci karty, ktorému by sme priradili triedu .card-footer.

Použitie gridu

Karty môžeme vložiť do responzívneho gridu. Keďže sa rozťahujú cez celý rodičovský element, budú sa krásne prispôsobovať a zalamovať presne tak, ako si na gride 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ýsledok:

Podrobnosti o gride sa dozvieme ďalej v kurze, potom sa sem môžete vrátiť a vyskúšať si ďalšie jeho funkcie s kartami vo vnútri.

Navigácia

Ďalšie nahliadnutie bude k navigáciám, ku ktorým sa ešte len dostaneme. Komponenty Bootstrapu sú medzi sebou rôzne previazané a preto je nemožné vysvetliť ich v kurze postupne. To ale vôbec nevadí, pozrime sa, ako sa do hlavičky karty vloží navigačná lišta a zvyšok si vysvetlíme neskôr:

<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ýsledok:

Pre alternatívny vzhľad, kde sú namiesto záložiek v lište tlačidla, využijeme triedy .nav-pills a .card-header-pills a triedy .nav-tabs a .card-header-tabs odoberieme.

Výsledok:

Obrázkové pozadie

Vďaka podpore image overlays môžeme kartám priradiť obrázkové pozadie. To však nevložíme ako obrázok na pozadí, ale ako element <img> s triedou .card-img. Ďalší obsah karty bude cez obrázok zobrazený ako tzv. overlay, prekryvná vrstva, pomocou triedy .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ýsledok:

Farby môžeme používať aj pri hlavičkách a pätičkách. Pokiaľ by sme chceli, aby bola hlavička alebo pätička priehľadná, použijeme triedu .bg-transparent.

Layouty

Okrem tvorby layoutov pomocou gridu pre nás Bootstrap pripravil aj takzvané skupiny kariet (card groups). Tie sú na rozdiel od gridu nalepené tesne na seba. Asi ich zbytočne podotýkať, že výsledok je plne responzívny. Pokiaľ zmenšíme okno prehliadača a karty sa vedľa seba nezmestia, začnú sa radiť nad seba:

<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ýsledok:

Všimnime si, že pätičky sa zarovnali vedľa seba, aj keď je každá karta v skutočnosti inak vysoká.

V budúcej lekcii, Bootstrap - Carousely a Progress , nás čakajú komponenty carousel a progress.