Lekce 4 - Bootstrap - Obrázky

V minulé lekci, Bootstrap - Typografie, jsme zmínili první 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 na 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 obrazovku vždy vešly. Třída vnitřně nastavuje max-width: 100% a height: auto:

Responzivní obrázky v Bootstrapu

responzivni_obrazky.html

Zdrojový kód ukázky

<body>
   <img src="https://www.itnetwork.cz/images/5/marketing/man-notes-macbook-computer_resized.jpg" alt="Webdesigner" class="img-fluid" />
</body>

Element Picture

U obrázků někdy můžeme potřebovat uvést více zdrojů, aby si prohlížeč vybral ten, který nejlépe sedí danému rozlišení zařízení. Typicky se u mobilních obrázků ořezává zbytečné pozadí, aby byla vidět hlavní část obrázku, a naopak na desktopu se pozadí nechává, aby nebyla hlavní část obrázku příliš velká. Pokud bychom k tomuto chování použili element <picture>, musíme 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 máme také pro obrázky k dispozici Bootstrap utility třídy.

Vypnutí rámečků

Psaní stylů pro vypnutí nějaké části rámečku je nepraktické. Nyní si můžeme vybrat z následujících předpřipravených tříd, které uvádíme spolu s 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 Bootstrapu

vypnuti_ramecku.html

Zdrojový kód ukázky

<body>
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček" class="border" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček" class="border border-top-0" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček" class="border border-end-0" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček" class="border border-bottom-0" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček" class="border border-start-0" />
</body>

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 atd.,
danger – červená pro chyby a podobně,
warning – žlutá pro zvýraznění důležitých hlášek, tipů apod.,
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 s 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í toto:

Barvy v Bootstrapu

barvy_ramecku.html

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

Zdrojový kód ukázky

<body>
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček" class="border border-primary" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček" class="border border-secondary" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček" class="border border-success" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček" class="border border-danger" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček" class="border border-warning" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček" class="border border-info" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček" class="border border-light" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček" class="border border-dark" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček" class="border border-black" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček" class="border border-white" />
</body>

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 Bootstrapu

polomer_ramecku.html

Zdrojový kód ukázky

<body>
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/twitter.png" alt="Twitter" class="rounded" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/twitter.png" alt="Twitter" class="rounded-top" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/twitter.png" alt="Twitter" class="rounded-end" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/twitter.png" alt="Twitter" class="rounded-bottom" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/twitter.png" alt="Twitter" class="rounded-start" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/twitter.png" alt="Twitter" class="rounded-circle" />
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/twitter.png" alt="Twitter" class="rounded-0" />
</body>

Miniatury obrázků

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

Miniatury v Bootstrapu

miniatury_obrazku.html

Zdrojový kód ukázky

<body>
   <img src="https://www.itnetwork.cz/images/5/css/bootstrap/twitter.png" alt="Ptáček" class="img-thumbnail" />
</body>

Zarovnání obrázků

Nyní se dostáváme 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 – Obrázek je zarovnán vlevo, přičemž je obtékán dalším obsahem zprava.
.float-end – Obrázek je zarovnán vpravo, přičemž je obtékán dalším obsahem zleva.
.float-none – Obtékání je vypnuto.

Při používání obtékání jej nesmíme zapomenout 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 Bootstrapu

plovouci_obsah.html

Moderní alternativou k plovoucím (float) prvkům a k 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í. Vyvarujeme se tím 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 v lekci Bootstrap - Typografie. Ukažme si nyní to, jak vypadá jejich použití na obrázek:

Alignment utility

zarovnani_obrazku.html

Zdrojový kód ukázky

<body>
   <div class="text-center">
      <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček"/>
   </div>
</body>

Margin utility

Blokové elementy můžeme centrovat také pomocí třídy .mx-auto, která, jak název napovídá, 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_obrazku.html

Zdrojový kód ukázky

<body>
   <div>
      <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček" style="display: block; width: 128px;" class="mx-auto" />
   </div>
</body>

Figure

Pokud potřebujeme zobrazit obrázek i s popiskem, obvykle využijeme element <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 kód 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í.

Článek pro vás napsal David Hartinger

Uživatelské hodnocení:

1170 hlasů

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.

Aktivity

Nejčastěji vyhledáváné

Lekce 4 - Bootstrap - Obrázky

Responzivní obrázky

Element Picture

Utility

Vypnutí rámečků

Barva rámečku

Poloměr rámečku

Miniatury obrázků

Zarovnání obrázků

Float utility

Responzivní třídy

Alignment utility

Margin utility

Figure