Введение
Bootstrap, фреймворк CSS с открытым исходным кодом, быстро стал одним из наиболее широко используемых инструментов для веб-разработчиков во всем мире. Его популярность проистекает из его способности предлагать готовые стили, адаптивные функции и удобные для пользователя обширные компоненты. Среди его компонентов меню навигации, также известное как «навигационная панель», играет решающую роль в улучшении пользовательского интерфейса и улучшении взаимодействия с пользователем.
В этом посте мы подробно рассмотрим, как создать адаптивное меню навигации с помощью Bootstrap. Прежде чем мы начнем, убедитесь, что у вас есть базовые знания HTML, CSS и JavaScript, поскольку они составляют основу Bootstrap.
Начиная
Чтобы использовать Bootstrap, нам нужно включить его в наш проект. Вы можете загрузить Bootstrap с официального сайта или напрямую перейти на CDN Bootstrap. Для простоты воспользуемся последним.
В вашем HTML-файле включите следующие строки в раздел <head>:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Создание базового навигационного меню
Во-первых, давайте создадим базовое навигационное меню. Добавим несколько стандартных элементов: бренд/лого и несколько ссылок.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MyWebsite</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
Этот код создаст панель навигации с четырьмя ссылками — «Главная», «О программе», «Услуги» и «Контакты».
Адаптивное меню навигации
Теперь давайте сделаем меню навигации адаптивным. Bootstrap имеет встроенный класс navbar-expand-{breakpoint}, где {breakpoint} может быть «sm», «md», «lg», «xl» или «xxl». Он определяет, в какой момент меню навигации должно свернуться в меню-гамбургер. В нашем примере мы использовали «lg», что означает, что меню будет сворачиваться на экранах меньше, чем «lg» (большой).
На панели навигации по-прежнему отсутствует кнопка меню гамбургера для небольших экранов. Добавьте следующий код внутри тега <nav>, но вне тега <div>:
<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>
Атрибут data-toggle="collapse" и data-target="#navbarNav" определяют, что должно произойти при нажатии кнопки. В этом случае он переключает видимость деления navbarNav.
Полная адаптивная панель навигации должна выглядеть так:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MyWebsite</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 <span class="sr-only">(current)</span></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>
Добавление расширенных функций на панель навигации
Bootstrap позволяет дополнительно настроить меню навигации. Вы можете легко добавлять раскрывающиеся меню, формы или даже текст, что делает меню навигации универсальным компонентом.
Давайте добавим выпадающее меню под нашей ссылкой «Услуги». Вот как это сделать:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Service 1</a>
<a class="dropdown-item" href="#">Service 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Service 3</a>
</div>
</li>
Заключение
Bootstrap с его интуитивно понятным и гибким подходом делает адаптивный веб-дизайн легкой задачей. Навигационное меню, ключевой компонент любого веб-сайта, можно сделать гибким и функциональным с помощью всего нескольких строк кода в Bootstrap. Мы надеемся, что это руководство послужило полезным введением в создание адаптивных навигационных меню с помощью этого мощного инструмента. Независимо от того, создаете ли вы простой веб-сайт или сложное веб-приложение, меню навигации Bootstrap, несомненно, может повысить удобство использования и визуальную привлекательность вашего проекта.
