Lekce 22 - Bootstrap - Paginace, Upozornění a Drobečková navigace
V předešlém cvičení, Řešené úlohy k 20.-21. lekci Bootstrap CSS frameworku, jsme si procvičili nabyté zkušenosti z předchozích lekcí.
Dnes nás čeká několik komponent, jsou to Pagination, Alerts a Breadcrumb. Pokračujeme v kurzu populárního CSS frameworku Bootstrap.
Paginace
Paginaci, česky stránkování, se u většího počtu dat nevyhneme. Jednak je pro uživatele nepříjemné pročítat se tisíci záznamy na jediné stránce a také nám na výpis desítek nebo stovek tisíc záznamů na jednu stránku již nemusí stačit výkon serveru. Příjemnou alternativou paginace je načítání dalších položek AJAXem při rolování stránky dolů. To se používá zejména na sociálních sítích a i ITnetwork má na hlavní stránce podobný mechanismus. Toto řešení se ovšem nehodí v případě, kdy se potřebujeme dostat do určité části dat, například do poloviny nebo na konec. K tomu je ideální stránkování, kde si zvolíme na kterou stránku chceme přejít a vidíme také celkový počet stránek. Máme tak mnohem lepší přehled o daném vzorku dat.
Pro paginaci používáme seznam, konkrétně element
<ul>
, stejně jako pro většinu navigačních prvků v
Bootstrapu. Pro lepší sémantiku celý seznam vkládáme ještě do elementu
<nav>
, protože paginace je v podstatě navigace. Ukažme si
nejprve zdrojový kód paginační komponenty, který si záhy popíšeme.
<nav aria-label="Stránkování"> <ul class="pagination"> <li class="page-item disabled"> <span aria-hidden="true" class="page-link">«</span> </li> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav>
V kódu máme opět nějaké "aria" atributy pro hlasové čtečky. Seznamu
jsme přiřadili třídu .pagination
. Jednotlivým prvkům seznamu
přidáváme třídu .page-item
. První prvek je odkaz na
předchozí stránku, který má ikonu dvojité šipky vlevo («, entita
«
). Všimněte si, že v něm není odkaz, to abychom si
ukázali jak to udělat, pokud jsme na první stránce a na předchozí stránku
se tedy přesunout nelze. Zašednutí prvku docílíme třídou
.disabled
. Další prvky seznamu obsahují odkazy na jednotlivé
stránky, těm přiřazujeme třídu .page-link
. Elementu
<li>
aktivní stránky, zde stránky 1, navíc přidáváme
třídu .active
. Poslední odkaz je již kompletní. Do atributů
href
si samozřejmě na serveru vygenerujete korektní odkazy na
dané stránky.
Výsledek v prohlížeči:
Teoreticky bychom mohli odkaz do prvního elementu umístit také, díky
třídě .disabled
by na něj nešlo kliknout. Prakticky by šel
ale stejně označit pomocí klávesy tab a proto bychom jej do
stránky neměli vůbec umisťovat nebo bychom k němu měli přiřadit atribut
tabindex="-1"
.
Velikosti
Paginaci můžeme zobrazit ve 3 velikostech, stejně jako většinu
Bootstrapových komponent. Elementu <ul>
můžeme dodat
kromě .pagination
ještě třídu:
.pagination-lg
pro větší velikost- Ponecháme jen se třídou
.pagination
pro standardní velikost .pagination-sm
pro menší velikost
Zarovnání
Pro zarovnání paginace používáme flexbox utility. Pokud ji chceme
zarovnat na střed, přidáme elementu <ul>
třídu
.justify-content-center
. Pokud vpravo, přidáme třídu
.justify-content-end
.
Paginaci můžete na serveru oživit např. podle našeho tutoriálu Paginace (stránkování) v PHP.
Upozornění
HTTP je bezstavový protokol a práce s webovými aplikacemi často probíhá pouhým přecházením mezi odkazy. Jelikož uživatel nekomunikuje s klasickou desktopovou aplikací, může si být na webu často nejistý, zda se jeho požadavek opravdu mezi jednotlivými přechody mezi stránkami korektně odeslal nebo naopak proč nedošlo k očekávanému chování. Určitě uživateli nebudeme zobrazovat vyskakovací informační okna (pop-upy), jelikož web se ovládá jinak než desktop, stránky máme v záložkách, obsahem rolujeme. K účelu upozornění se na webu zpopularizovaly tzv. toastové notifikace. Toastové proto, že často vyjedou jako toast z topinkovače. Můžete se také setkat s názvem flash message. Bootstrap tyto zprávy zavádí jednoduše jako alerty (upozornění) a poskytuje pro ně předpřipravené styly a dokonce i nějaké javascriptové vychytávky.
Alert vytvoříme pomocí elementu <div>
s třídou
.alert
. Podle typu upozornění poté přidáme ještě jednu z
následujících tříd:
- .alert-primary - Hlavní barva, jako výchozí modrá
- .alert-secondary - Druhá hlavní barva, výchozí šedá
- .alert-success - Zelená na úspěšné hlášky.
- .alert-danger - Červená pro chyby.
- .alert-warning - Žlutá pro zvýraznění důležitých hlášek.
- .alert-info - Neutrální modrá pro neutrální hlášky.
- .alert-light - Světlounce šedá.
- .alert-dark - Téměř černá.
Zdrojový kód takového alertu by mohl vypadat následujícím způsobem:
<div class="alert alert-success" role="alert"> Zpráva byla úspěšně odeslána. </div>
Atribut role
slouží pro hlasové čtečky. Kromě barvy bychom
ideálně měli opět přidat i text pro hlasové čtečky skrytý pomocí
třídy .sr-only
, kde bude typ této hlášky popsaný.
Použití alertů ve stránce vypadá následně takto:
Barva odkazu
Do hlášek často vkládáme odkazy. Ty se hezky zbarví pokud jim
přiřadíme třídu .alert-link
.
Další HTML obsah
Jelikož jsou upozornění blokové elementy, můžeme do nich kromě textu a odkazů vkládat i nadpisy, odstavce, oddělovače a další HTML obsah.
Zavírání hlášek
Bootstrap spolupracuje s jQuery.
Pokud si načteme JavaScript k Bootstrapu (dostupný na http://getbootstrap.com/) a přidáte
alertům třídu .alert-dismissible
, může je uživatel následně
zavřít pomocí ikonky křížku v pravém horním rohu. Tlačítko musíme do
HTML kódu přidat v podobě elementu <button>
s třídou
.close
a data atributem data-dismiss="alert"
. Pokud
přidáme ještě třídy .fade
a .show
, docílíme
animace.
Zdrojový kód zavíratelné hlášky s odkazem a dalším HTML obsahem by mohl vypadat např. takto:
<div class="alert alert-success alert-dismissible fade show" role="alert"> <p><strong>Registrace byla úspěšná</strong> a na váš email byl odeslán potvrzující kód.</p> <hr> <p>Jste již jen krok od svých nových IT znalostí a skvělého zaměstnání!</p> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div>
Atributy s prefixem aria-
jsou opět pro hlasové čtečky.
Uzavření hlášky element ze stránky kompletně odstraní. V JavaScriptu lze na uzavření alertu ještě reagovat, můžete zde např. uložit do cookie, aby se již příště nezobrazoval:
$('#alert-reklama').on('closed.bs.alert', function () { // ... kód k vytvoření cookie ... });
Close utilita
Zavírací tlačítko můžeme používat i k jakýmkoli dalším účelům mimo upozornění. Vytvoříme ho následujícím způsobem:
<button type="button" class="close" aria-label="Zavřít"> <span aria-hidden="true">×</span> </button>
Zavírání si musíme napsat sami pomocí JavaScriptu.
Breadcrumb
Drobečková navigace je bezesporu důležitým ovládacím prvkem větších
webů. Jistě jste ji již někdy viděli, máme ji i zde na ITnetworku, kde
signalizuje v jaké jste sekci a jaké sekce jsou nad vámi. O kus výše byste
měli vidět něco jako Domů -> HTML a CSS -> Bootstrap
.
Náhodný uživatel z internetu tedy při vygooglení tohoto článku jednoduše
zjistí, že ITnetwork.cz není stránka jen o Bootstrapu, ale že se jedná o
nějaký kurz a možná klikne na sekci HTML a CSS a začne se zajímat o
další kurzu webdesignu. A nebo klikne na domeček a zjistí, že učíme i
všechny další IT technologie. Určitě chcete, aby vaši uživatelé byli
motivováni web takhle prozkoumávat.
Navigace funguje jako když Jeníček s Mařenkou trousili drobečky, aby se mohli vrátit z temného lesa domů. I uživatel, který se ocitne na nějaké zanořené podstránce, se může chtít vrátit o kategorii výše, v čemž mu ne vždy pomůže tlačítko "Zpět". Pokud mu tuto funkčnost neumožníte, je možné, že stránku raději frustrovaný opustí, než aby zjišťoval jak se do dané sekce dostane. U velmi jednoduchých informačních webů je naopak drobečková navigace na škodu, protože zesložiťuje design stránky a díky mělkým kategoriím nemá žádnou přidanou hodnotu.
Asi vás nepřekvapí, že navigaci do stránky vkládáme jako ostylovaný
seznam. Jelikož záleží na pořadí prvků, sémanticky je nejsprávnější
využít element <ol>
.
<nav aria-label="Drobečková navigace" role="navigation"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Domů</a></li> <li class="breadcrumb-item"><a href="#">HTML a CSS</a></li> <li class="breadcrumb-item active" aria-current="page">Bootstrap</li> </ol> </nav>
Atribut aria-label
je opět dodatečný popisek pro hlasové
čtečky.
Výsledek v prohlížeči:
V příští lekci, Bootstrap - Modální dialogy, se budeme věnovat modální dialogům.