Навигация
Един навигационен бар представлява навигационен хедър/header/ който е поставен в най-горната част на стрницата:
С помощта на Bootstrap навигационният бар може да се разширява в зависимост от ширината на страницата и дисплея.
Стандартен навигационен бар се създава с елемента <nav class="navbar navbar-default">.
Следващият пример показва как да добавим такъв елемент в най-горната част на страницата:
Забележка: Всички примери на тази страница ще покажат навигационна лента, която заема много място на малки екрани (навигационната лента обаче ще бъде на един ред на големи екрани – защото Bootstrap е отзивчива). Този проблем (с малките екрани) ще бъде решен в последния пример на тази страница.
Обърната навигация
Ако не ни харесва стила на навигацията който е по подразбиране можем да го обърнем като Bootstrap ни предлага алтернатива:
Просто променяме класа .navbar-default вътре на .navbar-inverse:
Фиксирани навигационни барове
Тези навигации също така могат да бъдат и фиксирани в най-горната част на страницата или в най-долната част.
По този начин навигацията остава видима на страницата по всяко време(горе или долу) независимо от скролирането на потребителя.
Класа .navbar-fixed-top прави навигационният бар фиксиран в горната част:
Класа .navbar-fixed-bottom прави бара фиксиран в дъното на страницата:
Навигационен бар с падащи менюта
Тези барове могат също така да съдържат и падащи менюта. Следващият пример добавя падащо меню към бутона „Page 1“:
Дясно подравнена навигации
Класа .navbar-right се употребява за да подравним бутоните на навигацията ни към дясната страна.
В следващият пример ще сложим бутоните „Sign Up“ и „Login“ в дясната част на навигацията ни.
Също така ще добавим и подходящи иконки към всеки един от бутоните:
Сгъващи навигационни барове
Един навигационен бар може да заеме твърде много място на един малък дисплей. В такъв случай трябва да можем да скрием навигацията и да я показваме само когато е необходима. В следващият пример навигацията е заменена с бутон в горния десен ъгъл. Само когато бутона е натиснат навигацията ще се покаже: