Панель навигации

Панель навигации Bootstrap 4 — это простая оболочка для размещения брендинга, навигации и других элементов в навигационном заголовке.

Базовая панель

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar navbar-expand-sm navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Переключатель навигации"> <span class="navbar-toggler-icon"></span> </button> <!-- Бренд --> <a class="navbar-brand" href="#">Логотип</a> <!-- Ссылки --> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 3</a> </li> </ul> </div> </nav>

Вот объяснение:

  • поместите всё внутрь элемента <nav> с классами .navbar и .navbar-expand{-sm|-md|-lg|-xl} вместе с цветовой схемой;
  • для переключаемого меню на небольших устройствах используйте элемент <button> с классом .navbar-toggler; чтобы отобразить «гамбургер», укажите класс .navbar-toggler-icon для элемента <span>;
  • для списка ссылок используйте элемент <ul> с классом .navbar-nav;
  • для каждого отдельного пункта списка используйте <li> с классом .nav-item;
  • для отдельных ссылок используйте <a> с классом .nav-link.

Навигационная панель с выпадающим меню

Вы можете добавить выпадающие меню на панель навигации. Просто вставьте код для выпадающего меню в элемент <li> с классом .dropdown.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar navbar-expand-sm navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Переключатель навигации"> <span class="navbar-toggler-icon"></span> </button> <!-- Бренд --> <a class="navbar-brand" href="#">Логотип</a> <!-- Ссылки --> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 2</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">Меню</a> <div class="dropdown-menu" aria-labelledby="Просмотр"> <a class="dropdown-item" href="#">Ссылка 1</a> <a class="dropdown-item" href="#">Ссылка 2</a> <a class="dropdown-item" href="#">Ссылка 3</a> </div> </li> </ul> </div> </nav> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Текущая страница

Используйте класс .active, чтобы пометить ссылку как текущую страницу или раздел (примените его к <li>). Также добавьте <span> с .sr-only, чтобы сообщить об этом программам чтения с экрана.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar navbar-expand-sm navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Переключатель навигации"> <span class="navbar-toggler-icon"></span> </button> <!-- Бренд --> <a class="navbar-brand" href="#">Логотип</a> <!-- Ссылки --> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 1</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Ссылка 2 <span class="sr-only">(текущая)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 3</a> </li> </ul> </div> </nav>

Панель навигации с полями форм

Вы можете включить поля формы в панель навигации, добавив .form-inline к элементу <form>. Здесь мы также используем .mr-auto для предыдущего элемента, чтобы форма была выровнена вправо.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar navbar-expand-sm navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Переключатель навигации"> <span class="navbar-toggler-icon"></span> </button> <!-- Бренд --> <a class="navbar-brand" href="#">Логотип</a> <!-- Ссылки --> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 2</a> </li> </ul> <!-- Поиск --> <form class="form-inline" role="search"> <input type="text" class="form-control"> <button type="submit" class="btn btn-secondary">Найти</button> </form> </div> </nav>

Выравнивание

Вы можете использовать вспомогательные классы (например, .mr-auto или .justify-content-end) для выравнивания элементов в панели навигации.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar navbar-expand-sm navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Переключатель навигации"> <span class="navbar-toggler-icon"></span> </button> <!-- Бренд --> <a class="navbar-brand" href="#">Логотип</a> <!-- Ссылки --> <div class="collapse navbar-collapse justify-content-end" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 3</a> </li> </ul> </div> </nav>

Флексбокс-классы берут свои имена из действительных свойств и значений флексбоксов. Это позволяет легко угадывать название наиболее подходящего класса для данной ситуации. Вы также можете добавить адаптивное сокращение, чтобы выполнить выравнивание только для определённых размеров области просмотра. Например, .justify-content-lg-end применяет justify-content: end для больших устройствах и выше.

Документация Bootstrap, которую вы можете использовать в качестве справочника, содержит полный список флексбокс-классов.

