Навигация и вкладки

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

На этой странице

Простая навигация

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

Базовый компонент .nav построен на основе flexbox и обеспечивает прочную основу для создания всех типов компонентов навигации. Он включает в себя некоторые переопределения стиля (для работы со списками), некоторые отступы для ссылок для больших областей попадания и базовый отключенный стиль.

Базовый компонент .nav не включает никакого состояния .active. Следующие примеры включают класс, главным образом, чтобы продемонстрировать, что этот конкретный класс не запускает никакого специального стиля.

Чтобы передать активное состояние вспомогательным технологиям, используйте атрибут aria-current - используя значение page для текущей страницы или true для текущего элемента в наборе.

<ul class="nav">
  <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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

Классы используются повсюду, поэтому Ваша разметка может быть очень гибкой. Используйте <ul>, как указано выше, <ol>, если порядок Ваших элементов важен, или сверните свой собственный с элементом <nav>. Поскольку в файле .nav используется display: flex, навигационные ссылки ведут себя так же, как элементы навигации, но без дополнительной разметки.

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Активная</a>
  <a class="nav-link" href="#">Ссылка</a>
  <a class="nav-link" href="#">Ссылка</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
</nav>

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

Измените стиль компонента .nav с помощью модификаторов и утилит. Смешивайте и сочетайте по мере необходимости или создавайте свои собственные.

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

Измените горизонтальное выравнивание Вашей навигации с помощью утилит flexbox. По умолчанию элементы навигации выравниваются по левому краю, но Вы можете легко изменить их на выравнивание по центру или по правому краю.

Выравнивание по центру с помощью .justify-content-center:

<ul class="nav justify-content-center">
  <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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

Выравнивание по правому краю с помощью .justify-content-end:

<ul class="nav justify-content-end">
  <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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

Вертикальное

Сгруппируйте Вашу навигацию, изменив направление гибкого элемента с помощью утилиты .flex-column. Нужно наложить их на одни окна просмотра, но не на другие? Используйте адаптивные версии (например, .flex-sm-column).

<ul class="nav flex-column">
  <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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

Как всегда, вертикальная навигация возможна и без <ul>.

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Активная</a>
  <a class="nav-link" href="#">Ссылка</a>
  <a class="nav-link" href="#">Ссылка</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
</nav>

Вкладки

Берет базовую навигацию сверху и добавляет класс .nav-tabs для создания интерфейса с вкладками. Используйте их для создания областей с вкладками с помощью нашего подключаемого модуля JavaScript.

<ul class="nav nav-tabs">
  <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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

Таблетки

Возьмите тот же HTML, но используйте вместо него .nav-pills:

<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>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

Заполнение и выравнивание

Заставьте содержимое Вашего .nav расширить всю доступную ширину одним из двух классов модификаторов. Чтобы пропорционально заполнить все доступное пространство Вашим .nav-item, используйте .nav-fill. Обратите внимание, что все горизонтальное пространство занято, но не все элементы навигации имеют одинаковую ширину.

<ul class="nav nav-pills nav-fill">
  <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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

При использовании навигации на основе <nav> Вы можете смело опускать .nav-item, поскольку для стилизации элементов <a> требуется только .nav-link.

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Активная</a>
  <a class="nav-link" href="#">На много длиннее ссылка</a>
  <a class="nav-link" href="#">Ссылка</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
</nav>

Для элементов одинаковой ширины используйте .nav-justified. Все горизонтальное пространство будет занято навигационными ссылками, но в отличие от .nav-fill выше, каждый элемент навигации будет одинаковой ширины.

<ul class="nav nav-pills nav-justified">
  <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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

Подобно примеру .nav-fill с использованием навигации на основе <nav>.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Активная</a>
  <a class="nav-link" href="#">На много длиннее ссылка</a>
  <a class="nav-link" href="#">Ссылка</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
</nav>

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

Если Вам нужны адаптивные варианты навигации, рассмотрите возможность использования ряда утилит flexbox. Хотя эти утилиты более подробны, они предлагают более широкие возможности настройки для реагирующих контрольных точек. В приведенном ниже примере наша навигация будет размещена на самой нижней контрольной точке, а затем адаптирована к горизонтальной компоновке, которая заполняет доступную ширину, начиная с небольшой контрольной точки.

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Активная</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Длинная ссылка навигации</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Ссылка</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
</nav>

