27. diel - Bootstrap - Multimediálne objekty a kontajnery

V minulej lekcii, Bootstrap - Tooltipy , sme si predstavili Tooltipy, ich inicializácia a ovládanie JavaScriptom.

V dnešnom tutoriále CSS frameworku Bootstrap si predstavíme takzvané mediálne objekty a kontajnery.

Multimediálne objekty v Bootstrape

Media objects, slovensky mediálne objekty, sú komponenty, ktoré poznáme zo sociálnych médií, kde reprezentujú statusy alebo komentáre. V ľavej časti komponentu sa nachádza avatar alebo všeobecný obrázok, v pravej potom nadpis a text. V Bootstrape si všetko môžeme jednoducho vytvoriť. Minimálne komentáre/refe­rencie užívateľov určite využijeme vo väčšine webových projektov.

Začnime ukážkou. Základná HTML štruktúra mediálneho objektu je nasledovná:

<div class="d-flex">
    <img class="flex-shrink-0" src="https://www.itnetwork.cz/images/5/css/bootstrap/avatar.png" alt="David Hartinger" width="64" height="64">
    <div class="flex-grow-1 ms-3">
        <h5 class="mt-0">David Hartinger, 13:05</h5>
        Dnes se mě při žádosti o hypotéku ptali, jaké bylo mé poslední zaměstnání. Odpověděl jsem, že jsem nikdy zaměstnaný nebyl :)
    </div>
</div>

Celý komponent je obalený elementom <div> s triedou .d-flex. Dovnútra vkladáme obrázok, obvykle s triedou definujúcou margin, napríklad .me-3. Druhým vnoreným elementom je <div> s triedou .flex-grow-1, obsahujúcou telo mediálneho objektu.

Živá ukážka v prehliadači:

Skladanie

Ako ďalšia ukážka nasleduje skladanie mediálnych objektov do seba, čím môžeme jednoducho vyrenderovať nejakú zanorenú diskusiu, napríklad komentáre pod statusom. Ďalšie mediálne objekty umiestňujeme do tela pod obsah objektu, ktorého sa týkajú:

<div class="d-flex">
    <img class="flex-shrink-0 me-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/avatar.png" alt="David Hartinger" width="64" height="64">
    <div class="flex-grow-1">
        <h5 class="mt-0">David Hartinger, 13:05</h5>
        Dnes se mě při žádosti o hypotéku ptali, jaké bylo mé poslední zaměstnání. Odpověděl jsem, že jsem vlastně nikdy zaměstnaný nebyl :D

        <div class="d-flex mt-3">
            <a class="flex-shrink-0 ms-3" href="https://www.itnetwork.cz/portfolio/17">
                <img class="flex-shrink-0" src="https://www.itnetwork.cz/images/5/css/bootstrap/avatar_david.png" alt="David Jančík" width="64" height="64">
            </a>
            <div class="flex-grow-1">
                <h5 class="mt-0">David Jančík, 14:22</h5>
                Pojď raději do fitka! :P
            </div>
        </div>
    </div>
</div>

Výsledok:

Zarovnanie a poradie

Keďže je layout mediálnych objektov docielený pomocou flexboxu, môžeme ho prispôsobovať pomocou flex utilities z lekcie Bootstrap - Flex utilities. Ukážme si, ako zarovnať avatary na koniec príspevku namiesto na začiatok priradením triedy .align-self-end elementu <img>. Rovnako tak môžeme zmeniť aj poradie elementov a obrázok presunúť napríklad napravo. Prehodíme elementy <img> a <div> a obrázku namiesto pravého marginu nastavíme ľavý:

<div class="d-flex">
    <div class="flex-shrink-0 me-3">
        <h5 class="mt-0">David Hartinger, 13:05</h5>
        Dnes se mě při žádosti o hypotéku ptali, jaké bylo mé poslední zaměstnání.<br /><br />Odpověděl jsem, že jsem vlastně nikdy zaměstnaný nebyl :D
    </div>
    <img class="align-self-end ms-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/avatar.png" alt="David Hartinger" width="64" height="64">
</div>

Výsledok:

Mediálne zoznamy

Triedu .media môžeme použiť aj na elementy <li> zoznamov <ul> alebo <ol>. Zo zoznamu však musíme prvýkrát odstrániť predvolené štýly triedou .list-unstyled. Podobné zoznamy na sieti používame na výpis lekcií online kurzov:

