Source

Навс

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

Басе нав

Навигација доступна у Боотстрап-у дели опште ознаке и стилове, од основне .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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" 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" 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" 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>с.

<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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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="#">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 class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

За елементе једнаке ширине користите .nav-justified. Сав хоризонтални простор ће бити заузет навигационим везама, али за разлику од .nav-fillгоре наведеног, свака навигациона ставка ће бити исте ширине.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">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-fillпримеру коришћења <nav>навигације засноване на -, обавезно укључите .nav-itemсидра.

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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="#">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класом, не треба давати 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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

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

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

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

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

Сирови тексас за који вероватно нисте чули за фармерке Аустин. Несциунт тофу стумптовн аликуа, ретро синт мајстор за чишћење. Бркови клише темпор, Виллиамсбург Царлес веганска хелветица. Репрехендерит бутцхер ретро кеффииех дреамцатцхер синтх. Цосби џемпер еу банх ми, куи ируре Терри рицхардсон ек скуид. Аликуип плацеат салвиа циллум ипхоне. Сеитан аликуип куис кардиган америчка одећа, месар волуптате ниси куи.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </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">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </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>

Додатак табс такође ради са пилулама.

Цонсекуат оццаецат улламцо амет нон еиусмод ноструд долоре ируре инцидидунт ест дуис аним сунт оффициа. Фугиат велит проидент аликуип ниси инцидидунт ноструд екерцитатион проидент ест ниси. Ируре магна елит цоммодо аним ек вениам цулпа еиусмод ид ноструд сит цупидатат ин вениам ад. Еиусмод цонсекуат еу адиписицинг миним аним аликуип цупидатат цулпа екцептеур куис. Оццаецат сит еу екерцитатион ируре Лорем инцидидунт ноструд.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </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>

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

Циллум ад ут ируре темпор велит ноструд оццаецат улламцо аликуа аним Лорем синт. Вениам синт дуис инцидидунт до ессе магна моллит екцептеур лаборум куи. Ид ид репрехендерит сит ест еу аликуа оццаецат куис ет велит екцептеур лаборум моллит долоре еиусмод. Ипсум долор ин оццаецат цоммодо ет волуптате миним репрехендерит моллит париатур. Десерунт нон лаборум еним ет циллум еу десерунт екцептионеур еа инцидидунт миним оццаецат.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </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">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Појединачне картице можете активирати на неколико начина:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').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">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').tab('show')
  })
</script>

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

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

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

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

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

Догађаји

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

  1. hide.bs.tab(на тренутно активној картици)
  2. show.bs.tab(на картици која треба да се прикаже)
  3. hidden.bs.tab(на претходној активној картици, иста као за hide.bs.tabдогађај)
  4. 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да бисте циљали претходну активну картицу и нову активну картицу, респективно. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})