Панель навигации 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 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.