Bootstrap - Навигации и вкладки

Введение

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

Основная навигация

Давайте начнем с азов. Bootstrap предоставляет простой способ создания навигационных меню с помощью класса .nav. Вот базовый пример:

<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Домой</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">О нас</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Услуги</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Контакт</a>
</li>
</ul>

Этот код создает горизонтальный список навигационных ссылок. Класс active выделяет текущую страницу, а класс disabled делает ссылки неактивными.

Доступные стили

Bootstrap предлагает различные стили для ваших навигаций. Давайте рассмотрим два популярных:

Вкладки навигации

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Домой</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Профиль</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Сообщения</a>
</li>
</ul>

Этот код создает навигационное меню с вкладками, идеально подходящее для организации контента в различные разделы.

Капсулы навигации

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Домой</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Профиль</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Сообщения</a>
</li>
</ul>

Стиль капсул придает навигационным ссылкам более按钮ообразный вид.

Горизонтальное выравнивание

Вы можете легко изменить выравнивание ваших навигационных элементов. Вот как:

<ul class="nav justify-content-center">
<!-- Навигационные элементы здесь -->
</ul>

<ul class="nav justify-content-end">
<!-- Навигационные элементы здесь -->
</ul>

Класс justify-content-center центрирует навигационные элементы, а класс justify-content-end выравнивает их вправо.

Работа с flex-утилитами

Flex-утилиты Bootstrap дают вам еще больше контроля над вашим навигационным макетом:

<nav class="nav flex-column">
<a class="nav-link active" href="#">Актив</a>
<a class="nav-link" href="#">Ссылка</a>
<a class="nav-link" href="#">Ссылка</a>
<a class="nav-link disabled" href="#">Неактивен</a>
</nav>

Этот код создает вертикальное навигационное меню с помощью класса flex-column.

Concerning accessibility

При создании навигаций важно учитывать доступность. Используйте элементы <nav>, где это уместно, и добавьте aria-current="page" к активному элементу:

<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Актив</a>
<!-- Другие навигационные элементы -->
</nav>

Использование выпадающих списков

Навигации могут включать выпадающие меню для более сложных навигационных структур:

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Актив</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Выпадающее меню</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Действие</a></li>
<li><a class="dropdown-item" href="#">Другое действие</a></li>
<li><a class="dropdown-item" href="#">Еще что-то здесь</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Отдельная ссылка</a></li>
</ul>
</li>
<!-- Другие навигационные элементы -->
</ul>

Этот код создает навигацию с выпадающим меню. Атрибут data-bs-toggle="dropdown" активирует функциональность выпадающего меню.

Вкладки с выпадающими списками

Вы также можете включать выпадающие списки в навигации стиля вкладок:

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Актив</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Выпадающее меню</a>
<ul class="dropdown-menu">
<!-- Элементы выпадающего меню -->
</ul>
</li>
<!-- Другие навигационные элементы -->
</ul>

Капсулы с выпадающими списками

Тот же принцип применяется к капсулам навигации:

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Актив</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Выпадающее меню</a>
<ul class="dropdown-menu">
<!-- Элементы выпадающего меню -->
</ul>
</li>
<!-- Другие навигационные элементы -->
</ul>

Поведение JavaScript

Плагины JavaScript Bootstrap могут добавить динамическое поведение вашим навигациям и вкладкам. Вот как создать一套 вкладок с контентными панелями:

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Домой</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Профиль</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Контент дома...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Контент профиля...</div>
</div>

Этот код создает一套 вкладок, которые при нажатии показывают различные контентные панели.

Доступность

Чтобы сделать ваши вкладки доступными, используйте атрибуты role, aria-controls, aria-selected, и aria-labelledby, как показано в предыдущем примере.

Использование атрибутов данных

Атрибуты данных позволяют вам контролировать поведение вкладок без написания JavaScript:

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Домой</button>
</li>
<!-- Другие кнопки вкладок -->
</ul>

Атрибуты data-bs-toggle="tab" и data-bs-target="#home" активируют функциональность вкладок без дополнительного JavaScript.

Через JavaScript

Вы также можете активировать вкладки через JavaScript:

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)

triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})

Этот код attachит click event listeners к каждой кнопке вкладки, активируя соответствующую вкладку при нажатии.

Эффект затухания

Чтобы добавить эффект затухания вашим вкладкам, используйте класс fade:

<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
</div>

Этот код создает плавный переходный эффект при переключении между вкладками.

И вот и все! Вы только что узнали, как создавать и настраивать навигационные меню и вкладки с помощью Bootstrap. Помните, что практика делает perfect, так что try experimenting с этими компонентами в ваших собственных проектах. Счастливого кодирования!

Credits: Image by storyset