17. diel - Bootstrap - Utilities
V predchádzajúcom cvičení, Riešené úlohy k 15.-16. lekciu Bootstrap CSS frameworku, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.
V dnešnom tutoriáli CSS framewroku Bootstrap si predstavíme utility a jedného užitočného pomocníka na vkladanie videí z YouTube.
Utilities v Boostrape
Utilities sú jednoúčelové CSS triedy, ktoré sa stanú vašimi obľúbenými pomocníkmi pri každodennej práci. Niektoré základné utility sme si už vysvetlili počas popisu komponentov, najmä farby a zarovnania textu. Bootstrap poskytuje nasledujúce utility. Tie, o ktorých sme už hovorili, obsahujú odkaz na príslušnú lekciu:
- Borders
- Close icon
- Text colors a pre Background colors
- Display,
- Flex,
- Float
- Image replacement,
- Position,
- Visually hidden,
- Sizing,
- Spacing,
- Text
- Vertical align,
- Visibility.
Display
Display utilities umožňujú rýchlo meniť hodnotu CSS vlastnosti
display
. Dajú sa tak rýchlo napríklad prepnúť obrázky na
bloky, bloky na inline-bloky a podobne. Element potom môžeme použiť tam, kde
sa očakáva element iného typu.
Máme pripravené triedy, ktoré sa volajú podľa svojho formátu:
d.-{hodnota}
pre veľkosťxs
,d.-{breakpoint}-{value}
pre veľkosťsm
,md
,lg
,xl
axxl
.
.none
,.inline
,.inline-block
,.block
,.grid
,.table
,.table-cell
,.table-row
,.flex
,.inline-flex
.
.d-none
skryli popisky
carouselu.
Responzívna verzia podľa break pointov, ktoré sme preberali v lekcii Bootstrap - Typografie môžeme teda nastaviť až od určitej veľkosti displeja zariadenia. To môžeme použiť napríklad na skrytie obsahu na mobilných zariadeniach a jeho zobrazenie na zariadeniach väčších. Ku každej vyššie uvedenej triede existujú responzívne triedy pre každý breakpoint. Sú 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
,.d-xxl-none
,.d-xxl-inline
,.d-xxl-inline-block
,.d-xxl-block
,.d-xxl-table
,.d-xxl-table-cell
,.d-xxl-flex
,.d-xxl-inline-flex
.
.d-md-block
, bude element
vykreslený ako blokový na stredne veľkých zariadeniach a väčších. Na
menších zariadeniach bude vykreslený východiskovým spôsobom.
Kombinácia
Triedy spolu môžeme kombinovať na dosiahnutie ideálneho responzívneho správania. Môžeme tak ľubovoľne definovať intervaly, kedy budú elementy viditeľné a kedy skryté. Elegantne sa tým vyhneme ručnému písaniu media queries alebo dokonca vytváraniu niekoľkých verzií jednej stránky.
Uveďme si za všetko dva príklady. Pokiaľ by sme chceli element skrytý len na malých zariadeniach, použili by sme triedy:
d-sm-none d-md-block
Element by bol viditeľný na zariadeniach "xs", na "sm" zariadeniach by sa skryl a od "md" zariadení by sa opäť objavil. Predvolený breakpoint "xs" neuvádzame, štýl potom platí pre všetky breakpointy. Druhý príklad zobrazí element iba na veľkých zariadeniach ("lg"):
d-none d-lg-block d-xl-none
Position
Pre zmenu pozície elementu pomocou CSS vlastnosti position
máme k dispozícii nasledujúce predpripravené triedy. Nie sú však
responzívne:
.position-static
- východisková pozícia,.position-relative
- pozícia posunutá relatívne k pôvodnej pozícii,.position-absolute
- pozícia nastavená voči oknu prehliadača,.position-fixed
- pozícia nastavená bez ohľadu na pozíciu scrollbaru,.position-sticky
- nová vlastnosť umožňujúca prichytiť element k oknu prehliadača až vo chvíli, keď by vyšiel pri zcrollovaní mimo stránku. Inak zostáva na svojom mieste.
Povzbudzovanie k optimalizácii obsahu aj pre hlasové čítačky nás
sprevádzalo celým kurzom. Už poznáme triedu .visually-hidden
,
ktorú priraďujeme typicky elementom <span>
s dodatočným
popisom pre hlasové čítačky, ktorý by inak z ostatného textu nemusel byť
zrejmý. Tieto elementy nie sú pre bežné prehliadače viditeľné. Triedu
použijeme napríklad takto:
<span class="visually-hidden">Graf vývoje poptávky v roce 2018</span>
Pokiaľ chceme, aby bolo možné element vybrať klávesnicou, priradíme mu
ešte triedu .visually-hidden-focusable
. To obvykle využívame pre
odkazy, ktoré preskočia hneď k hlavnému obsahu stránky a nenútia
dotyčného s čítačkou prehrýzť sa napríklad navigáciou:
<a class="visually-hidden visually-hidden-focusable" >Přeskočit na hlavní obsah</a>
Sizing
Ďalšia mikroutilitka na určovanie veľkosti elementov v percentách. Už sme sa s ňou stretli pri progressbaroch v lekcii "Bootstrap - Carousely a Progress": html-css/bootstrap/bootstrap-carousely-a-progress.
Pre šírku máme triedy:
.w-25
- šírka 25 % rodičovského elementu,.w-50
- šírka 50 % rodičovského elementu,.w-75
- šírka 75 % rodičovského elementu,.w-100
- šírka 100 % rodičovského elementu,.mw-100
- maximálna šírka 100% rodičovského elementu (vlastnosťmax-width
).
.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álna výška 100% rodičovského elementu (vlastnosťmax-height
).
<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 class="mw-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 class="mh-100 d-inline-block bg-warning">100 %</div> </div>
Výsledok v prehliadači:
Trieda mh-100
nastavuje maximálnu výšku, ale
nezaistí, že element bude túto výšku aktívne vyplňovať. Na rozdiel od
toho triedy h-25
, h-50
, h-75
a
h-100
skutočne nastavujú výšku elementu na špecifické
percento rodičovskej výšky.
Spacing
Hodnoty margin
a padding
našim elementom
jednoducho nastavíme pomocou nasledujúcich utilít. To je veľmi výhodné,
pretože čas od času niekde potrebujeme nejakú tú medzierku a definovať
stále nové a nové štýly by bolo veľmi frustrujúce.
Tried je pomerne veľké množstvo a ich názvy sa skladajú z nasledujúcich
častí. Pre breakpoint xs
:
{vlastnost}{strana}-{velikost}
Pre ďalšie breakpointy potom ako:
{vlastnost}{strana}-{breakpoint}-{velikost}
Konečná trieda bude napr. ms-2
, ktorá nastaví
margin-left
na 0.5rem
.
Vlastnosť
Zadávame:
m
premargin
,p
prepadding
.
t
premargin-top
alebopadding-top
,b
premargin-bottom
alebopadding-bottom
,s
(ako štart) premargin-left
alebopadding-left
,e
(ako end) premargin-right
alebopadding-right
,x
premargin-left
alebopadding-left
amargin-right
alebopadding-right
,y
premargin-top
alebopadding-top
amargin-bottom
alebopadding-bottom
,- nič pre
margin
alebopadding
na všetkých štyroch stranách daného elementu.
Breakpointy už dobre poznáme, sú to:
sm
,md
,lg
,xl
,xxl
.
Veľkosť zadávame ako násobok $spacer
, ktorá má predvolenú
hodnotu 1rem
:
0
- nastavímargin
alebopadding
na0
,1
- nastavímargin
alebopadding
na0.25rem
,2
- nastavímargin
alebopadding
na0.5rem
,3
- nastavímargin
alebopadding
na1rem
,4
- nastavímargin
alebopadding
na1.5rem
,5
- nastavímargin
alebopadding
na3rem
,auto
- nastavímargin
na hodnotu auto, využívame napríklad pri centrovaní blokových elementov.
$spacer
vlastným buildom
Bootstrapu, zmení sa v rovnakom pomere aj vyššie uvedené hodnoty.
Vertical align
Tieto utility slúžia na zvislé centrovanie. Zatiaľ sa však neradujte,
pretože iba nastavujú hodnotu CSS vlastnosti vertical-align
. Tá
dokáže centrovať len riadkové elementy, inline bloky alebo elementy
tabuliek. K tomu pravému zvislému centrovaniu sa dostaneme až pri flexi.
Poďme si to ukázať:
<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ýsledok:
Visibility
Ako posledný si predstavme utility triedy .visible
a
.invisible
, ktoré vnútorne menia hodnotu CSS vlastnosti
visibility
. Elementy budú teda skryté, ale stále budú na
stránke zaberať miesto, ako by tam boli. Triedy nijako nepracujú s CSS
vlastností display
.
Ratio
Na koniec utilít si pridáme ešte jednu nápomocnú vec pre vkladanie videa
z YouTube. Tá už nie je zaradená pod utilitami, ale je súčasťou
súčasťou skupiny Helpers pod názvom Ratio. Pri vkladaní YouTube videa do
stránky môžeme naraziť na problém s udržaním stáleho pomeru strán.
Zvlášť ak chceme, aby bolo video responzívne. Aj keď pre neho napíšeme
responzívny štýl, je problém udržať stále rovnaký pomer strán daného
elementu. V Bootstrape 5 sa tento problém rieši pomocou tried
.ratio-*
.
Akýkoľvek prvok, napríklad <iframe>
, zabalíme do
nadradeného prvku s triedou .ratio
a pomerom strán.
Bezprostredný podriadený potomok je automaticky dimenzovaný vďaka nášmu
univerzálnemu selektoru .ratio > *
.
Na vloženie responzívneho YouTube videa použijeme nasledujúci kód:
<div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe> </div>
Varianty pomerov strán videa máme:
ratio-1x1
,ratio-4x3
,ratio-16x9
,ratio-21x9
,
V budúcej lekcii, Bootstrap - Flex utilities , sa budeme venovať flex utilities, ktoré slúžia na jednoduché zarovnanie čohokoľvek kamkoľvek:)