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

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

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

Основы

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

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

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

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

<ulclass="nav"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Active</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul>

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

<navclass="nav"><aclass="nav-link active"aria-current="page"href="#">Active</a><aclass="nav-link"href="#">Link</a><aclass="nav-link"href="#">Link</a><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></nav>

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

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

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

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

Центрировано классом .justify-content-center:

<ulclass="nav justify-content-center"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Active</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul>

По правому краю классом .justify-content-end:

<ulclass="nav justify-content-end"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Active</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul>

Вертикально

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

<ulclass="nav flex-column"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Active</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul>

Как всегда – вертикальная навигация доступна и без <ul>.

<navclass="nav flex-column"><aclass="nav-link active"aria-current="page"href="#">Active</a><aclass="nav-link"href="#">Link</a><aclass="nav-link"href="#">Link</a><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></nav>

Вкладки (Tabs)

«Забирает» базовый элемент навигации с верха и добавляет класс .nav-tabs для создания «вкладочного» интерфейса, Используйте их для создания зоны с поддержкой содержимого в виде вкладок с плагином JavaScript.

<ulclass="nav nav-tabs"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Active</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul>

Подушки (Pills)

На том же коде HTML, но с используйте класс .nav-pills:

<ulclass="nav nav-pills"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Active</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul>

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

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

<ulclass="nav nav-pills nav-fill"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Active</a></li><liclass="nav-item"><aclass="nav-link"href="#">Much longer nav link</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul>

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

<navclass="nav nav-pills nav-fill"><aclass="nav-link active"aria-current="page"href="#">Active</a><aclass="nav-link"href="#">Much longer nav link</a><aclass="nav-link"href="#">Link</a><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></nav>

Используя навигацию на основе <nav>, удостоверьтесь, что включаете .nav-item в ссылки.

<ulclass="nav nav-pills nav-justified"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Active</a></li><liclass="nav-item"><aclass="nav-link"href="#">Much longer nav link</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul>

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

<navclass="nav nav-pills nav-justified"><aclass="nav-link active"aria-current="page"href="#">Active</a><aclass="nav-link"href="#">Much longer nav link</a><aclass="nav-link"href="#">Link</a><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></nav>

Работа с гибкими классами

Если вам нужна «отзывчивая» навигационная панель, рассмотрите использование классов флексбокса. Более подробные в спецификации, они предлагают более широкую настройку по отзывчивым брейкпойнтам. В примере ниже наша навигационная панель будет расположена по вертикали на самом маленьком брейкпойнте, затем обретет горизонтальную разметку, которая, начиная с большего брейкпойнта, займет всю доступную ширину.

<navclass="nav nav-pills flex-column flex-sm-row"><aclass="flex-sm-fill text-sm-center nav-link active"aria-current="page"href="#">Active</a><aclass="flex-sm-fill text-sm-center nav-link"href="#">Longer nav link</a><aclass="flex-sm-fill text-sm-center nav-link"href="#">Link</a><aclass="flex-sm-fill text-sm-center nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></nav>

Доступность

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

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

Выпадающие элементы

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

Вкладки с выпадающими элементами

<ulclass="nav nav-tabs"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Active</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"data-bs-toggle="dropdown"href="#"role="button"aria-expanded="false">Dropdown</a><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Separated link</a></li></ul></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul>

Подушки с выпадающими элементами

<ulclass="nav nav-pills"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Active</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"data-bs-toggle="dropdown"href="#"role="button"aria-expanded="false">Dropdown</a><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Separated link</a></li></ul></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</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.15sease-in-out,background-color.15sease-in-out,border-color.15sease-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 - для расширения наших навигационных вкладок и «подушек» и создания вкладочных панелей локального содержимого, или даже выпадающие меню.

Интерфейсы динамически переключаемых вкладок, как описано в WAIARIA Authoring Practices, требуют атрибутов role="tablist", role="tab", role="tabpanel" и дополнительного атрибута aria- для возможности передачи их структуры, функциональности и текущего состояния юзерам вспомогательных технологий (таких как экранные читалки).

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

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

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

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

<ulclass="nav nav-tabs"id="myTab"role="tablist"><liclass="nav-item"role="presentation"><buttonclass="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><liclass="nav-item"role="presentation"><buttonclass="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><liclass="nav-item"role="presentation"><buttonclass="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><divclass="tab-content"id="myTabContent"><divclass="tab-pane fade show active"id="home"role="tabpanel"aria-labelledby="home-tab">...</div><divclass="tab-pane fade"id="profile"role="tabpanel"aria-labelledby="profile-tab">...</div><divclass="tab-pane fade"id="contact"role="tabpanel"aria-labelledby="contact-tab">...</div></div>

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

<nav><divclass="nav nav-tabs"id="nav-tab"role="tablist"><buttonclass="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><buttonclass="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><buttonclass="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><divclass="tab-content"id="nav-tabContent"><divclass="tab-pane fade show active"id="nav-home"role="tabpanel"aria-labelledby="nav-home-tab">...</div><divclass="tab-pane fade"id="nav-profile"role="tabpanel"aria-labelledby="nav-profile-tab">...</div><divclass="tab-pane fade"id="nav-contact"role="tabpanel"aria-labelledby="nav-contact-tab">...</div></div>

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

