Uvod
U bootstrapu css klasa class="nav" unutar UL taga služi za definiranje nekakvog menu-a.Taj menu može biti: tab ili pill.
Tab
Osnovni tab menu definira se na slijedeći način. Primjetiti da se pomoću class="active" definira trenutni tab na kojem se nalazimo.Primjer: Kreirati tab izbornik.
vidi code
» vidi stranicu
1. bootstrap.min.css
2. jquery.js
3. bootstrap.min.js (21kB) ako želimo fade efekt ili
tab.js (3kB) ako ne želimo fade efekt tab.js bootstrap plugin.
Pri tome nije potrebno pisati nikakav JS ili jQuery code da bi tabovi radili.
Sa class="active" određuje se koji tab i njegov pripadajući sadržja će biti aktivan nakon učitavanja stranice. Directivu active potrebno je staviti i u LI gdje je tab i u DIV gdje je sadržaj.
Primjer 1: Potpuno funkcionalan tab izbornik bez fade efekta.
vidi code
» vidi stranicu
Primjer 2: Potpuno funkcionalan tab izbornik sa fade efektom.
vidi code
» vidi stranicu
Pill
Pill u bootstrapu je potpuno jednak tabu osim što više sliči na dugme.Primjer: Potpuno funkcionalan pill izbornik sa fade efektom.
Primjetiti da je sadržaj radi ljepšeg izgleda stavljen u .well klasu.
vidi code
» vidi stranicu
Disabled
Ukoliko neke tabove treba blokirati stavit ćemo class="disabled" unutar LI taga. Ova klasa utiče samo na izgled linka i ne utiče na funkcionalnost. Odnosno link tj. tab će još uvijek raditi. Za blokiranje linka (taba) potreban je Javascript, odnosno jQuery remove() funkcija.Primjer sa tabovima od kojih je posljednji blokiran (disabled).
vidi code
» vidi stranicu
Dropdown u Nav-u
Osim linkova u tab-u se može staviti i dropdown sa skupom svojih linkova.Primjer sa tabovima od kojih je posljednji dropdown.
vidi code
» vidi stranicu