Lekce 4 - Bootstrap - Obrázky

V minulé lekci, Bootstrap - Typografie, jsme si začali zmiňovat Bootstrap třídy, kterými stylujeme nadpisy a podnadpisy, citace, zkratky a seznamy. Seznámili jsme se s utility třídami.

V dnešním tutoriálu frameworku Bootstrap si ukážeme jak na obrázky a vše co s nimi souvisí, například responzivita, zarovnání, rámečky a další.

Responzivní obrázky

Začněme tím, jak udělat obrázek responzivní. Bootstrap poskytuje třídu .img-fluid, která zajistí, že daný obrázek nikdy nevyteče z rodičovského elementu. Na mobilních zařízeních tedy obrázky nikdy nepřekročí velikost obrazovky a zmenší se tak, aby se na ní vždy vešly. Třída vnitřně nastavuje max-width: 100% a height: auto:

Element Picture

Obrázkům můžeme někdy potřebovat uvést více zdrojů, aby si prohlížeč vybral ten, který nejlépe sedí rozlišení zařízení. Typicky se u mobilních obrázků ořezává zbytečné pozadí, aby byla vidět ta hlavní část obrázku a naopak na desktopu se nechává, aby nebyla hlavní část obrázku příliš velká. Pokud byste k tomuto chování použili element <picture>, je třeba všechny responzivní třídy přiřazovat elementu <img> uvnitř, nikoli elementu <picture>:

​<picture>
    <source srcset="logo.svg" type="image/svg+xml" />
    <img src="logo.png" class="img-fluid img-thumbnail" alt="ITnetwork logo" />
</picture>

Utility

Stejně jako pro text, tak i pro obrázky nabízí Bootstrap utility třídy.

Vypnutí rámečků

Psaní stylů pro vypnutí nějaké části rámečku je konec. Nyní si můžeme vybrat z následujících předpřipravených tříd, které uvádíme spolu se třídou .border:

• border - zapne rámeček okolo obrázku. Musíme uvádět pokaždé, když chceme rámeček zobrazit,
• border-0 - vypne rámeček okolo obrázku,
• border-top-0 - vypne horní rámeček,
• border-end-0 - vypne pravý rámeček,
• border-bottom-0 - vypne spodní rámeček,
• border-start-0 - vypne levý rámeček.

Ukázka v prohlížeči:

Barva rámečku

Bootstrap definuje několik barev, které se v něm používají na různých místech. Barvy nejsou pojmenované podle toho, jak vypadají, to by byla v CSS sémantická chyba. CSS styly by měly být pojmenované podle toho, k čemu se používají, nikoli podle vzhledu. Máme zde tedy barvy:

• primary - hlavní barva, jako výchozí modrá,
• secondary - druhá hlavní barva, výchozí šedá,
• success - zelená na úspěšné hlášky, slevy, potvrzující tlačítka...,
• danger - červená pro chyby a podobně,
• warning - žlutá pro zvýraznění důležitých hlášek, tipů...,
• info - neutrální modrá pro neutrální zvýraznění,
• light - světlounce šedá,
• dark - téměř černá,
• black - zcela černá,
• white - zcela bílá.

Tyto barvy nás budou provázet celým kurzem. Konkrétně pro rámečky potom Bootstrap poskytuje následující třídy, které uvádíme spolu se třídou .border:

• .border-primary,
• .border-secondary,
• .border-success,
• .border-danger,
• .border-warning,
• .border-info,
• .border-light,
• .border-dark,
• .border-black,
• .border-white.

V prohlížeči se zobrazí:

Třídy můžeme samozřejmě kombinovat a nastavit tak třeba zelený rámeček bez horní části.

Poloměr rámečku

I pro kulaté rámečky máme třídy hezky nachystané. Poloměr rámečku je vnitřně nastavován na hodnotu .25rem. Můžeme použít třídy:

• .rounded - všechny rohy jsou kulaté,
• .rounded-top - levý a pravý horní roh je kulatý,
• .rounded-end - pravý horní a pravý dolní roh je kulatý,
• .rounded-bottom - levý a pravý dolní roh je kulatý,
• .rounded-start - levý horní a levý dolní roh je kulatý,
• .rounded-circle - rohy jsou maximálně zakulacené, čímž tvoří okolo obrázku kruh. Hodnota border-radius je 50%,
• .rounded-pill - všechny rohy jsou kulaté a tvar připomíná pilulku,
• .rounded-0 - rohy jsou hranaté.

Miniatury obrázků

Pro miniatury můžeme využít styl rámečku a paddingu reprezentovaný třídou .img-thumbnail. Vypadá takto:

Zarovnání obrázků

Dostáváme se k utility třídám pro zarovnávání obrázků. Všechny jsou opět implementovány s !important a přepisují tedy veškeré jinde definované chování.

Float utility

Úplně nejjednodušší je obrázek zarovnat pomocí obtékání (vlastnosti float). Bootstrap poskytuje následující třídy:

