Ako vytvoriť štruktúru komponentu Navbar (Bootstrap)

Pri práci s frameworkom Bootstrap je veľmi dôležité používať správne štruktúru jednotlivých komponentov. V opačnom prípade sa môžu objaviť designové "bugy", ktoré sa snažíme opraviť rôznymi zmenami natívnych nastavení čím sa narúša originálny design komponentov. Príklad takéhoto správania môžete vidieť v článku Prečo nefunguje navbar-right (Bootstrap).

Z tohto dôvodu predstavím štruktúru pre komponent Navbar, ktorá môže slúžiť ako template. Ako prvé uvediem základný wrapper, do ktorého je možné vložiť hlavičku a telo komponentu.

Príklad: Základná kostra komponentu navbar.

1
2
3
4
5
<nav class="navbar navbar-default" role="navigation"   aria-labelledby="navigation">
    <div class="container-fluid">
 
    </div>
</nav>
<nav class="navbar navbar-default" role="navigation"   aria-labelledby="navigation">
    <div class="container-fluid">

    </div>
</nav>

Teraz pridám do navigácie hlavičku, ktorá môže reprezentovať názov stránky alebo navigácie (napr. názov produktu).

Príklad: Vloženie hlavičky do navigácie.

1
2
3
4
5
6
7
8
<nav class="navbar navbar-default" role="navigation"   aria-labelledby="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Navbar title</a>
        </div>
 
    </div>
</nav>
<nav class="navbar navbar-default" role="navigation"   aria-labelledby="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Navbar title</a>
        </div>

    </div>
</nav>

Trieda navbar-brand môže byť nahradená triedou navbar-text. Trieda navbar-brand zabezpečí zvýraznený nápis, kým použitie triedy navbar-text vytvorí štandardný text odsadený o 15 pixlov zľava. Trieda navbar-text formátuje text rovnako ako navbar-nav, má rovnakú výšku ale nie farbu textu.

Príklad: Template pre komponent Navbar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<nav class="navbar navbar-default" role="navigation" aria-labelledby="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Navbar title</a>
        </div>
        <ul class="nav navbar-nav">
            <li role="presentation" class="active">
               <a role="menuitem" href="#">Item 1</a>
            </li>
            <li role="presentation">
               <a role="menuitem" href="#">Item 2</a>
            </li>
            <li role="presentation">
               <a role="menuitem" href="#">Item 3</a>
            </li> 
        </ul>
    </div>
</nav>
<nav class="navbar navbar-default" role="navigation" aria-labelledby="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Navbar title</a>
        </div>
        <ul class="nav navbar-nav">
            <li role="presentation" class="active">
               <a role="menuitem" href="#">Item 1</a>
            </li>
            <li role="presentation">
               <a role="menuitem" href="#">Item 2</a>
            </li>
            <li role="presentation">
               <a role="menuitem" href="#">Item 3</a>
            </li> 
        </ul>
    </div>
</nav>

Trieda active slúži na označenie zvolenej položky. Týmto templatom je demonštrovaná navigácia s podporou WAI-ARIA (dúfam, že som túto podporu implementoval správne), s hlavičkou a tromi položkami, kde prvá je nastavená ako označená.

Záver

V novej verzii Bootstrap 4 zatiaľ nie je zmienka o navbar-header a je len priamo uvádzaný navbar-brand.

Ako vytvoriť štruktúru komponentu Navbar (Bootstrap)

Záver

Comments

Add a comment