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 paginace, upozornění a drobečková navigace.

Paginace v Bootstrapu

Paginaci (Pagination), č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 jednak 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 technologií AJAX při rolování stránkou 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í právě paginace, kde si zvolíme, na kterou stránku chceme přejít, a kde 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 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 tomto prvku není odkaz – to abychom si ukázali, jak postupovat, jestliže jsme na první stránce, a na předchozí stránku se proto přesunout nedá. Zašednutí prvku docílíme třídou .disabled. Další prvky seznamu obsahují odkazy na jednotlivé stránky, jimž 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:

Teoreticky bychom mohli umístit odkaz i do prvního elementu a díky třídě .disabled by na něj nešlo kliknout. Prakticky by jej však bylo stále možné označit pomocí klávesy Tab, a proto bychom jej buď neměli do stránky vůbec umisťovat, nebo bychom 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ě třídy .pagination (kterou ponecháváme pro standardní velikost) ještě třídu:

• .pagination-lg – pro větší velikost,
• .pagination-sm – pro menší velikost.

Zarovnání

Pro zarovnání paginace používáme flexbox utility. Pokud chceme stránkování 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í, nemůže si být na webu často jistý, zda se jeho požadavek opravdu mezi jednotlivými přechody mezi stránkami korektně odeslal, nebo naopak může tápat, proč nedošlo k očekávanému chování. Uživateli určitě 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 k nim 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. Pro ty bychom kromě barvy měli ideálně opět přidat i text skrytý pomocí třídy .visually-hidden, kde bude typ této hlášky popsaný.

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

<body>
   <div class="alert alert-success" role="alert">
      Zpráva byla úspěšně odeslána.
   </div>
   <div class="alert alert-danger" role="alert">
      Chyba ověření uživatele, zkontrolujte prosím své heslo.
   </div>
   <div class="alert alert-warning" role="alert">
      Používáte Internet Explorer, některé části webu nemusí fungovat korektně.
   </div>
   <div class="alert alert-info" role="alert">
      Tip: Pro rychlejší vyřízení žádostí se zaregistrujte.
   </div>
</body>

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áš e-mail 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:

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

Drobečková navigace v Bootstrapu

Drobečková navigace (Breadcrumb) 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, ve které jsme sekci a které 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ší kurz 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 takto 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 pravděpodobné, ž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 drobečková navigace naopak na škodu, protože komplikuje design stránky a kvůli 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>

Atribut aria-label opět představuje 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.