Navs (навигация)

Документация и примеры использования встроенных компонентов навигации 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="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>
Результат:

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

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" aria-disabled="true">Disabled</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="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</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="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>
Результат:

Вертикальный

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

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>
Результат:

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

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
Результат:

Вкладки

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

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>
Результат:

Таблетки

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

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>
Результат:

Подчеркивание

Используйте тот же HTML, но .nav-underline вместо:

<ul class="nav nav-underline">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</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="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>
Результат:

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

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" aria-disabled="true">Disabled</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="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>
Результат:

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

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" aria-disabled="true">Disabled</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="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
Результат:

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

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

Обратите внимание, что панели навигации, даже если они визуально оформлены как вкладки с .nav-tabs классом, не должны иметь атрибуты role="tablist", role="tab" или role="tabpanel". Они подходят только для динамических интерфейсов с вкладками, как описано в руководстве по практике разработки ARIA по шаблону вкладок. Смотрите Поведение 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="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>
Результат:

Таблицы с выпадающими списками

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>
Результат:

CSS

Переменные

Добавлено в версии 5.2.0

В рамках развивающегося подхода Bootstrap к CSS-переменным, навигаторы теперь используют локальные CSS-переменные на .nav, .nav-tabs и .nav-pills для расширенной настройки в режиме реального времени. Значения для переменных CSS устанавливаются через Sass, поэтому настройка Sass по-прежнему поддерживается.

О базовом классе .nav:

scss/_nav.scss

--#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
--#{$prefix}nav-link-color: #{$nav-link-color};
--#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
--#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

О .nav-tabs классе-модификаторе:

scss/_nav.scss

--#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
--#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
--#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
--#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
--#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
--#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
--#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

О .nav-pills классе-модификаторе:

scss/_nav.scss

--#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
--#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
--#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Добавлено в версии 5.3.0

О классе-модификаторе .nav-underline:

scss/_nav.scss

--#{$prefix}nav-underline-gap: #{$nav-underline-gap};
--#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
--#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};

Переменные Sass

