Документация и примеры для мощного, отзывчивого навигационного заголовка Bootstrap, панели навигации. Включает поддержку брендинга, навигации, плагина свертывания и т. д.
Как это работает
Вот что Вам нужно знать перед тем, как начать работу с навигационной панелью:
- Панели навигации требуют обертки
.navbarс.navbar-expand{-sm|-md|-lg|-xl}для гибкого сворачивания и классов цветовой схемы. - Панели навигации и их содержимое по умолчанию плавно. Используйте необязательные контейнеры, чтобы ограничить их горизонтальную ширину.
- Используйте наши служебные классы интервалов и flex для управления интервалом и выравниванием внутри навигационных панелей.
- Панели навигации по умолчанию адаптивны, но Вы можете легко изменить их, чтобы это изменить. Адаптивное поведение зависит от нашего Collapse-плагина JavaScript.
- Навигационные панели по умолчанию скрыты при печати. Заставьте их печатать, добавив
.d-printк.navbar. См. класс утилиты отображения. - Обеспечьте доступность с помощью элемента
<nav>или, если используется более общий элемент, такой как<div>, добавьтеrole="navigation"к каждой панели навигации, чтобы явно идентифицировать ее как ориентир для пользователи вспомогательных технологий.
prefers-reduced-motion. См. Раздел с уменьшенным движением в нашей документации по специальным возможностям.
Поддерживаемый контент
Навигационные панели имеют встроенную поддержку нескольких подкомпонентов. При необходимости выберите из следующего:
.navbar-brandдля названия Вашей компании, продукта или проекта..navbar-navдля полноразмерной и облегченной навигации (включая поддержку раскрывающихся списков)..navbar-togglerдля использования с нашим плагином сворачивания и другими поведениями переключение навигации..form-inlineдля любых элементов управления и действий формы..navbar-textдля добавления вертикально центрированных строк текста..collapse.navbar-collapseдля группировки и скрытия содержимого навигационной панели по родительской контрольной точке.
Вот пример всех подкомпонентов, включенных в адаптивную световую навигационную панель, которая автоматически сворачивается в контрольной точке lg (большая).
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Панель навигации</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Переключатель навигации">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Главная <span class="sr-only">(текущая)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ссылка</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Выпадающий список
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Действие</a>
<a class="dropdown-item" href="#">Другое действие</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Что-то еще здесь</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled">Отключенный</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Поиск" aria-label="Поиск">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Поиск</button>
</form>
</div>
</nav>В этом примере используются классы утилит цвет (bg-light) и интервал (my-2, my-lg-0, mr-sm-0, my-sm-0).
Бренд
.navbar-brand может применяться к большинству элементов, но якорь работает лучше всего, поскольку для некоторых элементов могут потребоваться служебные классы или пользовательские стили.
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Панель навигации</a>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Панель навигации</span>
</nav>Добавление изображений в .navbar-brand, скорее всего, всегда потребует настраиваемых стилей или утилит для правильного размера. Вот несколько примеров для демонстрации.
<!-- Просто изображение -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
</nav><!-- Изображение и текст -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>Навигация
Навигационные ссылки на панели навигации основаны на наших параметрах .nav с их собственным классом-модификатором и требуют использования классов переключателя для правильного адаптивного стиля. Навигация в навигационных панелях также будет увеличиваться, чтобы занимать как можно больше горизонтального пространства, чтобы содержимое Вашей навигационной панели было надежно выровнено.
Активные состояния - с .active - для обозначения, что текущая страница может быть применена непосредственно к .nav-link или их непосредственному родительскому .nav-item.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Панель навигации</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Переключатель навигации">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Главная <span class="sr-only">(текущая)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Функции</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Цены</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Отключенный</a>
</li>
</ul>
</div>
</nav>А поскольку мы используем классы для нашей навигации, Вы можете полностью отказаться от подхода на основе списков, если хотите.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Панель навигации</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Переключатель навигации">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="#">Главная <span class="sr-only">(текущая)</span></a>
<a class="nav-link" href="#">Функции</a>
<a class="nav-link" href="#">Цены</a>
<a class="nav-link disabled">Отключенный</a>
</div>
</div>
</nav>Вы также можете использовать раскрывающиеся списки на панели навигации. Для размещения раскрывающихся меню требуется элемент оболочки, поэтому обязательно используйте отдельные и вложенные элементы для .nav-item и .nav-link, как показано ниже.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Панель навигации</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Переключатель навигации">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Главная <span class="sr-only">(текущая)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Функции</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Цены</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Ссылка выпадающий список
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Действие</a>
<a class="dropdown-item" href="#">Другое действие</a>
<a class="dropdown-item" href="#">Что-то еще здесь</a>
</div>
</li>
</ul>
</div>
</nav>Формы
Размещайте различные элементы управления и компоненты форм на панели навигации с помощью .form-inline.
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Поиск" aria-label="Поиск">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Поиск</button>
</form>
</nav>Непосредственные дочерние элементы .navbar используют гибкий макет и по умолчанию будут justify-content: space-between. При необходимости используйте дополнительные флекс утилиты для настройки этого поведения.
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand">Панель навигации</a>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Поиск" aria-label="Поиск">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Поиск</button>
</form>
</nav>Группы ввода тоже работают:
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Имя пользователя" aria-label="Имя пользователя" aria-describedby="basic-addon1">
</div>
</form>
</nav>В составе этих форм навигационной панели также поддерживаются различные кнопки. Это также отличное напоминание о том, что утилиты вертикального выравнивания можно использовать для выравнивания элементов разного размера.
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<button class="btn btn-outline-success" type="button">Главная кнопка</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Маленькая кнопка</button>
</form>
</nav>Текст
Панели навигации могут содержать фрагменты текста с помощью .navbar-text. Этот класс регулирует вертикальное выравнивание и горизонтальный интервал для строк текста.
<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Текст на панели навигации со встроенным элементом
</span>
</nav>При необходимости смешивайте и сочетайте с другими компонентами и утилитами.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Панель навигации с текстом</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Переключатель навигации">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Главная <span class="sr-only">(текущая)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Функции</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Цены</a>
</li>
</ul>
<span class="navbar-text">
Текст на панели навигации со встроенным элементом
</span>
</div>
</nav>Цветовые схемы
Создание тем для панели навигации никогда не было таким простым благодаря комбинации классов тем и утилит background-color. Выберите .navbar-light для использования со светлыми цветами фона или .navbar-dark для темных цветов фона. Затем выполните настройку с помощью утилит .bg-*.
<nav class="navbar navbar-dark bg-dark">
<!-- Контент навигационной панели -->
</nav>
<nav class="navbar navbar-dark bg-primary">
<!-- Контент навигационной панели -->
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<!-- Контент навигационной панели -->
</nav>
Контейнеры
Хотя это и не обязательно, Вы можете обернуть панель навигации в .container, чтобы центрировать ее на странице. Или Вы можете добавить контейнер внутри .navbar, чтобы центрировать только содержимое фиксированной или статической верхней панели навигации.
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Панель навигации</a>
</nav>
</div>When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified .navbar-expand{-sm|-md|-lg|-xl} class. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Панель навигации</a>
</div>
</nav>Размещение
Используйте наши утилиты позиционирования для размещения панелей навигации в нестатических положениях. Выберите фиксированный вверху, закрепленный внизу или прикрепленный к вершине (прокручивается вместе со страницей, пока не достигнет вершины, а затем остается там). Фиксированные панели навигации используют position: fixed, что означает, что они извлекаются из обычного потока DOM и могут потребовать настраиваемого CSS (например, padding-top на <body>) для предотвращения перекрытия с другими элементами.
Также обратите внимание, что .sticky-top использует position: sticky, который полностью поддерживается не всеми браузерами.
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">По умолчанию</a>
</nav><nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Зафиксирован вверху</a>
</nav><nav class="navbar fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="#">Зафиксирован внизу</a>
</nav><nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Приклеен вверху</a>
</nav>Прокрутка
Добавьте .navbar-nav-scroll к .navbar-collapse (или другому субкомпоненту навигационной панели), чтобы включить вертикальную прокрутку внутри переключаемого содержимого свернутой навигационной панели. По умолчанию прокрутка начинается с 75vh (или 75% высоты области просмотра), но Вы можете переопределить это с помощью встроенных или настраиваемых стилей. В больших окнах просмотра, когда панель навигации развернута, содержимое будет отображаться так же, как и на панели навигации по умолчанию.
Обратите внимание, что такое поведение имеет потенциальный недостаток overflow — при установке overflow-y: auto (требуется для прокрутки содержимого здесь), overflow-x является эквивалентом auto, который обрезает некоторые горизонтальное содержание.
Вот пример навигационной панели, использующей .navbar-nav-scroll с style="max-height: 100px;", с некоторыми дополнительными утилитами полей для оптимального интервала.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Прокрутка навигационной панели</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
<li class="nav-item active">
<a class="nav-link" href="#">Главная <span class="sr-only">(текущая)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ссылка</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Действие</a></li>
<li><a class="dropdown-item" href="#">Другое действие</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Что-то еще здесь</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Ссылка</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control mr-2" type="search" placeholder="Поиск" aria-label="Поиск">
<button class="btn btn-outline-success" type="submit">ИСкать</button>
</form>
</div>
</nav>Отзывчивое поведение
Панели навигации могут использовать классы .navbar-toggler, .navbar-collapse и .navbar-expand{-sm|-md|-lg|-xl}, чтобы определять, когда их содержимое сворачивается за кнопкой. В сочетании с другими утилитами Вы можете легко выбрать, когда показывать или скрывать определенные элементы.
Для панелей навигации, которые никогда не сворачиваются, добавьте на панель навигации класс .navbar-expand. Для панелей навигации, которые всегда сворачиваются, не добавляйте класс .navbar-expand.
Переключатель
Переключатели навигационной панели по умолчанию выровнены по левому краю, но если они следуют за дочерним элементом, таким как .navbar-brand, они будут автоматически выровнены по крайнему правому краю. Изменение разметки на противоположное приведет к изменению положения переключателя. Ниже приведены примеры различных стилей переключения.
Если в наименьшей контрольной точке не отображается .navbar-brand:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Переключатель навигации">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Скрытый бренд</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Главная <span class="sr-only">(текущая)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ссылка</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Отключенный</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Поиск" aria-label="Поиск">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Поиск</button>
</form>
</div>
</nav>С названием бренда слева и переключателем справа:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Панель навигации</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Переключатель навигации">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Главная <span class="sr-only">(текущая)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ссылка</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Отключенный</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Поиск">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Поиск</button>
</form>
</div>
</nav>С переключателем слева и названием бренда справа:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Переключатель навигации">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Панель навигации</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Главная <span class="sr-only">(текущая)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ссылка</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Отключенный</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Поиск" aria-label="Поиск">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Поиск</button>
</form>
</div>
</nav>Внешний контент
Иногда Вы хотите использовать плагин свертывания для запуска элемента контейнера для содержимого, структурно расположенного за пределами .navbar. Поскольку наш плагин работает с сопоставлением id и data-target, это легко сделать!
<div class="fixed-top">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Свернутый контент</h5>
<span class="text-muted">Переключаемый через бренд навигационной панели.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Переключатель навигации">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>При этом мы рекомендуем включить дополнительный JavaScript для программного перемещения фокуса на контейнер при его открытии. В противном случае пользователям клавиатуры и пользователям вспомогательных технологий, вероятно, будет сложно найти вновь обнаруженный контент, особенно если контейнер, который был открыт, находится перед переключателем в структуре документа. Мы также рекомендуем убедиться, что у переключателя есть атрибут aria-controls, указывающий на id контейнера содержимого. Теоретически это позволяет пользователям вспомогательных технологий напрямую переходить от переключателя к контейнеру, который он контролирует, но в настоящее время эта поддержка весьма неоднородна.