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

Базовият .navкомпонент е изграден с flexbox и осигурява здрава основа за изграждане на всички видове навигационни компоненти. Той включва някои замени на стила (за работа със списъци), някои подложки за връзки за по-големи зони на попадение и основен дезактивиран стил.

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

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" 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">Disabled</a>
  </li>
</ul>

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

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Налични стилове

Променете стила на .navкомпонента s с модификатори и помощни програми. Смесете и комбинирайте според нуждите или създайте свой собствен.

Хоризонтално подравняване

Променете хоризонталното подравняване на вашата навигация с помощните програми на flexbox . По подразбиране навигациите са подравнени вляво, но можете лесно да ги промените в централно или вдясно.

Центрирано с .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" 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">Disabled</a>
  </li>
</ul>

Дясно подравнено с .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" 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">Disabled</a>
  </li>
</ul>

Вертикална

Подредете вашата навигация, като промените посоката на гъвкавия елемент с .flex-columnпомощната програма. Трябва да ги подредите върху някои прозорци, но не и върху други? Използвайте адаптивните версии (напр. .flex-sm-column).

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" 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">Disabled</a>
  </li>
</ul>

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

<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Раздели

Взема основната навигация от по-горе и добавя .nav-tabsкласа за генериране на интерфейс с раздели. Използвайте ги, за да създавате региони с възможност за табулиране с нашия плъгин за таб JavaScript .

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" 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">Disabled</a>
  </li>
</ul>

Хапчета

Вземете същия HTML, но .nav-pillsвместо това използвайте:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" 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">Disabled</a>
  </li>
</ul>

Попълнете и обосновете

Принудете вашето .navсъдържание да разшири пълната налична ширина един от двата класа модификатори. За да запълните пропорционално цялото налично пространство с вашите .nav-items, използвайте .nav-fill. Забележете, че цялото хоризонтално пространство е заето, но не всеки навигационен елемент има еднаква ширина.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" 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">Disabled</a>
  </li>
</ul>

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

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" 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">Disabled</a>
</nav>

За елементи с еднаква ширина използвайте .nav-justified. Цялото хоризонтално пространство ще бъде заето от навигационни връзки, но за разлика от .nav-fillгорното, всеки навигационен елемент ще бъде с еднаква ширина.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" 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">Disabled</a>
  </li>
</ul>

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

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" 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">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" 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">Disabled</a>
</nav>

Относно достъпността

Ако използвате навигации, за да предоставите лента за навигация, не забравяйте да добавите role="navigation"към най-логичния родителски контейнер на <ul>, или обвийте <nav>елемент около цялата навигация. Не добавяйте ролята към <ul>себе си, тъй като това би попречило да бъде обявена като действителен списък от помощни технологии.

Обърнете внимание, че лентите за навигация, дори визуално оформени като раздели с .nav-tabsкласа, не трябва да получават атрибути или . Те са подходящи само за динамични интерфейси с раздели, както е описано в шаблона на раздели Ръководство за практики за авторство на ARIA . Вижте поведението на JavaScript за динамични интерфейси с раздели в този раздел за пример.role="tablist"role="tab"role="tabpanel"

Използване на падащи менюта

Добавете падащи менюта с малко допълнителен HTML и JavaScript приставката за падащи менюта .

Раздели с падащи менюта

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Хапчета с падащи менюта

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

поведение на JavaScript

Използвайте JavaScript плъгина за раздели – включете го поотделно или чрез компилиран bootstrap.jsфайл – за да разширите нашите навигационни раздели и хапчета, за да създадете табулируеми панели с локално съдържание.

Ако изграждате нашия JavaScript от изходния код, той изискваutil.js .

Интерфейсите с динамични раздели, както е описано в модела на раздели Ръководството за авторски практики на ARIA , изискват role="tablist", role="tab", role="tabpanel"и допълнителни aria-атрибути, за да предадат своята структура, функционалност и текущо състояние на потребителите на помощни технологии (като екранни четци). Като най-добра практика препоръчваме да използвате <button>елементи за разделите, тъй като това са контроли, които задействат динамична промяна, а не връзки, които навигират към нова страница или местоположение.

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