<ulclass="nav nav-pills mb-3"id="pills-tab"role="tablist"><liclass="nav-item"role="presentation"><buttonclass="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><liclass="nav-item"role="presentation"><buttonclass="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><liclass="nav-item"role="presentation"><buttonclass="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><divclass="tab-content"id="pills-tabContent"><divclass="tab-pane fade show active"id="pills-home"role="tabpanel"aria-labelledby="pills-home-tab">...</div><divclass="tab-pane fade"id="pills-profile"role="tabpanel"aria-labelledby="pills-profile-tab">...</div><divclass="tab-pane fade"id="pills-contact"role="tabpanel"aria-labelledby="pills-contact-tab">...</div></div>

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

This is some placeholder content the Messages tab's associated content. Щелчок по другой вкладке переключает видимость этой на следующую. Вкладка JavaScript меняет местами классы для управления видимостью и стилем содержимого. Вы можете использовать его с вкладками, таблетками и любой другой навигацией с поддержкой .nav.

This is some placeholder content the Settings tab's associated content. Щелчок по другой вкладке переключает видимость этой на следующую. Вкладка JavaScript меняет местами классы для управления видимостью и стилем содержимого. Вы можете использовать его с вкладками, таблетками и любой другой навигацией с поддержкой .nav.

<divclass="d-flex align-items-start"><divclass="nav flex-column nav-pills me-3"id="v-pills-tab"role="tablist"aria-orientation="vertical"><buttonclass="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><buttonclass="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><buttonclass="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><buttonclass="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><divclass="tab-content"id="v-pills-tabContent"><divclass="tab-pane fade show active"id="v-pills-home"role="tabpanel"aria-labelledby="v-pills-home-tab">...</div><divclass="tab-pane fade"id="v-pills-profile"role="tabpanel"aria-labelledby="v-pills-profile-tab">...</div><divclass="tab-pane fade"id="v-pills-messages"role="tabpanel"aria-labelledby="v-pills-messages-tab">...</div><divclass="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 --><ulclass="nav nav-tabs"id="myTab"role="tablist"><liclass="nav-item"role="presentation"><buttonclass="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><liclass="nav-item"role="presentation"><buttonclass="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><liclass="nav-item"role="presentation"><buttonclass="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><liclass="nav-item"role="presentation"><buttonclass="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 --><divclass="tab-content"><divclass="tab-pane active"id="home"role="tabpanel"aria-labelledby="home-tab">...</div><divclass="tab-pane"id="profile"role="tabpanel"aria-labelledby="profile-tab">...</div><divclass="tab-pane"id="messages"role="tabpanel"aria-labelledby="messages-tab">...</div><divclass="tab-pane"id="settings"role="tabpanel"aria-labelledby="settings-tab">...</div></div>

Через JavaScript

Задействуйте переключаемые вкладки через JavaScript (каждая вкладка задействуется индивидуально):

vartriggerTabList=[].slice.call(document.querySelectorAll('#myTab button'))triggerTabList.forEach(function(triggerEl){vartabTrigger=newbootstrap.Tab(triggerEl)triggerEl.addEventListener('click',function(event){event.preventDefault()tabTrigger.show()})})

Их можно активировать несколькими методами:

vartriggerEl=document.querySelector('#myTab button[data-bs-target="#profile"]')bootstrap.Tab.getInstance(triggerEl).show()// Select tab by name
vartriggerFirstTabEl=document.querySelector('#myTab li:first-child button')bootstrap.Tab.getInstance(triggerFirstTabEl).show()// Select first tab

Fade effect

To make tabs fade in, add .fade to each .tab-pane. The first tab pane must also have .show to make the initial content visible.

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

Эффект появления

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

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

Методы

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

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

Смотрите документацию.

constructor

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

<ulclass="nav nav-tabs"id="myTab"role="tablist"><liclass="nav-item"role="presentation"><buttonclass="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><liclass="nav-item"role="presentation"><buttonclass="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><liclass="nav-item"role="presentation"><buttonclass="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><liclass="nav-item"role="presentation"><buttonclass="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><divclass="tab-content"><divclass="tab-pane active"id="home"role="tabpanel"aria-labelledby="home-tab">...</div><divclass="tab-pane"id="profile"role="tabpanel"aria-labelledby="profile-tab">...</div><divclass="tab-pane"id="messages"role="tabpanel"aria-labelledby="messages-tab">...</div><divclass="tab-pane"id="settings"role="tabpanel"aria-labelledby="settings-tab">...</div></div><script>varfirstTabEl=document.querySelector('#myTab li:last-child a')varfirstTab=newbootstrap.Tab(firstTabEl)firstTab.show()</script>

show

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

varsomeTabTriggerEl=document.querySelector('#someTabTrigger')vartab=newbootstrap.Tab(someTabTriggerEl)tab.show()

dispose

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

getInstance

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

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

getOrCreateInstance

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

vartriggerEl=document.querySelector('#trigger')vartab=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` для «нацеливания» на предыдущую активную вкладку и новую активную вкладку соответственно.

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