in English

Навбар

Документация и примеры для мощного, отзывчивого навигационного заголовка Bootstrap, панели навигации. Включает поддержку брендинга, навигации, плагина сворачивания и многого другого.

Как это работает

Вот что вам нужно знать, прежде чем начать работу с навигационной панелью:

Для навигационных панелей требуется обертка .navbarс классами адаптивного .navbar-expand{-sm|-md|-lg|-xl}свертывания и цветовой схемы .
По умолчанию панели навигации и их содержимое изменчивы. Используйте дополнительные контейнеры , чтобы ограничить их ширину по горизонтали.
Используйте наши служебные классы spacing и 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="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</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="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

Добавление изображений в .navbar-brand, скорее всего, всегда потребует пользовательских стилей или утилит для правильного размера. Вот несколько примеров для демонстрации.

<!-- Just an image -->
<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>

<!-- Image and text -->
<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-links или их непосредственным родительским .nav-items.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

И поскольку мы используем классы для навигации, вы можете полностью отказаться от подхода, основанного на списках, если хотите.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

Вы также можете использовать раскрывающиеся списки на панели навигации. Выпадающие меню требуют элемента-обертки для позиционирования, поэтому обязательно используйте отдельные и вложенные элементы для .nav-itemи .nav-link, как показано ниже.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</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="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Непосредственные дочерние элементы .navbarиспользуют гибкий макет и по умолчанию имеют значение justify-content: space-between. При необходимости используйте дополнительные гибкие утилиты , чтобы настроить это поведение.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</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="Username" aria-label="Username" 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">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Текст

Панели навигации могут содержать фрагменты текста с помощью .navbar-text. Этот класс регулирует вертикальное выравнивание и горизонтальный интервал для строк текста.

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

Смешивайте и сочетайте с другими компонентами и утилитами по мере необходимости.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

Цветовые схемы

Тематическое оформление навигационной панели никогда не было таким простым благодаря сочетанию классов тем и background-colorутилит. Выберите .navbar-lightдля использования со светлыми цветами фона или .navbar-darkдля темных цветов фона. Затем настройте с помощью .bg-*утилит.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Контейнеры

Хотя это и не обязательно, вы можете обернуть панель навигации, .containerчтобы отцентрировать ее на странице. Или вы можете добавить контейнер внутри, .navbarчтобы центрировать только содержимое фиксированной или статической верхней панели навигации .

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

Когда контейнер находится внутри вашей панели навигации, его горизонтальное заполнение удаляется в точках останова ниже указанного вами .navbar-expand{-sm|-md|-lg|-xl}класса. Это гарантирует, что мы не удвоим отступы без необходимости на нижних окнах просмотра, когда ваша панель навигации свернута.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</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="#">Default</a>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</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="#">Navbar scroll</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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</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="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Link</a>
      </li>
    </ul>
    <form class="d-flex">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</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="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

С названием бренда, показанным слева, и переключателем справа:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</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="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</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">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</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="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

При этом мы рекомендуем включить дополнительный JavaScript, чтобы программно переместить фокус на контейнер при его открытии. В противном случае пользователям клавиатуры и пользователям вспомогательных технологий, скорее всего, будет трудно найти недавно обнаруженный контент, особенно если открытый контейнер находится перед переключателем в структуре документа. Мы также рекомендуем убедиться, что у переключателя есть aria-controlsатрибут, указывающий на idсодержимое контейнера. Теоретически это позволяет пользователям вспомогательных технологий переходить непосредственно от переключателя к контейнеру, которым он управляет, но поддержка этого в настоящее время довольно неоднородна.