Что касается доступности

Если Вы используете навигацию для предоставления панели навигации, обязательно добавьте role="navigation" к наиболее логичному родительскому контейнеру <ul>, или оберните элемент <nav> вокруг всего навигация. Не добавляйте роль к самому <ul>, так как это помешает вспомогательным технологиям объявить ее реальным списком.

Обратите внимание, что панели навигации, даже если они визуально стилизованы как вкладки с классом .nav-tabs, не должны иметь значение role="tablist", role="tab" или role="tabpanel" атрибуты. Они подходят только для интерфейсов с динамическими вкладками, как описано в WAI ARIA Authoring Practices. См. поведение JavaScript для динамических интерфейсов с вкладками в этом разделе в качестве примера. Атрибут aria-current не требуется в интерфейсах с динамическими вкладками, поскольку наш JavaScript обрабатывает выбранное состояние, добавляя aria-selected="true" на активной вкладке.

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

Добавьте раскрывающиеся меню с небольшим дополнительным HTML и подключаемый модуль раскрывающегося списка JavaScript.

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

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</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 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>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

Sass

Переменные

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

Поведение JavaScript

Используйте плагин JavaScript вкладок - включите его индивидуально или через скомпилированный файл bootstrap.js - чтобы расширить наши навигационные вкладки и таблетки для создания вкладок локального контента.

Динамические интерфейсы с вкладками, как описано в WAI ARIA Авторские практики, требуется role="tablist", role="tab", role="tabpanel" и дополнительные атрибуты aria- по порядку для передачи их структуры, функций и текущего состояния пользователям вспомогательных технологий (например, программ чтения с экрана). Мы рекомендуем использовать элементы <button> для вкладок, поскольку это элементы управления, которые запускают динамическое изменение, а не ссылки, которые переходят на новую страницу или место.

Обратите внимание, что динамические интерфейсы с вкладками не должны содержать раскрывающиеся меню, поскольку это вызывает проблемы как с удобством использования, так и с доступностью. С точки зрения удобства использования тот факт, что элемент триггера отображаемой в данный момент вкладки не виден сразу (поскольку он находится внутри закрытого раскрывающегося меню), может вызвать путаницу. С точки зрения доступности в настоящее время не существует разумного способа сопоставить этот вид конструкции со стандартным шаблоном WAI ARIA, а это означает, что ее нельзя легко сделать понятной для пользователей вспомогательных технологий.

Это некоторый заполнитель содержимого, связанного с содержимым вкладки "Главная страница". При нажатии на другую вкладку эта вкладка переключается на видимость следующей. Вкладка JavaScript меняет местами классы для управления видимостью и стилем содержимого. Вы можете использовать его с вкладками, таблетками и любой другой навигацией с поддержкой .nav.

Это некий заполнитель содержимого, связанного с содержимым вкладки "Профиль". При нажатии на другую вкладку эта вкладка переключается на видимость следующей. Вкладка JavaScript меняет местами классы для управления видимостью и стилем содержимого. Вы можете использовать его с вкладками, таблетками и любой другой навигацией с поддержкой .nav.

Это некий заполнитель содержимого, связанного с содержимым вкладки "Контакт". При нажатии на другую вкладку эта вкладка переключается на видимость следующей. Вкладка JavaScript меняет местами классы для управления видимостью и стилем содержимого. Вы можете использовать его с вкладками, таблетками и любой другой навигацией с поддержкой .nav.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" 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 class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Чтобы помочь Вам удовлетворить Ваши потребности, это работает с разметкой на основе <ul>, как показано выше, или с любой произвольной разметкой “сверните свою”. Обратите внимание, что если Вы используете <nav>, Вам не следует добавлять role="tablist" непосредственно к нему, так как это переопределит собственную роль элемента как ориентира навигации. Вместо этого переключитесь на альтернативный элемент (в примере ниже простой <div>) и оберните его в <nav>.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Главная</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Профиль</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Контакт</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Плагин вкладок также работает с таблетками.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Главная</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Профиль</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Контакт</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

