Вкладки и таблетки
Вкладки (tabs) показывают несколько панелей в одном месте: видна одна, остальные ждут щелчка по своему ярлыку. В админ-панели так делят настройки на «Профиль», «Команда» и «Оплата». Таблетки (pills) — те же вкладки, но ярлыки выглядят как закруглённые кнопки.
Навигация без переключения
Сначала — просто ряд ссылок. Класс nav на списке и nav-link на ссылках, а nav-tabs или nav-pills задают вид:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<ul class="nav nav-tabs mb-3">
<li class="nav-item"><a class="nav-link active" aria-current="page" 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" aria-current="page" href="#">День</a></li>
<li class="nav-item"><a class="nav-link" href="#">Неделя</a></li>
</ul>Сверху — ярлыки-вкладки с линией внизу, ниже — таблетки, где активная залита синим. Это просто ссылки: каждая может вести на свою страницу. Класс nav-fill растягивает пункты на всю ширину, flex-column ставит их в столбец.
Переключаемые панели
Чтобы вкладки переключали содержимое на месте, ярлыки делают кнопками с data-bs-toggle="tab" и data-bs-target, а панели кладут в tab-content:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-pane"
type="button" role="tab" aria-controls="profile-pane" aria-selected="true">Профиль</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="billing-tab" data-bs-toggle="tab" data-bs-target="#billing-pane"
type="button" role="tab" aria-controls="billing-pane" aria-selected="false">Оплата</button>
</li>
</ul>
<div class="tab-content border border-top-0 p-3">
<div class="tab-pane fade show active" id="profile-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
Имя: Анна Смирнова, email: anna@example.com
</div>
<div class="tab-pane fade" id="billing-pane" role="tabpanel" aria-labelledby="billing-tab" tabindex="0">
Тариф «Командный», следующий платёж $90 — 1 ноября.
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>Открыта вкладка «Профиль». Щёлкните «Оплата» — текст плавно сменится, а ярлык станет активным. Страница при этом не перезагружается.
Что для чего
| Атрибут или класс | Роль |
|---|---|
data-bs-toggle="tab" или "pill" | Кнопка переключает панель |
data-bs-target | id панели, которую показать |
tab-pane fade | Панель с плавным появлением |
show active | Панель, видимая при загрузке |
role, aria-* | Описание вкладок для программ чтения с экрана |
Для таблеток всё то же самое, только nav-pills на списке и data-bs-toggle="pill" на кнопках.
Частая ошибка
Отметить активным ярлык, но забыть show active у его панели — или наоборот. При загрузке Bootstrap ничего не сверяет: выделена одна вкладка, а под ней пусто или видна чужая панель. Активный ярлык и его панель всегда помечайте парой.