• .float-start - zarovnání vlevo, přičemž je obrázek obtékán dalším obsahem zprava,
• .float-end - zarovnání vpravo, přičemž je obrázek obtékán dalším obsahem zleva,
• .float-none - vypnutí obtékání.

Při používání obtékání jej nesmíme nezapomenout po skončení daného elementu vypnout, a to pomocí populárního hacku clearfix, který je v Bootstrapu dostupný pod třídou .clearfix. Tu nastavujeme elementu s plovoucím obsahem:

<div class="clearfix">
    <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček" class="float-start" />Tento text obrázek obtéká zprava a obrázek je na stejné úrovni jako text. Díky clearfixu se obtékání po konci elementu &lt;div&gt; ukončí.
</div>

Takto vypadá v prohlížeči:

Moderní alternativou k plovoucím (float) prvkům a jejich řešení pomocí .clearfix je použití Flexboxu nebo CSS Grid layoutu, které poskytují lepší kontrolu nad rozložením.

Responzivní třídy

Plovoucí obsah můžeme definovat i v závislosti na velikosti viewportu. Následuje výčet příslušných tříd:

• .float-start - nechá obsah plavat vlevo na všech zařízeních,
• .float-end - nechá obsah plavat vpravo na všech zařízeních,
• .float-none - vypne plavání obsahu na všech zařízeních,
• .float-sm-start - nechá obsah plavat vlevo na zařízeních s malým viewportem a větším,
• .float-sm-end - nechá obsah plavat vpravo na zařízeních s malým viewportem a větším,
• .float-sm-none - vypne plavání obsahu na zařízeních s malým viewportem a větším,
• .float-md-start - nechá obsah plavat vlevo na zařízeních se středně velkým viewportem a větším,
• .float-md-end - nechá obsah plavat vpravo na zařízeních se středně velkým viewportem a větším,
• .float-md-none - vypne plavání obsahu na zařízeních se středně velkým viewportem a větším,
• .float-lg-start - nechá obsah plavat vlevo na zařízeních s velkým viewportem a větším,
• .float-lg-end - nechá obsah plavat vpravo na zařízeních s velkým viewportem a větším,
• .float-lg-none - vypne plavání obsahu na zařízeních s velkým viewportem a větším,
• .float-xl-start - nechá obsah plavat vlevo na zařízeních s extra velkým viewportem a větším,
• .float-xl-end - nechá obsah plavat vpravo na zařízeních s extra velkým viewportem a větším,
• .float-xl-none - vypne plavání obsahu na zařízeních s extra velkým viewportem a větším.
• .float-xxl-start - nechá obsah plavat vlevo na zařízeních s extra extra velkým viewportem a větším,
• .float-xxl-end - nechá obsah plavat vpravo na zařízeních s extra extra velkým viewportem a větším,
• .float-xxl-none - vypne plavání obsahu na zařízeních s extra extra velkým viewportem a větším.

Jak jsou různá zařízení v Bootstrapu definovaná jsme si již zmínili v lekci Bootstrap - Typografie.

Alignment utility

Obrázky můžeme jako všechny inline elementy pozicovat kromě přiřazení floatu samotnému obrázku také nastavením vlastnosti text-align kontejneru, ve kterém je obrázek vložený. To může být vhodnější v situacích, kdy nepotřebujeme obtékání a vyvarujeme se použití floatů, které mohou mít nepříjemné důsledky, pokud je zapomeneme vyčistit clearfixem. O třídách .text-start, .text-end a .text-center jsme si již říkali rovněž v lekci Bootstrap - Typografie. Ukažme si jen jak vypadá jejich použití na obrázek:

Margin utility

Když jsme již u centrování, tak blokové elementy můžeme centrovat pomocí třídy .mx-auto, která, jak asi již tušíte, vnitřně nastaví margin: 0 auto;. Třídu nastavujeme přímo blokovému elementu, který chceme vodorovně vycentrovat. Element musí mít nastavenou šířku, což je nevýhoda tohoto řešení:

Figure

Pokud potřebujeme zobrazit obrázek i s popiskem, obvykle využijeme elementu <figure>, do kterého vložíme elementy <img> a <figcaption>. Bootstrap nabízí příslušné třídy .figure, .figure-img a .figure-caption pro honosnější vzhled. Obvykle přidáváme i nám již známou třídu .img-fluid, aby obrázek na mobilech nepřetekl:

<figure class="figure">
    <img src="https://www.itnetwork.cz/images/5/css/bootstrap/twitter.png" alt="Webdesigner" class="figure-img img-fluid rounded" />
    <figcaption>Bývalé logo Twitteru (dnes již X), firmy která stála za vznikem frameworku Bootstrap.</figcaption>
</figure>

V prohlížeči se zobrazí takto:

To je pro tuto lekci vše

V následujícím kvízu, Kvíz - Reboot, typografie a obrázky v Bootstrap, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.