Как сделать адаптивное меню bootstrap?

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

Для начала, вам потребуется включить необходимые файлы Bootstrap в ваш проект. Это можно сделать подключением соответствующих стилей и скриптов Bootstrap на вашей веб-странице.

После подключения файла стилей Bootstrap, вы можете создать основную структуру вашего меню. Это может быть обычный навигационный элемент <nav> с классом navbar, разделенный на блоки <div> или <ul> для каждого пункта меню.

<nav class="navbar">
  <div class="container">
    <ul class="nav">
      <li class="nav-item">
        <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>

Затем, для создания адаптивного поведения меню, вы можете использовать класс navbar-expand-* внутри элемента <nav>. Этот класс позволяет меню расширяться в зависимости от ширины экрана. Звездочка в классе navbar-expand-* означает, что вы можете выбрать один из вариантов, таких как sm (маленькие экраны), md (средние экраны), lg (большие экраны) или xl (очень большие экраны).

<nav class="navbar navbar-expand-sm">
  <div class="container">
    <ul class="nav">
      ...
    </ul>
  </div>
</nav>

Когда ширина экрана становится достаточно маленькой, чтобы меню не поместилось на экране, оно будет складываться в кнопку-гамбургер. Для этого используется класс navbar-toggler. Вы можете добавить этот класс к кнопке, чтобы создать переключатель меню.

<nav class="navbar navbar-expand-sm">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="nav">
        ...
      </ul>
    </div>
  </div>
</nav>

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