×
COOKIES
Prezeraním tejto stránky dochádza k spracovaniu cookies. Spracovaniu cookies zabránite v nastaveniach internetového prehliadača alebo nezobrazovaním tejto stránky v internetovom prehliadači.
Vytvárame riešenia

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


Bootstrap,navbar,navbar-header,navbar-brand,navbar-nav,navbar-default
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších