Letní akce! Lákají tě IT školení C#, Javy a PHP v Brně? Přihlas se a napiš nám do zpráv kód "BRNO 500" pro slevu 500 Kč na libovolný brněnský kurz. Lze kombinovat se slevami uvedenými u školení i použít pro více kurzů. Akce končí 28.7.

Lekce 25 - Bootsrap - Multimediální objekty a kontejnery

HTML a CSS Bootstrap Bootsrap - Multimediální objekty a kontejnery

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Bootstrap - Flex utilities podruhé, jsme dokončili flex utilities. 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:

Media objekty v Bootstrap
media_objekty.html

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:

Media objekty v Bootstrap
vnorene_media_ob­jekty.html

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:

Media objekty v Bootstrap
media_objekty_za­rovnani.html

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:

Media objekty v Bootstrap
medialni_sezna­my.html

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:

Kontejner v Bootstrap
kontejner.html

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:

Kontejner v Bootstrap
kontejner_flu­id.html

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:

V příští lekci, Bootstrap - Úvod do grid systémů, si konečně představíme Grid systém Bootstrapu :)


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
1 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Všechny články v sekci
Bootstrap
Miniatura
Následující článek
Bootstrap - Úvod do grid systémů
Aktivity (3)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!