Навигация

Навигация

Един навигационен бар представлява навигационен хедър/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“ в дясната част на навигацията ни. Също така ще добавим и подходящи иконки към всеки един от бутоните:

Опитайте сами »

Сгъващи навигационни барове

Един навигационен бар може да заеме твърде много място на един малък дисплей. В такъв случай трябва да можем да скрием навигацията и да я показваме само когато е необходима. В следващият пример навигацията е заменена с бутон в горния десен ъгъл. Само когато бутона е натиснат навигацията ще се покаже:

Опитайте сами »