Для создания меню с использованием Bootstrap, вы можете использовать компонент Navbar. Navbar представляет собой гибкий компонент, который позволяет создавать выдвижное меню, фиксированные или статические верхние панели навигации.
Для начала, добавьте ссылку на файлы Bootstrap CSS и JavaScript на страницу:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Затем можно создать Navbar с помощью следующей структуры HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
</div>
</nav>
В приведенном коде создается навигационная панель в виде Navbar. У вас есть контейнер с классом "container-fluid", который создает полноэкранное меню. Внутри контейнера у вас есть разделы navbar-header и navbar-collapse.
Navbar-header содержит кнопку развернутого меню, которая появляется при уменьшении экрана. При нажатии на эту кнопку будет активирована функция сворачивания и разворачивания меню, указанная в атрибуте data-target.
Внутри navbar-header также располагается логотип или название вашего сайта. Здесь вы можете заменить "Logo" на ваш текст или логотип.
Navbar-collapse - это контейнер, который содержит список элементов навигации. Здесь вы можете указать ссылки на разные страницы или разделы вашего сайта. Установите класс "active" для текущей страницы, чтобы подсветить активный пункт меню.
После размещения HTML-кода на вашей странице и добавления соответствующих ссылок на Bootstrap CSS и JavaScript, ваше меню должно правильно отображаться и функционировать.
Если вы хотите настроить более сложное меню, Bootstrap также предоставляет множество дополнительных функций и настроек. Вы можете изучить документацию Bootstrap для получения более подробной информации и примеров использования.