Навигация и раздели
Документация и примери за това как да използвате включените навигационни компоненти на Bootstrap.
Base nav
Навигацията, налична в 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Класовете се използват навсякъде, така че вашето маркиране може да бъде супер гъвкаво. Използвайте <ul>
s като по-горе, <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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Налични стилове
Променете стила на .nav
компонента s с модификатори и помощни програми. Смесете и комбинирайте според нуждите или създайте свой собствен.
Хоризонтално подравняване
Променете хоризонталното подравняване на вашата навигация с помощните програми на 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" href="#" tabindex="-1" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</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="#">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Както винаги, вертикалната навигация е възможна и без <ul>
s.
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Раздели
Взема основната навигация от по-горе и добавя .nav-tabs
класа за генериране на интерфейс с раздели. Използвайте ги, за да създавате региони с възможност за табулиране с нашия плъгин за таб 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">
<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" href="#" tabindex="-1" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Попълнете и обосновете
Принудете вашето .nav
съдържание да разшири пълната налична ширина един от двата класа модификатори. За да запълните пропорционално цялото налично пространство с вашите .nav-item
s, използвайте .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" href="#" tabindex="-1" 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" href="#" tabindex="-1" 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" href="#" tabindex="-1" 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" href="#" tabindex="-1" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Относно достъпността
Ако използвате навигации, за да предоставите лента за навигация, не забравяйте да добавите role="navigation"
към най-логичния родителски контейнер на <ul>
, или обвийте <nav>
елемент около цялата навигация. Не добавяйте ролята към <ul>
себе си, тъй като това би попречило да бъде обявена като действителен списък от помощни технологии.
Обърнете внимание, че лентите за навигация, дори визуално оформени като раздели с .nav-tabs
класа, не трябва да получават атрибути или . Те са подходящи само за интерфейси с динамични раздели, както е описано в WAI ARIA Authoring Practices . Вижте поведението на JavaScript за динамични интерфейси с раздели в този раздел за пример. Атрибутът не е необходим на интерфейси с динамични раздели, тъй като нашият JavaScript обработва избраното състояние чрез добавяне в активния раздел.role="tablist"
role="tab"
role="tabpanel"
aria-current
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" href="#" tabindex="-1" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
дързък
Променливи
$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 Authoring Practices , изискват role="tablist"
, role="tab"
, role="tabpanel"
и допълнителни aria-
атрибути, за да предадат своята структура, функционалност и текущо състояние на потребителите на помощни технологии (като екранни четци). Като най-добра практика препоръчваме да използвате <button>
елементи за разделите, тъй като това са контроли, които задействат динамична промяна, а не връзки, които навигират към нова страница или местоположение.
Имайте предвид, че динамичните интерфейси с раздели не трябва да съдържат падащи менюта, тъй като това причинява проблеми както с използваемостта, така и с достъпността. От гледна точка на използваемостта, фактът, че задействащият елемент на текущо показания раздел не се вижда веднага (тъй като е в затвореното падащо меню), може да причини объркване. От гледна точка на достъпността, понастоящем няма разумен начин за картографиране на този вид конструкция към стандартен WAI ARIA модел, което означава, че не може лесно да бъде направено разбираемо за потребителите на помощни технологии.
Това е част от съдържанието на контейнер, свързано със съдържанието на раздела Начало. Щракването върху друг раздел ще превключи видимостта на този за следващия. Разделът JavaScript разменя класове, за да контролира видимостта и стила на съдържанието. Можете да го използвате с раздели, хапчета и всякаква друга .nav
навигация, поддържана от системата.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
<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="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</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">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>
</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>
Плъгинът за раздели работи и с хапчета.
Това е част от съдържанието на контейнер, свързано със съдържанието на раздела Начало. Щракването върху друг раздел ще превключи видимостта на този за следващия. Разделът JavaScript разменя класове, за да контролира видимостта и стила на съдържанието. Можете да го използвате с раздели, хапчета и всякаква друга .nav
навигация, поддържана от системата.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
<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>
</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
навигация, поддържана от системата.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
<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-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">...</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">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">...</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 методи са асинхронни и стартират преход . Те се връщат при повикващия веднага щом преходът започне, но преди да приключи . В допълнение, извикване на метод на преходен компонент ще бъде игнорирано .
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">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>
<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>
шоу
Избира дадения раздел и показва свързания с него панел. Всеки друг раздел, който е бил избран преди това, става неизбран и свързаният с него панел е скрит. Връща се към повикващия, преди панелът с раздели действително да бъде показан (т.е. преди shown.bs.tab
събитието да се случи).
var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()
изхвърлям
Унищожава раздела на елемент.
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 // newly activated tab
event.relatedTarget // previous active tab
})