Lekce 27 - Bootstrap - Multimediální objekty a kontejnery

V minulé lekci, Bootstrap - Tooltipy, jsme si představili tooltipy, jejich inicializace a ovládání JavaScriptem.

V dnešním tutoriálu CSS frameworku Bootstrap si představíme takzvané mediální objekty a kontejnery.

Multimediální objekty v Bootstrapu

Mediální objekty (Media objects) jsou komponenty, které známe ze sociálních médií, kde reprezentují statusy nebo komentáře. V levé části komponenty se nalézá avatar nebo obecný obrázek, v pravé potom nadpis a text. Vše si díky Bootstrapu můžeme jednoduše vytvořit. Minimálně uživatelské komentáře či reference určitě využijeme ve většině webových projektů.

Začněme ukázkou. Základní HTML struktura mediálního objektu je následující:

<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 vlastně nikdy zaměstnaný nebyl :)
    </div>
</div>

Celá komponenta je obalena elementem <div> s třídou .d-flex. Dovnitř vkládáme obrázek, obvykle s třídou definující margin, například .me-3. Druhým vnořeným elementem je <div> s třídou .flex-grow-1, který obsahuje tělo mediálního objektu.

Živá ukázka v prohlížeči:

Skládání

Jako další ukázka následuje skládání mediálních objektů do sebe, čímž můžeme jednoduše vyrenderovat nějakou zanořenou diskuzi, například komentáře pod statusem. Další mediální objekty umisťujeme do těla pod obsah objektu, kterého se 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ýsledek:

Zarovnání a pořadí

Jelikož je layoutu mediálních objektů docíleno pomocí flexboxu, můžeme jej uzpůsobovat pomocí flex utilit z lekce Bootstrap - Flex utility. Ukažme si, jak přiřazením třídy .align-self-end elementu <img> zarovnáme avatary na konec příspěvku místo na začátek. Stejně tak můžeme změnit i pořadí elementů a obrázek přesunout například vpravo. Prohodíme elementy <img> a <div> a obrázku místo pravého marginu nastavíme levý:

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

Mediální seznamy

Třídu .media můžeme použít i na elementy <li> seznamů <ul> nebo <ol>. Ze seznamu však musíme nejprve odstranit výchozí styly třídou .list-unstyled. Podobné seznamy na síti používáme pro výpis lekcí online kurzů:

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

Kontejnery

Vraťme se ještě na chvíli ke kontejnerům. Ty v Bootstrapu používáme zejména kvůli centrování a grid systému. Ten nejjednodušší kontejner na nějaké další elementy vytvoříme z elementu <div> přidáním třídy .container. Kontejner se na malých viewportech roztahuje, ale na větších si drží fixní šířku podle aktuálního breakpointu. Barevné pozadí v ukázce přidáváme jen proto, aby byly vidět hranice kontejneru:

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

Výsledek v prohlížeči:

Můžeme použít také třídu .container-fluid. Ta na rozdíl od třídy .container roztahuje kontejner vždy na 100 % šířky, jak bychom od elementu <div> očekávali:

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

Výsledek:

Z-index

Bootstrap svým komponentám, které se zobrazují přes nějaký obsah, přiděluje takové hodnoty CSS vlastnosti z-index, aby nedocházelo ke kolizím. Například dropdown tlačítko z lekce Bootstrap - Dropdowny by se mělo vždy zobrazit nad klasickým obsahem. Pokud někde použijeme modální dialog z lekce Bootstrap - Modální dialogy, měl by se zobrazit jak nad klasickým obsahem, tak také nad dropdown tlačítky. Tooltipy z lekce Bootstrap - Tooltipy by se měly zobrazit úplně nade vším, jelikož mohou být jak v klasickém obsahu, tak v tom modálním.

Bootstrap přiřazuje těmto překryvným komponentám následující hodnoty vlastnosti z-index. Pokud bychom na stránku přidávali nějakou vlastní komponentu, která obsah překrývá, měli bychom jí přiřadit takový z-index, aby byl s těmito hodnotami v souladu:

• dropdowny – 1000,
• sticky elementy – 1020,
• fixed elementy – 1030,
• pozadí (backdrop) modálních prvků – 1040,
• modální prvky – 1050,
• popovery – 1060,
• tooltipy – 1070.

Gratulujeme! Nyní ovládáte mocný nástroj, který vám umožní tvořit šablony mnohem rychleji, než to zvládnou ostatní, kteří jej neznají. A to se vám určitě bude hodit! Vývoj softwaru zabere spoustu času, a když jej někde dokážete ušetřit, budete úspěšnější

V následujícím kvízu, Kvíz - Bootstrap, si vyzkoušíme nabyté zkušenosti z kurzu.