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">&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="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">&times;</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">&times;</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.