Zarábaj až 6 000 € mesačne! Akreditované rekvalifikačné kurzy od 0 €. Viac informácií.

20. diel - Bootstrap - Navigácia

Predchádzajúci
Ďalší

V predchádzajúcom cvičení, Riešené úlohy k 17.-19. lekcii CSS frameworku Bootstrap, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V dnešnom tutoriáli CSS frameworku Bootstrap sa naučíme štýlovať navigáciu.

Navigácia v Bootstrape

Vždy, keď budeme v našej prezentácii potrebovať navigáciu, štýly nebudú ďaleko. Bootstrap má pre nás pripravenú nielen samostatnú navigáciu, ale aj responzívnu navigačnú lištu s vychádzajúcim menu. V dnešnej lekcii sa budeme venovať samostatnej navigácii, pre ktorú máme k dispozícii triedu .nav.

Ukážme si najskôr ako komponent vyzerá. Na prezentáciu prvkov navigácie použijeme položky zoznamu:

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">About us</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Products</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Pricelist</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
    </li>
</ul>

Výsledok v prehliadači:

Navigation in Bootstrap
navigation.html

Prvkom navigácie priraďujeme triedu .nav-link. Na označenie aktívneho odkazu v navigácii používame triedu .active a na zneaktívnenie niektorých položiek používame .disabled. Tu ešte používame atribút tabindex="-1". Jeho hodnota -1 užívateľom znemožní na tento prvok prejsť pomocou klávesnice.

Element <nav> a zarovnanie

Okrem zoznamu môžeme použiť aj obyčajné odkazy bez ďalších elementov, ktoré uzavrieme do elementu <nav>, opäť s triedou .nav. Rovno si ukážme aj ako položky v navigácii zarovnať vodorovne. Keďže celá navigácia je postavená na flexboxe, použijeme nám už známe flexbox utility. Konkrétne na zarovnanie na stred využijeme triedu .justify-content-center:

<nav class="nav justify-content-center">
    <a class="nav-link active" aria-current="page" href="#">About us</a>
    <a class="nav-link" href="#">Products</a>
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Pricelist</a>
    <a class="nav-link" href="#">Contact</a>
</nav>

A výsledok:

Navigation in Bootstrap
navigation_lin­ks.html

Na zarovnanie vpravo by sme použili triedu .justify-content-end.

Zvislá navigácia

Pokiaľ by sme chceli navigáciu naštýlovať ako zvislú, využijeme triedu .flex-column. Zvislé navigácie sa uplatnia najmä na menších displejoch, preto môžeme jednoducho navigáciu naštýlovať aj ako vodorovnú na počítačoch a zvislú na telefónoch. Na to by sme využili napríklad triedu .flex-sm-row:

<ul class="nav flex-column">
    <li class="nav-item">
        <a class="nav-link" aria-current="page" href="#">About us</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Products</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Pricelist</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
    </li>
</ul>

Výsledok:

Navigation v Bootstrap
navigation_ver­tical.html

Opak by sme docielili triedou .flex-sm-column, kedy by bola navigácia zvislá na počítačoch a vodorovná na telefónoch. Ďalej by sme mohli využiť responzívnu triedu ako .text-sm-center, ktorú by sme priradili položkám a tá by ich na počítačoch centrovala a na mobiloch, kde je navigácia zvislá, by ich nechala zarovnané vľavo ako zvislý zoznam.

Záložky

Navigáciu môžeme jednoducho naštýlovať ako záložky pridaním triedy .nav-tabs. Je tu podporovaná aj trieda .active. K plnej funkcii je potrebné nalinkovať aj javascriptový plugin Bootstrapu:

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Aboout the company</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Products</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Hobby</a>
            <a class="dropdown-item" href="#">Kitchen</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Garden</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Pricelist</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
    </li>
</ul>

Výsledok v prehliadači:

Navigation in Bootstrap
navigation_bo­okmarks.html

Všimnime si, že v jednej záložke je použité aj rozbaľovacie tlačidlo Dropdown z lekcie Bootstrap - Dropdowns.

Pilulky

Podobne môžeme z odkazov urobiť aj "pilulky" pridaním triedy .nav-pills. Hneď si ukážeme aj využitie ďalšej triedy, .nav-fill, ktorá roztiahne obsah navigácie tak, aby vyplnil celú jej šírku. Pre prvky s rovnakou šírkou použijeme aj .nav-justified. Všetok vodorovný priestor bude obsadený navigačnými odkazmi, ale na rozdiel od vyššie uvedeného .nav-fill bude každá navigačná položka rovnako široká.

Pokiaľ by sme na definíciu navigácie využili element <nav> a odkazy <a>, teda skrátenú verziu bez zoznamu, odkazom už nemusíme priraďovať triedu .nav-item. Ukážme si tento príklad:

