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. Hodnotaborder-radius
je50%
..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
Komentáře


Zobrazeno 9 zpráv z 9.