Для создания открывающегося меню для мобильной версии в Bootstrap, вы можете использовать встроенную функциональность "collapse".
"Navbar" в Bootstrap имеет встроенную поддержку для создания адаптивных меню. Для создания открывающегося меню, вам необходимо использовать следующие элементы и классы:
1. Создайте основную структуру навигационного меню. Это может быть элемент "nav" с классом "navbar" и элементом "button" (обычно иконка гамбургера) для открытия и закрытия меню.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Логотип</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="#">Ссылка 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>
2. В элементе "button" добавьте атрибуты "data-toggle" и "data-target" для указания, что элемент, который будет скрываться/показываться, это "navbar-collapse". Значение "data-target" должно соответствовать идентификатору элемента, где находится ваше меню.
3. Оберните содержимое меню в элемент "div" с классом "collapse navbar-collapse" и установите ему атрибут "id", совпадающий с значением "data-target" у кнопки. Это создаст связь между кнопкой и меню, и позволит им работать вместе.
4. Внутри элемента "navbar-collapse" добавьте элемент "ul" с классом "navbar-nav", а внутри него - элементы "li" с классом "nav-item" для каждого пункта меню, и элемент "a" с классом "nav-link" для ссылок.
После применения этих шагов, когда пользователь открывает веб-страницу на устройстве с маленьким экраном, будет отображаться кнопка гамбургера. При нажатии на кнопку появится выпадающее меню с пунктами навигации.
Вы также можете настроить отображение меню на различных размерах экрана, используя различные классы в "navbar-expand-{breakpoint}". Например, "navbar-expand-lg" означает, что меню будет отображаться только на больших экранах, а на мобильных - будет использоваться открывающееся меню.
Это основная концепция создания открывающегося меню для мобильной версии "navbar" в Bootstrap. Вы можете дополнительно настроить внешний вид и поведение меню, используя дополнительные классы и стили Bootstrap.