<nav class="nav nav-pills nav-fill">
    <a class="nav-link active" aria-current="page" href="#">About us</a>
    <a class="nav-link" href="#">Products</a>
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Pricelist</a>
    <a class="nav-link" href="#">Contact</a>
</nav>

V prehliadači:

Navigation v Bootstrap
navigation_pi­lls.html

Ak by sme chceli pridať aj Dropdown, postupovali by sme rovnako ako pri záložkách a využili by sme definíciu pomocou zoznamu:

<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="#">About us</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Products</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Hobby</a>
            <a class="dropdown-item" href="#">Kitchen</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Garden</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Pricelist</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
    </li>
</ul>

V prehliadači:

Navigation in Bootstrap
navigation_pi­lls_dropdown.html

Sémantika

Navigáciu pomocou zoznamu <ul> musíme priraďovať nadradenému rodičovskému prvku, takisto aj atribút role="navigation" pre hlasové čítačky alebo ju obaliť do sémantického elementu <nav>. Do atribútu role NEuvádzame hodnoty tablist, tab ani tabpanel a to aj keď v navigácii záložky používame, pretože tieto role slúžia pre dynamický obsah, ktorý záložky prepínajú. Dynamické záložky by sme nemali kombinovať s Dropdown tlačidlami, pretože môže byť mätúce, že "aktivačné" tlačidlo nebude spočiatku viditeľné, ale bude skryté spolu so záložkou.

Dynamické záložky

Keďže sme dynamické záložky už niekoľkokrát spomenuli, poďme si ukázať, ako ich na navigáciu napojiť. Nezabudnime pripojiť JavaScript:

<ul class="nav nav-tabs" id="navigation" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="about-company-tab" data-bs-toggle="tab" data-bs-target="#about-company" role="tab" aria-controls="about-company" aria-selected="true">AAbout us</button>
    </li>
    <li class="nav-item">
        <button class="nav-link" id="products-tab" data-bs-toggle="tab" data-bs-target="#products" role="tab" aria-controls="products" aria-selected="false">Products</button>
    </li>
    <li class="nav-item">
        <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
    </li>
</ul>
<div class="tab-content" id="navigation">
    <div class="tab-pane fade show active" id="about-company" role="tabpanel" aria-labelledby="about-company-tab">The About us tab contents...</div>
    <div class="tab-pane fade" id="products" role="tabpanel" aria-labelledby="products-tab">The Products tab contents...</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">The Contact tab contents...</div>
</div>

Výsledok:

Navigation in Bootstrap
navigation_dy­namic_bookmar­ks.html

Všimnime si využitie tried .fade a .show na dosiahnutie animácie. Nasleduje zjednodušená verzia s elementom <nav>:

<nav class="nav nav-tabs" id="navigation" role="tablist">
            <button class="nav-item nav-link active" id="about-company-tab" data-bs-toggle="tab" data-bs-target="#about-company" role="tab" aria-controls="about-company" aria-selected="true">About us</button>
            <button class="nav-item nav-link" id="products-tab" data-bs-toggle="tab" data-bs-target="#products" role="tab" aria-controls="products" aria-selected="false">Products</button>
            <button class="nav-item nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
        </nav>
        <div class="tab-content" id="navigation">
            <div class="tab-pane fade show active" id="about-company" role="tabpanel" aria-labelledby="about-company-tab">The About us tab contents...</div>
            <div class="tab-pane fade" id="products" role="tabpanel" aria-labelledby="products-tab">The Products tab contents...</div>
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">The Contact tab contents...</div>
        </div>

Výstup v prehliadači:

Navigation in Bootstrap
navigation_dy­namic_bookmar­ks.html

Navigáciu s dynamickými záložkami môžeme vytvoriť aj s pomocou piluliek, stačí namiesto triedy .nav-tabs priradiť triedu .nav-pills. Ideálne by sme mali zmeniť aj hodnotu data atribútu data-bs-toggle z tab na pill. Dokonca môžeme záložky umiestniť aj vertikálne; tento príklad si ukážeme:

<div class="row">
    <div class="col-3">
    <div class="nav flex-column nav-pills" id="navigation" role="tablist" aria-orientation="vertical">
        <button class="nav-link active" id="about-company-tab" data-bs-toggle="pill" href="#about-company" role="tab" aria-controls="about-company" aria-selected="true">About us</button>
        <button class="nav-link" id="products-tab" data-bs-toggle="pill" href="#products" role="tab" aria-controls="products" aria-selected="false">Products</button>
        <button class="nav-link" id="contact-tab" data-bs-toggle="pill" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
    </div>
</div>
<div class="col-9">
    <div class="tab-content" id="navigation-content">
        <div class="tab-pane fade show active" id="about-company" role="tabpanel" aria-labelledby="about-company-tab">The About us tab contents...</div>
        <div class="tab-pane fade" id="products" role="tabpanel" aria-labelledby="products-tab">The Products tab contents...</div>
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">The Contact tab contents...</div>
    </div>
