Создание статической навигационной панели с помощью Bootstrap 5

Bootstrap — это мощный инструмент для создания адаптивных веб-сайтов, и навигационная панель (navbar) является одним из ключевых компонентов. В этой статье мы рассмотрим, как создать статическую навигационную панель с использованием Bootstrap 5.

Что такое статическая навигационная панель?

Статическая навигационная панель остается на своем месте, даже если пользователь прокручивает страницу. Она полезна для сайтов, где меню должно всегда быть видимым, независимо от положения пользователя на странице.

Создание статической навигационной панели

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

<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Top navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav me-auto mb-2 mb-md-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Главная</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Ссылка</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Отключено</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Поиск" aria-label="Поиск">
        <button class="btn btn-outline-success" type="submit">Искать</button>
      </form>
    </div>
  </div>
</nav>

Посмотреть демо

Разбор примера

<nav> — обертка для навигационной панели.
.navbar-expand-lg — класс, который делает навигационную панель расширяемой на больших экранах.
.navbar-light bg-light — классы для стилизации навигационной панели.
.navbar-brand — ссылка на логотип или название сайта.
.navbar-toggler — кнопка для открытия/закрытия меню на мобильных устройствах.
.navbar-nav — список элементов меню.
.nav-item — отдельный элемент меню.

Заключение

Теперь вы знаете, как создать статическую навигационную панель с помощью Bootstrap 5. Используйте этот компонент для удобной навигации по вашему сайту!

На этой странице