ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

Bootstrap 4 Tutorial

BS4 HOME BS4 Get Started BS4 Grid Basic BS4 Typography BS4 Colors BS4 Tables BS4 Images BS4 Jumbotron BS4 Alerts BS4 Buttons BS4 Button Groups BS4 Badges BS4 Progress Bars BS4 Pagination BS4 List Groups BS4 Cards BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbar BS4 Forms BS4 Inputs BS4 Carousel BS4 Modal BS4 Tooltip BS4 Popover BS4 Scrollspy BS4 Utilities BS4 Flex BS4 Media Objects BS4 Filters

Bootstrap 4 Grid

BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples

Bootstrap 4 Theme

BS4 Basic Template

Bootstrap 4 Ref

All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip


Bootstrap JS Tab


Вкладка классы CSS

Вкладки используются для разделения содержимого на различные области, где каждая область отображается по одному.

Для учебника о вкладках, читайте наши загрузочные вкладки/таблетки учебник.

Класс Описание
.nav nav-tabs Создание вкладок навигации
.nav nav-pills Создает навигационные таблетки
.nav-item Создание элементов вкладки
.nav-link Стили — ссылки внутри вкладки «Навигация»
.nav-justified Делает навигационные вкладки/таблетки равной ширины их родителя, на экранах шире, чем 768px. На небольших экранах вкладки NAV укладываются
.tab-content Вместе с. Tab-панель и Data-переключает = "Tab", это делает вкладку переключаемой
.tab-pane Вместе с. Tab-контент и Data-переключение = "Tab", это делает вкладку переключаемой

Через Data-* атрибуты

Добавьте data-toggle="tab" к каждой вкладке и добавьте .tab-pane класс с уникальным идентификатором для каждой вкладки и оберните их в .tab-content классе.

Пример

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active container" id="home">...</div>
  <div class="tab-pane container" id="menu1">...</div>
  <div class="tab-pane container" id="menu2">...</div>
</div>

Через JavaScript

Включить вручную с помощью:

Пример

// Select all tabs
$('.nav-tabs a').click(function(){
    $(this).tab('show');
})

// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')

// Select first tab
$('.nav-tabs a:first').tab('show')

// Select last tab
$('.nav-tabs a:last').tab('show')

// Select fourth tab (zero-based)
$('.nav-tabs li:eq(3) a').tab('show')

Параметры вкладки

None

Методы табуляции

В следующей таблице перечислены все доступные методы табуляции.

Метод Описание
.tab("show") Отображение вкладки

События вкладки

В следующей таблице перечислены все доступные события вкладки.

Событие Описание
show.bs.tab Происходит при отображении вкладки.
shown.bs.tab Происходит при полном отображении вкладки (после завершения переходов CSS)
hide.bs.tab Происходит при скрытии вкладки
hidden.bs.tab Происходит, когда вкладка полностью скрыта (после завершения переходов CSS)

Совет: Используйте событие jQuery .Target и Event. релатедтаржет для получения активной вкладки и предыдущей активной вкладки:

Пример

$('.nav-tabs a').on('shown.bs.tab', function(event){
    var x = $(event.target).text();         // active tab
    var y = $(event.relatedTarget).text();  // previous tab
});