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 minulej lekcii, Riešené úlohy k 11.-12. lekciu Bootstrap CSS frameworku , sme si predstavili list group. V tej dnešnej nás v CSS frameworku Bootstrap čakajú karty.

Karty

Cards sú v Bootstrap 4 novinkou a pôsobí tu ako univerzálny kontajnery na ďalší HTML obsah. V starších verziách sa k tejto funkcionalite využívali panely, wells (studne) a miniatúry (thumbnails). Tieto všetky 3 kontajnery teraz vytvoríme len za pomoci kariet priradením modifikačných tried.

Ukážka

Ukážme si kód karty, ktorá sa často používa napr. K výpisu 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 veľa 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 ako inak, než divom sa 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ívne (viď ďalej). Rovnako tak 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. Ak 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šimnite si, že aj nadpis má priradenú triedu .card-title, podnadpis .card-subtitle a nejaké ďalšie triedy pre margin a farbu. Bod s textom má triedu .card-text.

Karta len s .card-bodmi

Jednoduché karty môžeme vytvoriť len pomocou divov sa triedami .card a .card-body. Ku štýlovanie môžeme použiť štandardné pozadia a text utility.

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

Pomocou border utilít 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 naozaj 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 sa triedou .card-header. Namiesto elementu <h4> by sme mohli použiť aj element <div>. Takáto 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 responzivního gridu. Keďže sa rozťahujú cez celý rodičovský element, budú sa krásne prispôsobovať a zalamovať presne ako 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ýsledok:

Podrobnosti o gridu 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 nakouknutí bude k navigáciám, ku ktorým sa ešte len dostaneme. Komponenty Bootstrap sú medzi sebou rôzne previazané a preto je nemožné vysvetliť je 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ívne vzhľad, kde sú namiesto záložiek v lište tlačidlá, využijeme tried .nav-pills a .card-header-pills a triedy .nav-tabs a .card-header-tabs odoberieme.

výsledok:

Obrázkové pozadia

Vďaka podpore image Overlays môžeme kartám priradiť obrázkové pozadia. To však nevložíte ako obrázok na pozadí, ale ako element <img> sa triedou .card-img. Ďalší obsah karty bude cez obrázok zobrazený ako tzv. Overlay, prekrytie, 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činou od informačních technologií? :)</p>
    </div>
</div>

výsledok:

Farby môžeme používať aj u hlavičky a pätičky. Ak 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 tzv. Skupiny kariet (card groups). Tie sú na rozdiel od gridu nalepené tesne na seba. Asi je zbytočne podotýkať, že výsledok je plne responzívne. Ak zmenšíte 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č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ýsledok:

Všimnite si, že pätičky sa zarovnali vedľa seba, aj keď je každá karta v skutočnosti inak vysoká. Čo viac si môže webdesigner priať?

Okrem triedy .card-group môžeme použiť aj .card-deck. Karty sú potom ďalej od seba.

Múru

Máte veľa kariet rôznych výšok, napr. Fotografií, a chceli by ste z nich poskladať stene ako vyzerajú napr. Na Google+? Táto fíčura je pravdepodobne jedna z najlepších v Bootstrap, posúďte sami.

Všetky karty obalíme elementom <div> sa triedou .card-columns. Potom už nie je k dosiahnutiu rozloženiu využívaný flex box, ale CSS columns. Položky sa radí zhora nadol a zľava doprava. Druhá položka je teda stále v prvom stĺpci a tak ďalej.

<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ýsledok v prehliadači:

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