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

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

Навигационная панель находится в верхнем колонтитуле страницы:

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

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

Используйте Используя Bootstrap, навигационная панель может расширяться или складываться в зависимости от размера экрана. .navbarКласс создает стандартную навигационную панель, затем является классом для адаптивного складывания:.navbar-expand-xxl|xl|lg|md|sm

（на超大、超大、 grandes, moyens et petits appareils水平排列，或小屏幕上垂直堆叠导航栏）。 Чтобы добавить ссылку в навигационную панель, используйте class="navbar-nav" <ul> Элемент (или <div>）。Затем добавьте с .nav-item Класс <li> Элемент, за которым следует .nav-link Класс <a> Элемент:

Пример

<!-- Серый горизонтальный навигационный блок на больших экранах становится вертикальным -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <!-- Ссылки -->
    <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>

Попробуйте сами

Вертикальную навигационную панель

Удалить .navbar-expand-* Класс может создать постоянно вертикальную навигационную панель:

Пример

<!-- Серый вертикальный навигационный блок -->
<nav class="navbar bg-light">
  ...
</nav>

Попробуйте сами

Центрированную навигационную панель

Добавить .justify-content-center Класс может выровнять навигационную панель по центру:

Пример

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

Попробуйте сами

Цветной навигационной панели

Используйте любой .bg-color Класс для изменения цвета фона навигационной панели:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Совет:Используйте .navbar-dark Класс добавляет белый цвет текста для всех ссылок в навигационной панели, или использовать .navbar-light Добавить черный цвет текста.

Пример

<!-- Серый фон, белый текст -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        活动
      </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 active" href="#">Активно</a>
      </li>
    </ul>
  </div>
</nav>
<a class="nav-link disabled" href="#">Отключено</a>
<!-- Чёрный фон, белый текст -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Синий фон, белый текст -->

Попробуйте сами

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>активный/отключенный статус: .active класс к <a> элемент может подчеркивать текущую ссылку, или добавить .disabled класс для указания на то, что ссылка неактивна.

Бренд / Логотип

.navbar-brand класс для подчеркивания бренда/логотипа/названия проекта на странице:

Пример

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

Попробуйте сами

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

Пример

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Аватар Логотип" style="width:40px;" class="rounded-pill"> 
    </a>
  </div>
</nav>

Попробуйте сами

Текст навигационной панели

Используйте .navbar-text Класс вертикально выравнивает любые элементы, не являющиеся ссылками, в навигационной панели (обеспечьте правильный отступ и цвет текста).

Пример

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">Текст навигационной панели</span>
  </div>
</nav>

Попробуйте сами

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

Чтобы создать складывающуюся навигационную панель, пожалуйста, используйте уже установленные class="navbar-toggler"、data-bs-toggle="collapse" и data-bs-target="#thetarget" внутри class="collapse navbar-collapse" в элементе <div>, за которым следует data-bs-target соответствующий id："thetarget"。

Пример

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <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" href="#">Ссылка</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Попробуйте сами

Совет:Вы также можете удалить .navbar-expand-md Классы всегда скрывают ссылки навигационной панели и показывают кнопку переключения.

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

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

Пример

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Выпадающее меню</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Ссылка</a></li>
    <li><a class="dropdown-item" href="#">Ещё ссылка</a></li>
    <li><a class="dropdown-item" href="#">Третий ссылка</a></li>
  </ul>
</li>

Попробуйте сами

Меню и кнопки навигационной панели

Вы можете также включить форму в навигационной панели:

Пример

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Ссылка</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Ссылка</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Ссылка</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Search">
        <button class="btn btn-primary" type="button">Search</button>
      </form>
    </div>
  </div>
</nav>

Попробуйте сами

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

Навигационная панель также может быть фиксирована в верхней или нижней части страницы.

Фиксированная навигационная панель будет видна на фиксированном положении (вверху или внизу) независимо от прокрутки страницы.

.fixed-top Этот класс делает навигационную панель фиксированной на странице.Верх:

Пример

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

Попробуйте сами

Используйте класс .fixed-bottom, чтобы навигационная панель оставалась в нижней части страницы:

Пример

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

Попробуйте сами

Используйте .sticky-top Этот класс делает навигационную панель фиксированной/прикрепленной к странице, когда она прокручивается.Верх.

Примечание:Этот тип не работает в IE11 и более ранних версиях (его можно рассматривать как position:relative)

Пример

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>

Попробуйте сами