×
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.
Creating solutions

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
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest