Табы

Реализовать поведение таба можно через атрибут data-bs-toggle="tab" и data-bs-target (в котором указывается элемент с контентом для текущего таба).

<ul class="nav nav-tabs">
  <li class="nav-item">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button">Основной</button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button">Описание</button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button">Характеристики</button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button"  disabled>Заблокированный</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane">Контент для основного таба</div>
  <div class="tab-pane fade" id="profile-tab-pane">Контент для описания</div>
  <div class="tab-pane fade" id="contact-tab-pane">Контент для характеристик</div>
  <div class="tab-pane fade" id="disabled-tab-pane">Контент для заблокированного таба</div>
</div>

Пример кода:

Доступность для таба (WAI-ARIA)

Bootstrap автоматически добавляет aria-атрибуты для вспомогательных устройств (например даёт скринридерам понять, что данные элементы являются табами).

В примере ниже показан пример aria-атрибутов.

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-selected="true">Основной</button>
  </li>
  <!-- ... -->
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel">Контент для основного таба</div>
  <!-- ... -->
</div>