Также смотрите мою статью, содержащую демонстрацию выравнивания через флексбоксы.

Bootstrap 4 против Bootstrap 3

Bootstrap 3 использовал .navbar-left и .navbar-right для выравнивания панели навигации, Bootstrap 4 использует разные вспомогательные классы.

Цвета

Bootstrap предоставляет различные варианты для добавления цвета к панели навигации. Это работает так: сперва задаёте, светлая панель или тёмная (через .navbar-light или .navbar-dark), а затем указываете цвет. Цвет можно задать с помощью одного из классов цвета Bootstrap (например, .bg-primary, .bg-dark), либо указав свой собственный цвет с помощью CSS (например, через background-color).

В предыдущих примерах уже указан цвет панели навигации. Вот ещё несколько примеров.

Главный цвет, светлая панель

Здесь мы используем .bg-primary вместе с .navbar-light.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar navbar-expand-sm navbar-light bg-primary"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Переключатель навигации"> <span class="navbar-toggler-icon"></span> </button> <!-- Бренд --> <a class="navbar-brand" href="#">Логотип</a> <!-- Ссылки --> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 3</a> </li> </ul> </div> </nav>

Главный цвет, тёмная панель

Здесь мы используем .bg-primary вместе с .navbar-dark.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Переключатель навигации"> <span class="navbar-toggler-icon"></span> </button> <!-- Бренд --> <a class="navbar-brand" href="#">Логотип</a> <!-- Ссылки --> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 3</a> </li> </ul> </div> </nav>

Свой цвет

Чтобы указать свой собственный цвет, опустите любой класс .bg-* (например, удалите .bg-primary) и добавьте свой собственный цвет с помощью CSS.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar navbar-expand-sm navbar-dark" style="background: coral;"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Переключатель навигации"> <span class="navbar-toggler-icon"></span> </button> <!-- Бренд --> <a class="navbar-brand" href="#">Логотип</a> <!-- Ссылки --> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 3</a> </li> </ul> </div> </nav>

Bootstrap 4 против Bootstrap 3

Bootstrap 4 представил класс .navbar-light и позволяет использовать классы .bg-* для панелей навигации. Bootstrap 3 позволяет инвертировать цвета, но не поддерживает другие классы для панелей навигации.

Фиксированная панель

Вы можете закрепить панель навигации вверху или внизу окна просмотра с помощью класса .fixed-top или .fixed-bottom.

Фиксация вверху

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Переключатель навигации"> <span class="navbar-toggler-icon"></span> </button> <!-- Бренд --> <a class="navbar-brand" href="#">Логотип</a> <!-- Ссылки --> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 3</a> </li> </ul> </div> </nav> <!-- Устанавливаем высоту body, чтобы появилась полоса прокрутки --> <style scoped> body { height:2000px; background-image:url('/example/image/bubble1.gif'); } </style>

Фиксация внизу

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Переключатель навигации"> <span class="navbar-toggler-icon"></span> </button> <!-- Бренд --> <a class="navbar-brand" href="#">Логотип</a> <!-- Ссылки --> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 3</a> </li> </ul> </div> </nav><!-- Устанавливаем высоту body, чтобы появилась полоса прокрутки --> <style scoped> body { height:2000px; background-image:url('/example/image/bubble2.gif'); } </style>

padding обязателен

При использовании фиксированных панелей навигации вам обычно понадобится добавить padding, чтобы компенсировать высоту панели навигации (в противном случае панель навигации будет скрывать ваше содержимое). Например, для панели навигации с фиксацией вверху попробуйте это:

body { padding-top: 70px; }

А для фиксации снизу:

body { padding-bottom: 70px; }

Вы можете настроить эти значения как нужно.

Bootstrap 4 против Bootstrap 3

Bootstrap 3 использует .navbar-fixed-top и .navbar-fixed-bottom, чтобы зафиксировать панели навигации вверху или внизу. Bootstrap 4 упростил это до .fixed-top и .fixed-bottom.

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты