Опубликовано Оставить комментарий

Навигационная панель в Boostrap

Навигационная панель
Навигационная панель

В заметке о навигационном меню в 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

Добавить комментарий