Bootstrap предоставляет множество готовых компонентов для создания стильного интерфейса веб-приложения. Один из таких компонентов - навигация (Navs). Навигация в Bootstrap может быть организована в виде панели с вкладками или панели со ссылками. В этом ответе мы рассмотрим, как использовать эти компоненты в своих проектах.
Для начала вам необходимо подключить стили и скрипты Bootstrap к вашему проекту. Вы можете сделать это, загрузив их с официального сайта Bootstrap или используя CDN (Content Delivery Network). Добавьте следующие строки кода в раздел<head>вашей HTML-страницы:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
### Навигация с вкладками
Навигация с вкладками в Bootstrap использует классыnavиnav-tabsдля создания структуры навигационного меню и классыnav-itemиnav-linkдля создания вкладок.
<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>
Добавьте классactiveк первой вкладке (nav-link), чтобы сделать ее активной по умолчанию. Вы также можете добавить идентификаторы к элементам<a>для ссылок на содержимое вкладок.
Теперь вам нужно создать контейнеры (<div>) для содержимого каждой вкладки:
<div class="tab-content">
<div class="tab-pane active" id="home">
<h4>Главная</h4>
<p>Содержимое вкладки Главная</p>
</div>
<div class="tab-pane" id="profile">
<h4>Профиль</h4>
<p>Содержимое вкладки Профиль</p>
</div>
<div class="tab-pane" id="messages">
<h4>Сообщения</h4>
<p>Содержимое вкладки Сообщения</p>
</div>
</div>
Добавьте классactiveк первому контейнеру (tab-pane), чтобы показать его содержимое по умолчанию.
Наконец, вам нужно добавить небольшой JavaScript-код для обработки переключения между вкладками:
<script>
$(document).ready(function() {
$(".nav-link").click(function(){
var target = $(this).attr("href");
$(".tab-pane").removeClass("active");
$(target).addClass("active");
});
});
</script>
Этот код при помощи функцииclick()обрабатывает нажатие на вкладку (nav-link) и переключает классactiveс текущего контейнераtab-paneна контейнер, связанный с выбранной вкладкой.
Теперь вы можете обновить страницу и увидеть навигацию с вкладками в действии. Выбирая вкладки, вы будете видеть соответствующее содержимое.
### Навигация с ссылками
Если вам нужна простая навигация с ссылками, то Bootstrap также предоставляет соответствующие компоненты. Для создания навигации с ссылками используйте классыnavиnav-pills:
<ul class="nav nav-pills">
<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>
Код очень похож на код для навигации с вкладками, но на этот раз мы используем классnav-pillsи не используем классnav-tabs.
Создайте контейнеры (<div>) для каждого элемента навигации, как и в предыдущем примере с вкладками:
<div class="tab-content">
<div class="tab-pane active" id="home">
<h4>Главная</h4>
<p>Содержимое для Главной</p>
</div>
<div class="tab-pane" id="profile">
<h4>Профиль</h4>
<p>Содержимое для Профиля</p>
</div>
<div class="tab-pane" id="messages">
<h4>Сообщения</h4>
<p>Содержимое для Сообщений</p>
</div>
</div>
Наконец, вы можете использовать тот же JavaScript-код, который мы использовали ранее, чтобы обеспечить переключение между ссылками.
Теперь вы знаете, как использовать компоненты навигации (Navs) в Bootstrap. Вы можете настроить и стилизовать их в соответствии с вашими потребностями, используя дополнительные классы Bootstrap, такие какnav-fill,nav-justified,nav-pillsи другие.