Bootstrap табы: пошаговая инструкция

Создание вкладок с использованием Bootstrap включает подключение фреймворка, создание списка вкладок, добавление содержимого и управление стилями. Ниже приведена пошаговая инструкция.

Подключение Bootstrap и базовая структура

Перед началом работы убедитесь, что Bootstrap подключен. Для улучшения визуального восприятия добавим отступ сверху страницы:

<div style="margin-top: 20px;"></div>

Создадим контейнер с классом container для организации вкладок:

<div class="container"></div>

Вкладки и их содержимое

Создадим неупорядоченный список (<ul>) с классом nav nav-tabs для вкладок:

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" role="tab" aria-controls="home" aria-selected="true">Домой</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Профиль</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" role="tab" aria-controls="messages" aria-selected="false">Сообщения</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" role="tab" aria-controls="settings" aria-selected="false">Настройки</a>
  </li>
</ul>

Атрибуты role, aria-controls, aria-selected обеспечивают доступность. Класс active на первой ссылке делает её активной по умолчанию.

Далее создадим div с классом tab-content для содержимого вкладок:

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="messages" role="tabpanel" aria-labelledby="messages-tab">Сообщения</div>
  <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">Домой</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Профиль</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">Настройки</div>
</div>

Класс fade обеспечивает плавное появление, а show делает вкладку «Сообщения» видимой по умолчанию. ID элементов (#messages, #home, и т.д.) должны соответствовать значениям атрибута data-bs-target в ссылках.

Стилизация вкладок

Для изменения внешнего вида, замените класс nav-tabs на nav nav-pills:

<ul class="nav nav-pills" role="tablist"> ... </ul>

Это преобразует вкладки в кнопки.

Обработка событий JavaScript

Bootstrap использует JavaScript для управления вкладками. События shown.bs.tab, hide.bs.tab и hidden.bs.tab позволяют отслеживать переключение:

$('.nav-link').on('shown.bs.tab', function (event) {
  console.log('Shown: ' + $(event.target).text() + ', Previous: ' + $(event.relatedTarget).text());
});

Этот код выводит в консоль название текущей и предыдущей активных вкладок.