Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

4. díl - Bootstrap - Obrázky

HTML a CSS Bootstrap Bootstrap - Obrázky

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 - 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.

Responzivní obrázky v Bootstrap
responzivni_o­brazky.html

Pozn.: 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.
Rámečky v Bootstrap
vypnuti_ramec­ku.html
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 byla 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:

  • .border-primary
  • .border-secondary
  • .border-success
  • .border-danger
  • .border-warning
  • .border-info
  • .border-light
  • .border-dark
  • .border-white
Barvy v Bootstrap
barvy_ramecku.html

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é.
Zakulacení v Bootstrap
polomer_ramec­ku.html

Miniatury obrázků

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

Miniatury v Bootstrap
miniatury_obraz­ku.html

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í

Pozn.: 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.

Float v Bootstrap
plovouci_obsah.html
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:

Alignment utility
zarovnani_obraz­ku.html
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í.

Margin auto v Bootstrapu
centrovani_obraz­ku.html

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 v Bootstrapu
figure.html

V příští lekci, Bootstrap - Tabulky, se podíváme jak se v Bootstrapu stylují tabulky,


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
4 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 se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Bootstrap - Typografie
Miniatura
Všechny články v sekci
Bootstrap
Miniatura
Následující článek
Bootstrap - Tabulky
Aktivity (1)

 

 

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í!