<ul class="list-unstyled">
    <li class="d-flex align-items-start mb-3">
        <img class="flex-shrink-0 me-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/bootstrap-stack.png" alt="Bootstrap kurz" width="96" height="96">
        <div>
            <h5 class="mt-0 mb-1">Úvod do CSS frameworku Bootstrap</h5>
            Úvod do nejpopulárnějšího CSS frameworku vysvětlí proč bychom měli frameworky používat, vytvoříme první stránku a řekneme si kde najít šablony zdarma.
        </div>
    </li>
    <li class="d-flex align-items-start mb-3">
        <img class="flex-shrink-0 me-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/bootstrap-stack.png" alt="Bootstrap kurz" width="96" height="96">
        <div>
            <h5 class="mt-0 mb-1">Bootstrap - Reboot</h5>
            V tutoriálu si popíšeme jak Reboot resetuje výchozí CSS styly a jaké konvence bychom měli při práci s CSS frameworkem Bootstrap dodržovat.
        </div>
    </li>
    <li class="d-flex align-items-start mb-3">
        <img class="flex-shrink-0 me-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/bootstrap-stack.png" alt="Bootstrap kurz" width="96" height="96">
        <div>
            <h5 class="mt-0 mb-1">Bootstrap - Typografie</h5>
            V tutoriálu si zmíníme první Bootstrap třídy, kterými explicitně stylujeme nadpisy a podnadpisy, citace, zkratky a seznamy. Seznámíme se s utility třídami.
        </div>
    </li>
</ul>

Výsledok:

Kontajnery

Pretože sa dostávame ku grid systému, je na čase si predstaviť kontajnery. Tie v Bootstrape používame najmä kvôli centrovaniu a grid systému. Ten najjednoduchší kontajner na nejaké ďalšie elementy vytvoríme z elementu <div> pridaním triedy .container. Kontajner sa na malých viewportoch rozťahuje, ale na väčších si drží fixnú šírku podľa aktuálneho breakpointu. Farebné pozadie v ukážke pridávame len preto, aby boli vidieť hranice kontajnera:

<div class="container bg-primary">
    Kontejner
</div>

Výsledok v prehliadači:

Môžeme použiť aj triedu .container-fluid. Tá na rozdiel od .container rozťahuje kontajner vždy na 100% šírky, ako by ste od divu očakávali:

<div class="container-fluid bg-primary">
    Fluid kontejner
</div>

Výsledok:

Z-index

Bootstrap svojim komponentom, ktoré sa zobrazujú cez nejaký obsah, prideľuje také hodnoty CSS vlastnosti z-index, aby nedochádzalo ku kolíziám. Napríklad Dropdown tlačidlo z lekcie Bootstrap – Dropdowns by sa malo vždy zobraziť nad klasickým obsahom. Pokiaľ niekde použijeme modálny dialóg z lekcie Bootstrap - Modálne dialógy, mal by sa zobraziť ako nad klasickým obsahom, tak nad ešte Dropdown tlačidlami. Tooltipy z lekcie Bootstrap - Tooltipy by sa mali zobraziť úplne nad všetkým, pretože môžu byť ako v klasickom obsahu, tak v tom modálnom.

Bootsrap priraďuje týmto prekryvným komponentom nasledujúce hodnoty z-index. Pokiaľ by sme na stránku pridávali nejaký vlastný komponent, ktorý obsah prekrýva, mali by sme ho priradiť taký z-index, aby bol s týmito hodnotami v súlade:

• Dropdowny - 1000,
• Sticky elementy - 1020,
• Fixed elementy - 1030,
• Pozadie (backdrop) modálnych prvkov - 1040,
• Modálne prvky 1050,
• Popovery - 1060,
• Tooltipy - 1070.

Gratulujem! Teraz ovládate mocný nástroj, ktorý vám umožní tvoriť šablóny oveľa rýchlejšie, než to zvládnu ostatní, ktorí ho nepoznajú. A to sa vám určite bude hodiť! Vývoj softvéru zaberie veľa času, keď ho niekde dokážete ušetriť, budete úspešnejší:)

V nasledujúcom kvíze, Kvíz - Bootstrap, si vyskúšame nadobudnuté skúsenosti z kurzu.