scss/_variables.scss

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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:           var(--#{$prefix}secondary-color);
$nav-link-focus-box-shadow:         $focus-ring-box-shadow;

$nav-tabs-border-color:             var(--#{$prefix}border-color);
$nav-tabs-border-width:             var(--#{$prefix}border-width);
$nav-tabs-border-radius:            var(--#{$prefix}border-radius);
$nav-tabs-link-hover-border-color:  var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color;
$nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color);
$nav-tabs-link-active-bg:           var(--#{$prefix}body-bg);
$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg;

$nav-pills-border-radius:           var(--#{$prefix}border-radius);
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

$nav-underline-gap:                 1rem;
$nav-underline-border-width:        .125rem;
$nav-underline-link-active-color:   var(--#{$prefix}emphasis-color);

Поведение JavaScript

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

<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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>
Результат:

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

Чтобы соответствовать вашим потребностям, это работает с <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">Home</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">Profile</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">Contact</button>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>
Результат:

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

<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">Home</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">Profile</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">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>
Результат:

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

И с вертикальными таблицами. В идеале, для вертикальных вкладок вам также следует добавить aria-orientation="vertical" в контейнер списка вкладок.

<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">Home</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">Profile</button>
    <button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</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">Messages</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">Settings</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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>
Результат:

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

Специальные возможности

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

В соответствии с шаблоном разработки ARIA, только текущая активная вкладка получает фокус клавиатуры. Когда плагин JavaScript инициализирован, он будет установлен tabindex="-1" для всех неактивных элементов управления вкладками. Как только текущая активная вкладка будет сфокусирована, клавиши управления курсором активируют предыдущую / следующую вкладку. Клавиши Home и End активируют первую и последнюю вкладки соответственно. Плагин соответствующим образом изменит навигацию tabindex. Однако обратите внимание, что плагин JavaScript не различает горизонтальные и вертикальные списки вкладок, когда дело доходит до взаимодействия с клавишами управления курсором: независимо от ориентации списка вкладок, оба курсора вверх и влево переходят на предыдущую вкладку, а вниз и вправо - на следующую вкладку.

В общем, для облегчения навигации с клавиатуры рекомендуется также сделать фокусируемыми сами панели вкладок, если только первый элемент, содержащий значимое содержимое внутри панели вкладок, уже не является фокусируемым. Плагин JavaScript не пытается обрабатывать этот аспект — при необходимости вам нужно явно настроить фокусировку панелей вкладок, добавив tabindex="0" в разметку.
JavaScript-плагин tab не поддерживает интерфейсы с вкладками, содержащие выпадающие меню, поскольку они вызывают проблемы как с удобством использования, так и с доступом. С точки зрения удобства использования тот факт, что элемент запуска текущей вкладки не виден сразу (поскольку он находится внутри закрытого выпадающего меню), может вызвать путаницу. С точки зрения доступности в настоящее время нет разумного способа сопоставить такого рода конструкции со стандартным шаблоном WAI ARIA, а это означает, что его нелегко сделать понятным пользователям вспомогательных технологий.

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

Вы можете активировать навигацию по вкладкам или таблеткам без написания какого-либо 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">Home</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">Profile</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">Messages</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">Settings</button>
  </li>
</ul>

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

С помощью JavaScript

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

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

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

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Методы

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

Активирует ваш контент как элемент вкладки.

Вы можете создать экземпляр вкладки с помощью конструктора, например:

const bsTab = new bootstrap.Tab('#myTab')
Метод Описание
dispose Уничтожает вкладку элемента.
getInstance Статический метод, который позволяет вам получить экземпляр tab, связанный с элементом DOM, вы можете использовать его следующим образом: bootstrap.Tab.getInstance(element).
getOrCreateInstance Статический метод, который возвращает экземпляр вкладки, связанный с элементом DOM, или создает новый экземпляр, если он не был инициализирован. Вы можете использовать его следующим образом: bootstrap.Tab.getOrCreateInstance(element).
show Выбирает данную вкладку и отображает связанную с ней панель. Любая другая вкладка, которая была выбрана ранее, становится невыбранной, а связанная с ней панель скрыта. Возвращается вызывающему устройству до фактического отображения панели вкладок (т.е. до того, как произойдет shown.bs.tab событие).

Мероприятия

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

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

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

Тип события Описание
hide.bs.tab Это событие срабатывает, когда должна быть показана новая вкладка (и, следовательно, предыдущая активная вкладка должна быть скрыта). Используйте event.target и event.relatedTarget для перехода на текущую активную вкладку и новую вкладку, которая вскоре станет активной, соответственно.
hidden.bs.tab Это событие срабатывает после отображения новой вкладки (и, следовательно, предыдущая активная вкладка скрыта). Используйте event.target и event.relatedTarget для перехода на предыдущую активную вкладку и новую активную вкладку соответственно.
show.bs.tab Это событие срабатывает при отображении вкладки, но до отображения новой вкладки. Используйте event.target и event.relatedTarget для перехода на активную вкладку и предыдущую активную вкладку (если таковая имеется) соответственно.
shown.bs.tab Это событие срабатывает при отображении вкладки после отображения вкладки. Используйте event.target и event.relatedTarget для перехода на активную вкладку и предыдущую активную вкладку (если таковая имеется) соответственно. 
const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})

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

  1. Базовая навигация
  2. Доступные стили
    1. Выравнивание по горизонтали
    2. Вертикальный
    3. Вкладки
    4. Таблетки
    5. Подчеркивание
    6. Заполнять и выравнивать
  3. Работа с утилитами flex
  4. Что касается доступности
  5. Использование выпадающих списков
    1. Вкладки с выпадающими списками
    2. Таблицы с выпадающими списками
  6. CSS
    1. Переменные
    2. Переменные Sass
  7. Поведение JavaScript
    1. Специальные возможности
    2. Использование атрибутов данных
    3. С помощью JavaScript
    4. Эффект затухания
    5. Методы
    6. Мероприятия