Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 21 - Bootstrap - Navigační lišta

V minulé lekci, Bootstrap - Navigace, jsme se naučili stylovat navigaci včetně záložek.

V dnešním tutoriálu CSS frameworku Bootstrap využijeme při tvorbě navigační lišty znalosti z minulé lekce.

Navigační lišta v Bootstrapu

Navigační lišta (navbar) je jedna z nejdůležitějších Bootstrap komponent a zároveň součást většiny layoutů. Jedná se o responzivní navigační lištu, která může obsahovat nejrůznější elementy a na mobilních zařízeních se "smrskne" do podoby tlačítka, otevírajícího svislé menu. Kromě navigace často lišty obsahují také logo, formuláře (například pro vyhledávání na stránce), texty a tlačítka zobrazující další obsah.

Do ukázky si jako obvykle vložíme téměř vše, co komponenta umí a poté si jednotlivé součásti podrobněji rozepíšeme. Pro správnou funkčnost mobilního menu a rozbalovacích tlačítek (Dropdowns) si opět nezapomeneme nalinkovat Bootstrap JavaScript plugin:

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">
        <img src="https://www.itnetwork.cz/images/5/css/bootstrap/twitter.png"  class="d-inline-block align-top" width="32" height="32" alt="Twitter" />
        obchod.cz
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#obsah-navigacni-listy" aria-controls="obsah-navigacni-listy" aria-expanded="false" aria-label="Rozbalit navigaci">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="obsah-navigacni-listy">
        <ul class="navbar-nav me-auto">
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">O firmě <span class="visually-hidden">(aktuální)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="produkty-dropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Produkty
                </a>
                <div class="dropdown-menu" aria-labelledby="produkty-dropdown">
                    <a class="dropdown-item" href="#">Dílna</a>
                    <a class="dropdown-item" href="#">Kuchyně</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Zahrada</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Ceník</a>
            </li>
        </ul>
        <form class="d-flex my-2 my-lg-0">
            <input class="form-control me-2" type="search" placeholder="Vyhledat..." aria-label="Vyhledávání">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Vyhledat</button>
        </form>
    </div>
</nav>

Výsledek:

Navigační lišta v Bootstrap
navigacni_lis­ta.html

Kód si nyní popíšeme.

Navigační lišta

Začněme hezky po popořadě. Navigační lištu vytvoříme elementem <nav> se třídou .navbar. Pro dosažení responzivity dodáme například třídu .navbar-expand-lg, což způsobí zobrazení svislého menu místo lišty na zařízeních menších než velkých. V ukázce výše je pro účely článku použita třída .navbar-expand-md. Breakpointy, tedy jak přesně velké je které zařízení, jsme si zmínili v lekci Bootstrap - Typografie. Všimněme si, že responzivní menu je vytvořené pomocí Collapse z lekce Bootstrap Collapse a Accordion.

Logo vkládáme do odkazu se třídou .navbar-brand. Pokud do odkazu vkládáme i obrázek, je mu třeba dodatečně nastavit rozměry a pomocí utility tříd zarovnání nahoru.

Responzivní tlačítko

Jako další prvek obvykle vkládáme tlačítko, které je viditelné pouze na mobilních zařízeních a slouží k rozbalení svislého menu. Jedná se o element <button> se třídou .navbar-toggler a data atributem data-bs-toggle="collapse". Do data-bs-target uvádíme selektor pro element reprezentující další obsah navigace, který má být na mobilních zařízeních právě ve výsuvném menu namísto v navigační liště. Na větších zařízeních bude tento obsah přítomen přímo v navigační liště. Tento element následuje dále jakožto element <div>.

Pokud je v navigaci příliš málo elementů a chceme je vyrovnat tak, aby se rozmístily rovnoměrně, můžeme navigaci přiřadit následující třídy: navbar navbar-light bg-light justify-content-between.

Obsah navigace

Jednotlivé části navigace vkládáme jako prvky seznamu <ul> se třídou .navbar-nav, který se roztahuje do šířky jak jen je to možné. Třída .me-auto nastavuje pravý margin na hodnotu auto. Prvky navigace již máme vyzkoušené z lekce Bootstrap - Navigace. K odkazu na stránku, na které se právě nacházíme, bychom měli přidat třídu .active.

Inline formulář

Ani poslední inline formulář z lekce Bootstrap - Formuláře by pro nás již neměl být neznámý. Pro ně platí vše, co jsme si již v této lekci ukázali. Pokud bychom za sebe skládali více formulářových komponent různých velikostí, přiřadíme jim třídu .align-middle, aby se vycentrovaly na střed.

Stejně jako tomu bylo u navigací, i navigaci uvnitř navigační lišty můžeme přepsat tak, aby používala pouze elementy <a> a seznam <ul> vypustit. V takové navigaci ovšem nemůžeme používat Dropdown tlačítka z lekce Bootstrap - Dropdowns.

Text

Libovolný text do navbaru vkládáme jako element <span> se třídou .navbar-text. Pomocí ní se text svisle vycentruje.

Navigační lišty se skryjí v případě, že se stránku rozhodneme vytisknout. Pokud bychom chtěli, aby byla i navigační lišta součástí tisku, přiřadíme jí třídu .d-print.

Barvy

Navigační lišta je připravena ve světlé i tmavé verzi, v závislosti na našem výběru liště přiřazujeme třídu .navbar-light, respektive .navbar-dark. Tato třída nastyluje tlačítko a barvy textu. Samotnou barvu lišty poté nastavíme přidáním nějaké další třídy z background utilities, které jsem si představili v lekci Bootstrap - Tabulky:

Navigační lišta v Bootstrap
navigacni_lis­ta.html

Navigační liště samozřejmě můžeme stejně tak dobře nastavit úplně jakoukoli barvu pozadí přes vlastní třídu nebo inline styl.

Pozicování

K pozicování navigační lišty použijeme position utilities. Zajímat nás bude zejména:

  • Fixní pozice, kdy navigační lišta neroluje se stránkou, ale zůstává na pevné pozici. Tohoto chování dosáhneme přidáním třídy .fixed-top nebo .fixed-bottom, záleží zda lištu chceme mít přilepenou na horní nebo dolní straně stránky. Tuto funkci používá poměrně velké množství webů a uživatelům umožňuje používat navigační lištu kdekoli na stránce, bez nutnosti rolovat kvůli ní nahoru.
  • Sticky pozice jsou rovněž velmi zajímavé, ale pozor, fungují pouze v nových prohlížečích (Podpora pro CSS vlastnost a hodnotu position: sticky). Tehdy se navigace chová jako klasický element, ale jakmile začneme scrollovat, přichytí se jako by byla její pozice fixní. Výhodou je, že takto můžeme nad navigaci umístit například velké logo, které se stránkou poté odscrolluje, zatím co navigace se k horní části obrazovky přilepí. Logo tedy na stránce nezabírá místo a navigace je stále při ruce. Pro toto chování navigační liště přiřadíme třídu .sticky-top.

V následujícím cvičení, Řešené úlohy k 20.-21. lekci Bootstrap CSS frameworku, si procvičíme nabyté zkušenosti z předchozích lekcí.


 

Předchozí článek
Bootstrap - Navigace
Všechny články v sekci
Kompletní kurz CSS frameworku Bootstrap
Přeskočit článek
(nedoporučujeme)
Řešené úlohy k 20.-21. lekci Bootstrap CSS frameworku
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
504 hlasů
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 se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity