Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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:

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

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:

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

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

Float v Bootstrap
plovouci_obsah.html

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:

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

Figure v Bootstrapu
figure.html

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


 

Předchozí článek
Bootstrap - Typografie
Všechny články v sekci
Kompletní kurz CSS frameworku Bootstrap
Přeskočit článek
(nedoporučujeme)
Kvíz - Reboot, typografie a obrázky v Bootstrap
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
665 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity