Bootstrap – это популярная интерфейсная платформа, упрощающая процесс создания адаптивных веб-сайтов. Одной из его ключевых особенностей является возможность быстро и легко создавать навигационные меню. В этой статье мы рассмотрим различные методы создания навигационных меню Bootstrap, а также примеры кода. Независимо от того, являетесь ли вы новичком или опытным веб-разработчиком, это руководство предоставит вам ряд вариантов, соответствующих вашим потребностям.

Метод 1: базовый компонент Navbar
Самый простой способ создать навигационное меню Bootstrap — использовать встроенный компонент Navbar. Этот метод требует минимальной настройки и идеально подходит для простых меню.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</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</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Метод 2: раскрывающиеся меню
Если вам нужно включить подменю или раскрывающиеся списки в меню навигации, Bootstrap предоставляет простой способ добиться этого.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</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</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Services
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Service 1</a>
          <a class="dropdown-item" href="#">Service 2</a>
          <a class="dropdown-item" href="#">Service 3</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Метод 3: использование компонента Bootstrap Navs
Компонент Navs в Bootstrap позволяет создавать навигационные меню с вкладками.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
</ul>

Метод 4: Боковое меню навигации
Если вы хотите создать боковое меню навигации, Bootstrap предоставляет удобный способ добиться этого.

<div class="d-flex" id="wrapper">
  <div class="bg-light border-right" id="sidebar-wrapper">
    <div class="sidebar-heading">Website</div>
    <div class="list-group list-group-flush">
      <a href="#" class="list-group-item list-group-item-action bg-light">Home</a>
      <a href="#" class="list-group-item list-group-item-action bg-light">About</a>
      <a href="#" class="list-group-item list-group-item-action bg-light">Services</a>
      <a href="#" class="list-group-item list-group-item-action bg-light">Contact</a>
    </div>
  </div>
  <div id="page-content-wrapper">
    <!-- Content goes here -->
  </div>
</div>

Не забудьте настроить фрагменты кода в соответствии со своими потребностями, например добавить собственные ссылки и стиль. Обширная документация Bootstrap — ценный ресурс для дальнейшего изучения и настройки навигационных меню.