</div>

Výstup v prehliadači:

Navigation in Bootstrap
navigation_dy­namic_bookmar­ks_pills.html

V ukážke je použitý responzívny grid, ktorý si podrobne vysvetlíme neskôr v kurze.

JavaScript

Ako pri väčšine komponentov, aj pri navigácii môžeme ovplyvňovať správanie JavaScript pluginov. Ako vždy môžeme využívať na prispôsobenie správania buď data atribúty alebo k jednotlivým vlastnostiam pristupovať pomocou JavaScriptu. Vlastnosti majú v JavaScripte rovnaký názov ako data atribúty (bez prefixu data-bs-). Jedná sa o data atribút data-bs-toggle s hodnotou tab alebo pill.

Cez JavaScript by sme bez data atribútov inicializovali záložky ako:

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

Záložky môžeme tiež aktivovať individuálne nasledujúcimi spôsobmi:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Selection by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Selecting the first tab

Metódy triedy Tab

Trieda Tab v Bootstrape poskytuje pre prácu s jej inštanciami nasledujúce metódy:

  • dispose() - Táto metóda zničí inštanciu záložky, uvoľní všetky jej prostriedky a odstráni príslušných poslucháčov udalostí.
  • show() - Metóda aktivuje a zobrazí záložku spojenú s danou inštanciou triedy Tab.
  • getInstance(element) - Statická metóda, ktorá získa inštanciu Tab spojenú s určeným DOM elementom. Ak taká inštancia neexistuje, vráti null.
  • getOrCreateInstance(element, config) - Statická metóda, ktorá získa existujúcu inštanciu Tab spojenú s DOM elementom alebo vytvorí novú inštanciu, pokiaľ žiadna nie je nájdená. Pre nastavenie inštancie môžete použiť voliteľný parameter config.
Využitie metód v praxi

Zobrazenie záložky vyzerá nasledovne:

var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)

tab.show()

Získanie inštancie tab spojené s DOM elementom:

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl)

Získanie inštancie tab spojené s DOM elementom alebo vytvorenie novej, pokiaľ nebola inicializovaná:

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl)

Na aktivovanie určitej záložky postupujeme nasledovne.

Na otvorenie záložky podľa mena:

var triggerEl = document.querySelector('#tabs a[href="#products"]');
var tab = new bootstrap.Tab(triggerEl);

tab.show();

Na otvorenie prvej záložky:

var firstTabEl = document.querySelector('#tabs a:first-child');
var firstTab = new bootstrap.Tab(firstTabEl);

firstTab.show();

Na otvorenie poslednej záložky:

var lastTabEl = document.querySelector('#tabs a:last-child');
var lastTab = new bootstrap.Tab(lastTabEl);

lastTab.show();

Na otvorenie konkrétnej záložky (tu štvrtej):

var specificTabEl = document.querySelector('#tabs li:nth-child(4) a');
var specificTab = new bootstrap.Tab(specificTabEl);

specificTab.show();

Metódy sú asynchrónne a odovzdajú riadenie skôr, než dôjde naozaj k prepnutiu záložky! Je to z dôvodu prebiehajúcej animácie. Ak animácia (transition) práve prebieha, všetky volania metód budú ignorované.

Udalosti

Reagovať môžeme v JavaScripte aj na nasledujúce udalosti:

  • hide.bs.tab - Udalosť vyvolaná na aktívnej záložke, keď je na ceste k deaktivácii kvôli zobrazeniu novej záložky.
  • show.bs.tab - Udalosť vyvolaná na záložke, ktorá sa bude zobrazovať, ale ešte skôr ako je zobrazená.
  • hidden.bs.tab - Udalosť vyvolaná na pôvodne aktívnej záložke, ale až po tom, čo bola deaktivovaná a zobrazila sa nová záložka.
  • shown.bs.tab - Udalosť vyvolaná na novo aktívnej záložke po jej zobrazení.

Reakcia na udalosť bude vyzerať napríklad takto:

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // Newly activated tab
  event.relatedTarget // Previous active tab
})

V ďalšej lekcii, Bootstrap - Navigačná lišta, si ukážeme, ako napísať responzívnu navigačnú lištu.


 

Ako sa ti páči článok?
Pred uložením hodnotenia, popíš prosím autorovi, čo je zleZnakov 0 z 50-500
Predchádzajúci článok
Riešené úlohy k 17.-19. lekcii CSS frameworku Bootstrap
Všetky články v sekcii
Kompletný kurz CSS frameworku Bootstrap
Preskočiť článok
(neodporúčame)
Bootstrap - Navigačná lišta
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
41 hlasov
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity