
В заметке о навигационном меню в Bootstrap мы сделали первый шаг навстречу построению меню на сайте с Bootstrap. Обычно такое меню является частью большего компонента — навигационной панели. Такая панель располагается в верхней или нижней части сайта, иногда в фиксированном положении. Примечание: в навпанели не поддерживается ссылки, занимающие 100% ширины родительского элемента (если ссылки не будут помещаться — они начнут занимать следующий фрагмент свободного места).
Навигационная панель в Boostrap
Подробное описание создания навигационной панели.
Пример навигационной панели с полем ввода:
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Результат будет похож на следующее изображение:

Для добавления в навигационную панель кнопки (которая не включена в форму), классам кнопки добавляется .navbar-btn
.
Если нужно вписать девиз или ключевую фразу компании, в панель добавляется параграф с классами
<p class="navbar-text navbar-right">...
Для фиксации панели навигации предусмотрены классы .navbar-fixed-top
и .navbar-fixed-bottom
— они «прижимают» меню к верхней или нижней частям страницы, не зависимо от размера содержимого. Примечание: эти классы задаются элементу nav
, включающему в себя div
с любым из классов: .container
или .container-fluid
, например так:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Для инверсии цвета меню (чтобы сделать белые и серые кнопки на темно-сером фоне) элементу nav
добавляется .navbar-inverse