И с вертикальными таблетками.

Это некий заполнитель содержимого, связанного с вкладкой «Сообщения». При нажатии на другую вкладку эта вкладка переключается на видимость следующей. Вкладка JavaScript меняет местами классы для управления видимостью и стилем содержимого. Вы можете использовать его с вкладками, таблетками и любой другой навигацией с поддержкой .nav.

Это некоторый заполнитель содержимого, связанного с содержимым вкладки «Настройки». При нажатии на другую вкладку эта вкладка переключается на видимость следующей. Вкладка JavaScript меняет местами классы для управления видимостью и стилем содержимого. Вы можете использовать его с вкладками, таблетками и любой другой навигацией с поддержкой .nav.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Главная</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Профиль</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Сообщения</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Настройки</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>
</div>

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

Вы можете активировать навигацию по вкладкам или таблеткам без написания кода JavaScript, просто указав для элемента data-bs-toggle="tab" или data-bs-toggle="pill". Используйте эти атрибуты данных в .nav-tabs или .nav-pills.

<!-- Nav tabs -->
<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Сообщения</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Настройки</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Через JavaScript

Включите вкладки с вкладками через JavaScript (каждую вкладку нужно активировать отдельно):

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

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

Вы можете активировать отдельные вкладки несколькими способами:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

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

Чтобы вкладки постепенно появлялись, добавьте .fade к каждому .tab-pane. На первой панели вкладок также должен быть .show, чтобы исходное содержимое было видимым.

<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 class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются к вызывающей стороне, как только переход начинается, но до его завершения. Кроме того, вызов метода переходного компонента будет проигнорирован.

Дополнительную информацию см. в нашей документации по JavaScript.

constructor

Активирует элемент вкладки и контейнер содержимого. Вкладка должна иметь либо data-bs-target, либо, если используется ссылка, атрибут href нацеленный на узел контейнера в DOM.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Сообщения</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Настройки</button>
  </li>
</ul>

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

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

show

Выбирает данную вкладку и показывает связанную с ней панель. Любая другая вкладка, которая была выбрана ранее, становится невыделенной, а связанная с ней панель скрывается. Возврат к вызывающему абоненту до того, как панель вкладок будет отображена (то есть до того, как произойдет событие shown.bs.tab).

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

dispose

Уничтожает вкладку элемента.

getInstance

Статический метод, позволяющий получить экземпляр вкладки, связанный с элементом DOM.

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Статический метод, который позволяет вам получить экземпляр вкладки, связанный с элементом DOM, или создать новый, если он не был инициализирован.

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

События

При отображении новой вкладки события запускаются в следующем порядке:

hide.bs.tab (на текущей активной вкладке)
show.bs.tab (на вкладке для показа)
hidden.bs.tab (на предыдущей активной вкладке такая же, как для события hide.bs.tab)
shown.bs.tab (на только что активированной вкладке, такой же, как для события show.bs.tab)

Если ни одна вкладка еще не была активной, то события hide.bs.tab и hidden.bs.tab не запускаются.

Тип события	Описание
`show.bs.tab`	Это событие запускается при отображении вкладки, но до отображения новой вкладки. Используйте `event.target` и `event.relatedTarget` для таргетинга на активную вкладку и предыдущую активную вкладку (если есть) соответственно.
`shown.bs.tab`	Это событие запускается при отображении вкладки после отображения вкладки. Используйте `event.target` и `event.relatedTarget` для таргетинга на активную вкладку и предыдущую активную вкладку (если есть) соответственно.
`hide.bs.tab`	Это событие возникает, когда должна быть показана новая вкладка (и, следовательно, предыдущая активная вкладка должна быть скрыта). Используйте `event.target` и `event.relatedTarget` для таргетинга на текущую активную вкладку и новую вкладку, которая скоро станет активной, соответственно.
`hidden.bs.tab`	Это событие запускается после отображения новой вкладки (и, таким образом, предыдущая активная вкладка скрыта). Используйте `event.target` и `event.relatedTarget` для таргетинга на предыдущую активную вкладку и новую активную вкладку соответственно.

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // недавно активированная вкладка
  event.relatedTarget // предыдущая активная вкладка
})