Навс

Документација и примери за коришћење укључених навигационих компоненти Боотстрапа.

Басе нав

Навигација доступна у Боотстрап-у дели опште ознаке и стилове, од основне .navкласе до активних и онемогућених стања. Замените класе модификатора да бисте се пребацивали између сваког стила.

Основна .navкомпонента је направљена са флексбоксом и пружа снажну основу за изградњу свих врста навигационих компоненти. Укључује неке замене стилова (за рад са листама), неке допуне линкова за веће погођене области и основни онемогућени стил.

Основна .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>с као што је горе, <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компоненте с помоћу модификатора и услужних програма. Мешајте и спајајте по потреби или направите своје.

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

Промените хоризонтално поравнање ваше навигације помоћу флекбок услужних програма . Подразумевано, навигације су поравнате лево, али можете их лако променити у центар или десно.

Центрирано са .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>с.

<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класу за генерисање интерфејса са картицама. Користите их за креирање региона са табулаторима помоћу нашег ЈаваСцрипт додатка за картицу .

<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>

пилуле

Узмите исти ХТМЛ, али .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-itemс, користите .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>

Рад са флек услужним програмима

Ако су вам потребне варијације за брзу навигацију, размислите о коришћењу серије флекбок услужних програма . Иако су више опширни, ови услужни програми нуде веће прилагођавање преко тачака прекида. У примеру испод, наша навигација ће бити наслагана на најнижој тачки прекида, а затим ће се прилагодити хоризонталном распореду који испуњава доступну ширину почевши од мале тачке прекида.

<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класом, не треба давати role="tablist", role="tab"или role="tabpanel"атрибуте. Они су прикладни само за динамичке интерфејсе са картицама, као што је описано у обрасцу картица водича за АРИА ауторске праксе . Погледајте ЈаваСцрипт понашање за динамичке интерфејсе са картицама у овом одељку за пример.

Коришћење падајућих менија

Додајте падајуће меније са мало додатног ХТМЛ-а и падајуће ЈаваСцрипт додатке .

Картице са падајућим менијима

<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>

ЈаваСцрипт понашање

Користите ЈаваСцрипт додатак за картицу—укључите га појединачно или кроз компајлирану bootstrap.jsдатотеку—да проширите наше навигационе картице и пилуле како бисте креирали окна локалног садржаја са табовима.

Ако градите наш ЈаваСцрипт из извора, он захтеваutil.js .

Динамички интерфејси са картицама, као што је описано у обрасцу картица АРИА водича за ауторске праксе , захтевају role="tablist", role="tab", role="tabpanel", и додатне aria-атрибуте да би пренели своју структуру, функционалност и тренутно стање корисницима помоћних технологија (као што су читачи екрана). Као најбољу праксу, препоручујемо коришћење <button>елемената за картице, јер су то контроле које покрећу динамичку промену, а не везе које воде до нове странице или локације.

Имајте на уму да ЈаваСцрипт додатак картице не подржава интерфејсе са картицама који садрже падајуће меније, јер они изазивају проблеме употребљивости и приступачности. Из перспективе употребљивости, чињеница да елемент покретача тренутно приказане картице није одмах видљив (пошто се налази унутар затвореног падајућег менија) може изазвати забуну. Са тачке гледишта приступачности, тренутно не постоји разуман начин да се ова врста конструкције мапира у стандардни ВАИ АРИА образац, што значи да се не може лако учинити разумљивим корисницима помоћних технологија.

Садржај чувара места за таблу са картицама. Ово се односи на почетну картицу. Однесе те миљама високо, тако високо, јер она има онај међународни осмех. У кревету ми је странац, у глави ми лупа. О, не. У другом животу бих те натерао да останеш. Јер ја, ја сам способан за све. Одећа за моју крунску битку. Користио се за крађу алкохолних пића твојих родитеља и пењање на кров. Тон, препланули и спремни, појачајте јер постаје тежак. Њена љубав је као дрога. Претпостављам да сам заборавио да имам избор.

Садржај чувара места за таблу са картицама. Ово се односи на картицу профила. Имате најбољу архитектуру. Печати у пасош, она је космополита. Фино, свеже, жестоко, имамо га на закључаном. Никад нисам планирао да ћу те једног дана изгубити. Она ти једе срце. Твој пољубац је космички, сваки покрет је магија. Мислим на оне, мислим као да је она та. Поздрав драги, идемо на путовање. Само поседујте ноћ као што је 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>

И са вертикалним пилулама.

Садржај чувара места за таблу са картицама. Ово се односи на почетну картицу. Видео сам те у центру града како певаш блуз. Гледајте како кружите око одвода. Зашто ме не пустиш да свратим? Тешка је глава која носи круну. Да, ми терамо анђеле да плачу, кишу на земљу одозго. Желите да видите емисију у 3Д, филм. Да ли се икада осећате тако танко на папиру. То је да или не, можда не.

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>

Коришћење атрибута података

Можете активирати навигацију по картици или таблетама без писања ЈаваСцрипта једноставним навођењем 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>

Преко ЈаваСцрипт-а

Омогућите картице са картицама преко ЈаваСцрипт-а (свака картица треба да се активира појединачно):

$('#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>

Методе

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

Све АПИ методе су асинхроне и покрећу транзицију . Они се враћају позиваоцу чим се транзиција започне, али пре него што се заврши . Поред тога, позив методе за прелазну компоненту биће занемарен .

Погледајте нашу ЈаваСцрипт документацију за више информација .

$().таб

Активира елемент картице и контејнер садржаја. Картица треба да има 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>

.таб('прикажи')

Бира дату картицу и приказује њено повезано окно. Било која друга картица која је претходно изабрана постаје поништена, а повезано окно је скривено. Враћа се позиваоцу пре него што је табулатор стварно приказан (тј. пре него што се shown.bs.tabдогађај деси).

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

.таб('диспосе')

Уништава картицу елемента.

Догађаји

Када се прикаже нова картица, догађаји се активирају следећим редоследом:

hide.bs.tab(на тренутно активној картици)
show.bs.tab(на картици која треба да се прикаже)
hidden.bs.tab(на претходној активној картици, иста као за hide.bs.tabдогађај)
shown.bs.tab(на ново-активној управо приказаној картици, иста као и за show.bs.tabдогађај)

Ако ниједна картица већ није била активна, догађаји hide.bs.tabи hidden.bs.tabнеће бити покренути.

Тип догађаја	Опис
схов.бс.таб	Овај догађај се покреће у емисији картице, али пре него што је нова картица приказана. Користите `event.target`и `event.relatedTarget`да бисте циљали активну картицу и претходну активну картицу (ако је доступна).
приказано.бс.таб	Овај догађај се покреће у емисији картице након што се картица прикаже. Користите `event.target`и `event.relatedTarget`да бисте циљали активну картицу и претходну активну картицу (ако је доступна).
хиде.бс.таб	Овај догађај се покреће када треба да се прикаже нова картица (а самим тим и претходна активна картица треба да буде скривена). Користите `event.target`и `event.relatedTarget`да бисте циљали тренутну активну картицу и нову картицу која ће ускоро бити активна.
хидден.бс.таб	Овај догађај се покреће након што се прикаже нова картица (и стога је претходна активна картица скривена). Користите `event.target`и `event.relatedTarget`да бисте циљали претходну активну картицу и нову активну картицу, респективно.

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