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

V minulé lekci, Bootstrap - Tooltipy, jsme dokončili Bootstrap komponenty.

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

Multimediální objekty

Media objects, česky asi mediální objekty, jsou komponenty, které určitě znáte 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. No a přeci bychom si sociální komponenty sami nekódovali, když máme Bootstrap Opět máme vše připravené, minimálně komentáře/reference uživatelů určitě využijeme ve většině webových projektů.

Ukázka

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

<div class="media">
    <img class="mr-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/avatar.png" alt="David Čápka" width="64" height="64">
    <div class="media-body">
        <h5 class="mt-0">David Čápka, 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á komponenta je obalena elementem <div> se třídou .media. Dovnitř vkládáme obrázek, obvykle se třídou definující margin, např. .mr-3. Druhým vnořeným elementem je <div> se třídou .media-body, obsahující 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ř. komentáře pod statusem. Další mediální objekty umisťujeme do těla pod obsah objektu, kterého se týkají.

<div class="media">
    <img class="mr-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/avatar.png" alt="David Čápka" width="64" height="64">
    <div class="media-body">
        <h5 class="mt-0">David Čápka, 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="media mt-3">
            <a class="pr-3" href="https://www.itnetwork.cz/portfolio/17">
                <img class="mr-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/avatar_david.png" alt="David Jančík" width="64" height="64">
            </a>
            <div class="media-body">
                <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 utilities. Ukažme si jak zarovnat avatary na konec příspěvku místo na začátek přiřazením třídy .align-self-end elementu <img>. Stejně tak můžeme změnit i pořadí elementů a obrázek přesunout např. napravo. Prohodíme elementy <img> a <div> a obrázku místo pravého marginu nastavíme levý.

<div class="media">
    <div class="media-body">
        <h5 class="mt-0">David Čápka, 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 ml-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/avatar.png" alt="David Čápka" 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 musíme ovšem prvně 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="media">
        <img class="mr-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/bootstrap-stack.png" alt="Bootstrap kurz" width="96" height="96">
        <div class="media-body">
            <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="media my-4">
        <img class="mr-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/bootstrap-stack.png" alt="Bootstrap kurz" width="96" height="96">
        <div class="media-body">
            <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="media">
        <img class="mr-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/bootstrap-stack.png" alt="Bootstrap kurz" width="96" height="96">
        <div class="media-body">
            <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

Protože se dostáváme ke grid systému, je na čase si představit kontejnery. 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 .container roztahuje kontejner vždy na 100% šířky, jak byste od divu 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ř. Dropdown tlačítko by se mělo vždy zobrazit nad klasickým obsahem. Pokud někde použijeme modální dialog, měl by se zobrazit jak nad klasickým obsahem, tak nad ještě Dropdown tlačítky. Tooltipy by se měly zobrazit úplně nad vším, jelikož mohou být jak v klasickém obsahu, tak v tom modálním.

Bootsrap přiřazuje těmto křekryvným komponentám následující hodnoty 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

Gratuluji! 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, když jej někde dokážete ušetřit, budete úspěšnější