Lekce 17 - Bootstrap - Utilities
V předešlém cvičení, Řešené úlohy k 15.-16. lekci Bootstrap CSS frameworku, jsme si procvičili nabyté zkušenosti z předchozích lekcí.
Již víme, že CSS framework Bootstrap má kromě komponent ještě tzv. utilities a grid systém. Právě o utilitách bude dnešní lekce.
Utilities
Utilities jsou jednoúčelové CSS třídy, které se stanou vašimi oblíbenými pomocníky při každodenní práci. Některé základní utility jsme si již vysvětlili během popisu komponent, byly to zejména barvy a zarovnání textu. Bootstrap poskytuje celkem následující utility. Ty, o kterých jsme již mluvili, obsahují odkaz na příslušnou lekci.
- Borders
- Clearfix
- Close icon
- Text colors a pro Background colors
- Display
- Embed
- Flex
- Float
- Image replacement
- Position
- Screenreaders
- Sizing
- Spacing
- Text
- Vertical align
- Visibility
Flex utility si necháme na příště, jelikož jako jediný bude na delší povídání. Zbytek utilit si dnes probereme.
Display
Display utilities umožňují rychle měnit hodnotu CSS vlastnosti
display
. Dají se tak rychle např. přepnout obrázky na bloky,
bloky na inline-bloky a podobně. Element poté můžeme použít tam, kde se
očekává element jiného typu.
Máme připravené třídy:
.d-none
.d-inline
.d-inline-block
.d-block
.d-table
.d-table-cell
.d-flex
.d-inline-flex
Třídu jsme použili např. v lekci Carousely a
Progress, kde se pomocí třídy .d-none
skryly popisky
carouselu.
Responzivní verze
Podle break pointů
můžeme danou hodnotu pro vlastnost display
nastavit až od
určité velikosti displeje zařízení. To můžeme použít např. ke skrytí
obsahu na mobilních zařízeních a jeho zobrazení na zařízeních
větších. Ke každé výše uvedené třídě existují responzivní třídy
pro každý breakpoint. Jsou to:
.d-sm-none
.d-sm-inline
.d-sm-inline-block
.d-sm-block
.d-sm-table
.d-sm-table-cell
.d-sm-flex
.d-sm-inline-flex
.d-md-none
.d-md-inline
.d-md-inline-block
.d-md-block
.d-md-table
.d-md-table-cell
.d-md-flex
.d-md-inline-flex
.d-lg-none
.d-lg-inline
.d-lg-inline-block
.d-lg-block
.d-lg-table
.d-lg-table-cell
.d-lg-flex
.d-lg-inline-flex
.d-xl-none
.d-xl-inline
.d-xl-inline-block
.d-xl-block
.d-xl-table
.d-xl-table-cell
.d-xl-flex
.d-xl-inline-flex
Pokud použijeme např. třídu .d-md-block
, bude element
vykreslený jako blokový na středně velkých zařízeních a větších. Na
menších zařízeních bude vykreslen výchozím způsobem.
Kombinace
Třídy spolu můžeme kombinovat k dosažení ideálního responzivního chování. Můžeme tak libovolně definovat intervaly, kdy budou elementy viditelné a kdy skryté. Elegantně se tím vyhneme ručnímu psaní media queries nebo dokonce vytváření několika verzí jedné stránky.
Uveďme si za vše dva příklady. Pokud bychom chtěli element skrytý jen na malých zařízeních, použili bychom třídy:
d-sm-none d-md-block
Element by byl viditelný na zařízeních "xs", na "sm" zařízeních by se skryl a od "md" zařízení by se opět objevil. "xs" je výchozí breakpoint, který neuvádíme, styl poté platí pro všechny breakpointy. Druhý příklad zobrazí element pouze na velkých zařízeních ("lg").
d-none d-lg-block d-xl-none
Embed
Snažili jste se již někdy vložit youtube video do vaší stránky? Asi jste zjistili, že video není responzivní a že když pro něj napíšete responzivní styl, je problém udržet stále stejný poměr stran daného elementu. Bootstrap v Embed utilities přichází s řešením právě tohoto problému.
Styly se aplikují na elementy <iframe>
,
<embed>
, <video>
a
<object>
nebo na elementy s třídou
.embed-responsive-item
, kterou Bootstrap doporučuje vždy
uvádět. Rámeček okolo rámu bude automaticky vypnut.
Ukázka
K vložení responzivního youtube videa použijeme následující kód:
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YlUKcNNmywk" allowfullscreen></iframe> </div>
Živá ukázka:
Všimněte si wrapperu se třídami .embed-responsive
a
.embed-responsive-16by9
. Druhá třída již podle názvu udává
poměr stran videa. K poměrům můžeme použít tříd:
.embed-responsive-21by9
.embed-responsive-16by9
.embed-responsive-4by3
.embed-responsive-1by1
Image replacement
Image replacement je mikro utilita, která umožňuje skrýt nějaký text a
nahradit jej obrázkem. Je reprezentována pouze třídou
.text-hide
, která slouží ke skrytí textu tak, aby pro
vyhledávače zůstal viditelný. To je důležité např. u nadpisů
<h1>
, kde chceme mít na stránce obrázkové logo, ale
zároveň bychom byli rádi, kdyby vyhledávače nadpis chápali i jako
text.
<h1 class="text-hide" style="background-image: url('https://www.itnetwork.cz/images/5/css/bootstrap/bootstrap-stack.png'); width: 64px; height: 64px; background-size: 64px; background-repeat: no-repeat;">Twitter Bootstrap kurz</h1>
Výsledek:
Position
Pro změnu pozice elementu pomocí CSS vlastnosti position
můžeme použít následujících předpřipravených tříd:
.position-static
- Výchozí pozice..position-relative
- Pozice posunutá relativně k původní pozici..position-absolute
- Pozice nastavená vůči oknu prohlížeče..position-fixed
- Pozice nastavená bez ohledu na pozici scrollbaru..fixed-top
- Element neroluje se stránkou, ale zůstává na pevné pozici a to na horním okraji stránky. Tuto funkci používá poměrně velké množství webů na navigační lištu a uživatelům umožňuje používat navigaci kdekoli na stránce, bez nutnosti rolovat kvůli ní nahoru..fixed-bottom
- Element neroluje se stránkou, ale zůstává na pevné pozici a to na dolním okraji stránky..sticky-top
- Funguje pouze v nových prohlížečích (Podpora pro CSS vlastnost a hodnotuposition: sticky
). Tehdy se element nechová nijak zvláštně, ale jakmile začneme scrollovat, přichytí se jako by byla jeho pozice fixní. Pokud bychom třídu použili opět na navigaci, výhodou je, že takto můžeme nad navigaci umístit např. velké logo, které se stránkou poté odscrolluje, zatímco navigace se k horní části obrazovky přilepí. Logo tedy na stránce nezabírá místo a navigace je stále při ruce..position-sticky
- Nová vlastnost umožňující přichytit element k oknu prohlížeče až ve chvíli, když by vyjel při scrollování mimo stránku. Jinak zůstává na svém místě.
Screenreaders
Povzbuzování k optimalizaci obsahu i pro hlasové čtečky nás provázelo
celým kurzem. Již známe třídu .sr-only
, kterou přiřazujeme
typicky elementům <span>
s dodatečným popisem pro hlasové
čtečky, který by jinak z ostatního textu nemusel být zřejmý. Tyto
elementy nejsou pro běžné prohlížeče viditelné. Třídu bychom mohli
použít např. takto:
<span class="sr-only">Graf vývoje poptávky v roce 2018</span>
Pokud chceme, aby bylo možné element vybrat klávesnicí, přiřadíme mu
ještě třídu .sr-only-focusable
. Toho obvykle využíváme pro
odkazy, které přeskočí hned k hlavnímu obsahu stránky a nenutí
dotyčného se čtečkou prokousávat se např. navigací:
<a class="sr-only sr-only-focusable" >Přeskočit na hlavní obsah</a>
Sizing
Další mikroutilitka pro určování velikosti elementů v procentech. Již jsme se s ní setkali u progressbarů.
Pro šířku můžeme použít tříd:
.w-25
- Šířka 25% rodičovského elementu..w-50
- Šířka 50% rodičovského elementu..w-75
- Šířka 75% rodičovského elementu..w-100
- Šířka 100% rodičovského elementu..mw-100
- Maximální šířka 100% rodičovského elementu (vlastnostmax-width
).
A pro výšku:
.h-25
- Výška 25% rodičovského elementu..h-50
- Výška 50% rodičovského elementu..h-75
- Výška 75% rodičovského elementu..h-100
- Výška 100% rodičovského elementu..mh-100
- Maximální výška 100% rodičovského elementu (vlastnostmax-height
).
Ukázka
<div class="w-25 bg-success">25%</div><br /> <div class="w-50 bg-success">50%</div><br /> <div class="w-75 bg-success">75%</div><br /> <div class="w-100 bg-success">100%</div><br /> <div style="height: 150px"> <div class="h-25 d-inline-block bg-warning">25%</div> <div class="h-50 d-inline-block bg-warning">50%</div> <div class="h-75 d-inline-block bg-warning">75%</div> <div class="h-100 d-inline-block bg-warning">100%</div> </div>
Výsledek v prohlížeči:
Spacing
margin
a padding
můžeme našim elementům
jednoduše nastavovat pomocí následujících utilit. To je velmi výhodné,
jelikož čas od času někde potřebujeme nějakou tu mezírku a definovat
stále nové a nové styly by bylo velmi frustrující.
Tříd je poměrně velké množství a jejich názvy se skládají z následujících částí:
{vlastnost}{strana}-{velikost}
Případně můžeme specifikovat i breakpoint, od kterého má daný okraj platit:
{vlastnost}{strana}-{breakpoint}-{velikost}
Konečná třída může být např. ml-2
, která nastaví
margin-left
na 0.5rem
.
Vlastnost
Zadáváme:
m
promargin
p
propadding
Strana
t
promargin-top
nebopadding-top
b
promargin-bottom
nebopadding-bottom
l
promargin-left
nebopadding-left
r
promargin-right
nebopadding-right
x
promargin-left
nebopadding-left
amargin-right
nebopadding-right
y
promargin-top
nebopadding-top
amargin-bottom
nebopadding-bottom
- nic pro
margin
nebopadding
na všech čtyřech stranách daného elementu
Breakpoint
Breakpointy již dobře známe, jsou to:
sm
md
lg
xl
Velikost
Velikost zadáváme jako násobek proměnné $spacer
, která má
výchozí hodnotu 1rem
:
0
- nastavímargin
nebopadding
na0
1
- nastavímargin
nebopadding
na0.25rem
2
- nastavímargin
nebopadding
na0.5rem
3
- nastavímargin
nebopadding
na1rem
4
- nastavímargin
nebopadding
na1.5rem
5
- nastavímargin
nebopadding
na3rem
auto
- nastavímargin
na hodnotu auto, využíváme např. při centrování blokových elementů.
Pokud změníte hodnotu proměnné $spacer
vlastním buildem Bootstrapu, změní se ve stejném poměru i výše uvedené
hodnoty.
Vertical align
Utility slouží k svislému centrování. Zatím se ovšem neradujte,
protože pouze nastavují hodnotu CSS vlastnosti vertical-align
. Ta
dokáže centrovat jen řádkové elementy, inline bloky nebo elementy tabulek.
K tomu pravému svislému centrování se dostaneme až u flexu.
Ukázka
<p> <span class="align-baseline">baseline</span> <span class="align-top">top</span> <span class="align-middle">middle</span> <span class="align-bottom">bottom</span> <span class="align-text-top">text-top</span> <span class="align-text-bottom">text-bottom</span> </p>
Výsledek:
Visibility
Jako poslední si představme utility třídy .visible
a
.invisible
, které vnitřně mění hodnotu CSS vlastnosti
visibility
. Elementy budou tedy skryté, ale stále budou na
stránce zabírat místo, jako by tam byly. Třídy nijak nepracují s CSS
vlastností display
.
V příští lekci, Bootstrap - Flex utilities, se budeme věnovat Flex utilities, které
slouží k jednoduchému zarovnání čehokoli kamkoli