Získej svůj iPhone v nové soutěži! Získej svůj iPhone v nové soutěži!
Nová překladatelská soutěž ITnetwork.cz o telefon iPhone, sluchátka Beats a další věcné ceny za 4 hodiny práce.
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

17. díl - Bootstrap - Paginace, Upozornění a Drobečková navigace

HTML a CSS Bootstrap Bootstrap - Paginace, Upozornění a Drobečková navigace

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Bootstrap - Navigační lišta, jsme dokončili téma navigace. Dnes nás čeká několik jednodušších 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 &laquo;). 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:

Paginace v Bootstrap
paginace.html

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 jako lidsky čitelný text.

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

Pokročilá upozornění v Bootstrap
pokrocila_upo­zorneni.html

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 ...
});

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:

Drobečková navigace v Bootstrap
drobeckova_na­vigace.html

V příští lekci, , se budeme věnovat modální dialogům.


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Bootstrap - Navigační lišta
Miniatura
Všechny články v sekci
Bootstrap
Aktivity (1)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!