Lekce 4 - Bootstrap - Obrázky

V minulé lekci, Bootstrap - Typografie, jsme si začali zmiňovat Bootstrap třídy, kterými stylujeme různé typografické HTML elementy.

V dnešním CSS Bootstrap tutoriálu si ukážeme jak na obrázky a vše co s nimi souvisí.

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.

Pokud byste chtěli podporovat SVG v IE10, přidejte k těmto obrázkům styl width: 100% \9, ale pouze k těm typu SVG, jinak rozbijete ty ostatní.

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:

• 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-right-0 - Vypne pravý rámeček.
• border-bottom-0 - Vypne spodní rámeček.
• border-left-0 - Vypne levý rámeček.

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 apod.
• 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á
• 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-white

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-right - Pravý horní a pravý dolní roh je kulatý.
• .rounded-bottom - Levý a pravý dolní roh je kulatý.
• .rounded-left - 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-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-left - Zarovnání vlevo, příčemž je obrázek obtékán dalším obsahem zprava
• .float-right - Zarovnání vpravo, příčemž je obrázek obtékán dalším obsahem zleva
• .float-none - Vypnutí obtékání

Třídy s floatem byly před Bootstrapem 4 pojmenované .pull-left a .pull-right, v šablonách pro starší verze Bootstrapu je můžete ještě takto nelézt.

Při používání obtékání jej nezapomeňte 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.

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-sm-left - Nechá obsah plavat vlevo na zařízeních s malým viewportem a větším
• .float-sm-right - 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-left - Nechá obsah plavat vlevo na zařízeních se středně velkým viewportem a větším
• .float-md-right - 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-left - Nechá obsah plavat vlevo na zařízeních s velkým viewportem a větším
• .float-lg-right - 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-left - Nechá obsah plavat vlevo na zařízeních s extra velkým viewportem a větším
• .float-xl-right - 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

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-left, .text-right 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.

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