Съдържание на контейнер за панела с раздели. Това се отнася до началния раздел. Издига те мили високо, толкова високо, защото тя има онази международна усмивка. Има непознат в леглото ми, има удари в главата ми. О, не. В друг живот бих те накарал да останеш. Защото аз, аз съм способен на всичко. Подготвям се за коронната си битка. Използва се за кражба на алкохола на родителите ти и за изкачване на покрива. Тон, тен и готов, увеличете го, защото става тежък. Любовта й е като наркотик. Предполагам, че съм забравил, че имам избор.

Съдържание на контейнер за панела с раздели. Това се отнася до раздела на профила. Имате най-добрата архитектура. Паспортни печати, тя е космополит. Добър, свеж, яростен, заключихме го. Никога не съм планирал, че един ден ще те загубя. Тя изяжда сърцето ти. Целувката ти е космическа, всяко движение е магия. Имам предвид тези, искам да кажа, че тя е тази. Поздрави любими хора, нека да поемем на пътешествие. Просто притежавайте нощта като 4-ти юли! Но вие предпочитате да бъдете пропилени.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>около него.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>

Плъгинът за раздели работи и с хапчета.

<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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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>

И с вертикални хапчета.

Съдържание на контейнер за панела с раздели. Това се отнася до началния раздел. Видях те в центъра да пееш блус. Гледайте как обикаляте канала. Защо не ми позволиш да се отбия? Тежка е главата, която носи короната. Да, ние караме ангелите да плачат, валят на земята отгоре. Искате ли да видите шоуто в 3D, филм. Усещаш ли някога, чувстваш ли се толкова тънък като хартия. Това е да или не, може би не.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <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>
</div>

Използване на атрибути на данни

Можете да активирате навигация в раздел или хапче, без да пишете JavaScript, като просто посочите data-toggle="tab"или data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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 (всеки раздел трябва да се активира индивидуално):

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

Можете да активирате отделни раздели по няколко начина:

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third tab

Ефект на избледняване

За да накарате разделите да изчезват, добавете .fadeкъм всеки .tab-pane. Първият панел с раздели също трябва .showда направи първоначалното съдържание видимо.

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

Методи

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

Всички API методи са асинхронни и стартират преход . Те се връщат при повикващия веднага щом преходът започне, но преди да приключи . В допълнение, извикване на метод на преходен компонент ще бъде игнорирано .

Вижте нашата JavaScript документация за повече информация .

$().tab

Активира разделен елемент и контейнер със съдържание. Tab трябва да има или атрибут, насочен към контейнерен възел в DOM data-target, ако използва връзка .href

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('покажи')

Избира дадения раздел и показва свързания с него панел. Всеки друг раздел, който е бил избран преди това, става неизбран и свързаният с него панел е скрит. Връща се към повикващия, преди панелът с раздели действително да бъде показан (т.е. преди shown.bs.tabсъбитието да се случи).

$('#someTab').tab('show')

.tab('dispose')

Унищожава раздела на елемент.

събития

При показване на нов раздел събитията се задействат в следния ред:

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`, за да насочите съответно активния раздел и предишния активен раздел (ако е наличен).
показано.bs.tab	Това събитие се задейства при показване на раздели, след като даден раздел е бил показан. Използвайте `event.target`и `event.relatedTarget`, за да насочите съответно активния раздел и предишния активен раздел (ако е наличен).
скрий.bs.tab	Това събитие се задейства, когато трябва да се покаже нов раздел (и по този начин предишният активен раздел трябва да бъде скрит). Използвайте `event.target`и `event.relatedTarget`, за да насочите съответно текущия активен раздел и новия раздел, който скоро ще бъде активен.
скрити.bs.tab	Това събитие се задейства, след като се покаже нов раздел (и по този начин предишният активен раздел е скрит). Използвайте `event.target`и `event.relatedTarget`, за да насочите съответно предишния активен раздел и новия активен раздел.

$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})

навигация

База нав