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

V dnešním tutoriálu CSS frameworku Bootstrap nás čeká několik komponent. Jsou to Pagination, Alerts a Breadcrumb.

Paginace v Bootstrapu

Paginaci, česky stránkování, se u většího počtu dat nevyhneme. Jednak je pro uživatele nepříjemné pročítat se mnoha záznamy na jediné stránce a také nám na výpis opravdu velkého množství 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 stejně jako pro většinu navigačních prvků v Bootstrapu seznam, konkrétně element <ul>. 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">&laquo;</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">&raquo;</span>
                <span class="visually-hidden">Next</span>
            </a>
        </li>
    </ul>
</nav>

V kódu máme opět "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ěme 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 vygenerujeme korektní odkazy na dané stránky.

Výsledek v prohlížeči:

Paginace v Bootstrap

paginace.html

Teoreticky bychom mohli odkaz do prvního elementu umístit také a 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 lze stejně jako většinu Bootstrapových komponent zobrazit ve třech velikostech. Elementu <ul> lze dodat kromě .pagination ještě třídu:

.pagination-lg - pro větší velikost,
pro standardní velikost ponecháme jen třídu .pagination,
.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ůžeme na serveru oživit například podle našeho tutoriálu Paginace (stránkování) v PHP.

Upozornění v Bootstrapu

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). 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 takzvané toastové notifikace. Toastové proto, že často vyjedou jako toast z topinkovače. Můžeme 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 vypadá následovně:

<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 .visually-hidden, kde bude typ této hlášky popsaný.

Použití alertů ve stránce vypadá následně takto:

Upozornění v Bootstrap

upozorneni.html

Barva odkazu

Do hlášek často vkládáme odkazy. Ty se 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

Pokud si načteme JavaScript k Bootstrapu a přidáme 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 .btn-close a data atributem data-bs-dismiss="alert". Pokud přidáme ještě třídy .fade a .show, docílíme animace.

Zdrojový kód uzavíratelné hlášky s odkazem a dalším HTML obsahem vypadá například 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-bs-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

Podívejme se na výstup v prohlížeči:

Pokročilá upozornění v Bootstrap

pokrocila_upozorneni.html

Uzavření hlášky element ze stránky kompletně odstraní. V JavaScriptu lze na uzavření alertu ještě reagovat, můžeme zde například uložit do cookie, aby se již příště nezobrazoval:

var alertNode = document.querySelector('.alert');
bootstrap.Alert.getInstance(alertNode);

// Přidání posluchače pro událost zavření alertu
alertNode.addEventListener('closed.bs.alert', function () {
    // ... Kód pro uložení cookie ...
});

// Přidání posluchače pro tlačítko pro zavření alertu
document.querySelector('.alert .close').addEventListener('click', function() {
    // Tento kód se spustí, když uživatel klikne na tlačítko zavřít
    // Alert se zavře díky výchozí funkci Bootstrapu, vyvolá se událost 'closed.bs.alert'
});

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="btn-close" aria-label="Zavřít">
    <span aria-hidden="true">&times;</span>
</button>

Zavírání si musíme napsat sami pomocí JavaScriptu.

Breadcrumb v Bootstrapu

Drobečková (Breadcrumb) navigace je bezesporu důležitým ovládacím prvkem větších webů. Jistě jsme ji již někdy viděli, máme ji i zde na ITnetworku, kde signalizuje v jaké jsme sekci a jaké sekce jsou nad námi. O kus výše bychom 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ě chceme, aby naš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íme, 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 ná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>