Uvod
Bootstrapov navbar je responsivni menu koji služi za navigaciju na sajtu. navbar pri većim ekranima je horizontalan dok kod manjih uređaja kolapsira u ikonicu. Nakon što se klikne na tu ikonicu otvara se vertikalni menu.Širinu ekrana kod koje će doći do okidanja navbara definira varijabla @grid-float-breakpoint koja je u fajlu /bootstrap-3.1.1/less/variables.less. Iz donjeg izvatka vidi se da je predefinirana širina ekrana 768px kod koje će doći do okidanja navbar dugmeta.
Default navbar
Da bi se dobio predefinirani navbar koristi se <nav class="nav navbar-default"> </nav>. Pri manjim veličinama ekrana (<768px) okida se navbar, tj. umjesto horizontalnog menu-a pojavljuje se navbar dugme.Kako bi se omogućio toggle ovog dugmeta tj. da bi se klikom na dugme pojavio vertikalni menu moraju se u dokument uključiti 3 fajla:
1. bootstrap.min.css (100kB)
2. jquery.js (97kB)
3. bootstrap.min.js (21kB)
Jednostavan primjer.
vidi code
» vidi stranicu
Složeniji primjer sa dva navbar dugmeta (home i star dugmad).
vidi code
» vidi stranicu
Primjer sa dva linka i jednim dropdown menuem.
vidi code
» vidi stranicu
Skroliranje navbara
Postoje tri klase koje definiraju da li će navbar biti statičan te će skrolirati sa stranicom ili ne.To su:
- class="navbar-static-top" - navbar skrolira (Ovo je defaul ponašanje tj. ako ne navedemo niti jednu od ove 3 klase.)
- class="navbar-fixed-top" - navbar ne skrolira i smješten je na vrhu stranice
- class="navbar-fixed-bottom" - navbar ne skrolira i smješten je na dnu stranice
Primjer samo sa navbar-default.
U primjeru je napisan dugačak tekst kako bi stranica mogla skrolirati.
vidi code
» vidi stranicu
Primjer samo sa navbar-static-top.
vidi code
» vidi stranicu
Primjer samo sa navbar-fixed-top.
Obavezno u BODY staviti style="padding-top:70px;" jer je navbar predefinirano visok 50px.
vidi code
» vidi stranicu
Primjer samo sa navbar-fixed-bottom.
Obavezno u BODY staviti style="padding-bottom:70px;" jer je navbar predefinirano visok 50px.
vidi code
» vidi stranicu
Form
Unutar navbara često puta se može naći i nekakav formular (form). To je obično form za login ili za pretraživanje.Primjer sa uključenim formularom unutar navbara.
vidi code
» vidi stranicu
Dugmad
Unutar navbara mogu se naći i dugmadi.Primjer sa uključenim formularom unutar navbara.
vidi code
» vidi stranicu
Navbar Text
Čisti text unutar navbara će se definirati CSS klasom class="navbar-text".Primjer sa tekstom unutar navbara.
vidi code
» vidi stranicu
Poravnanje
Poravnanje unutar navbara se vrši pomoći navbar-left i navbar-right CSS klasa. Ovo poravnanje vrijedi samo za ekrane >768px.Predefinirano poravnanje je ulijevo.
Primjer sa poravnanjem linkova udesno.
vidi code
» vidi stranicu
Primjer sa poravnanjem texta udesno.
vidi code
» vidi stranicu
Navbar theme
Različite navbar varijacije i teme.Mint tema.
vidi code
» vidi stranicu
Jednostavni sidebar koji se pretvara u ikonicu pri manjim ekranima.
vidi code
» vidi stranicu