Source

нав

Дакументацыя і прыклады выкарыстання навігацыйных кампанентаў Bootstrap.

База нав

Навігацыя, даступная ў 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" href="#">Disabled</a>
  </li>
</ul>

Класы выкарыстоўваюцца паўсюль, таму ваша разметка можа быць вельмі гнуткай. Выкарыстоўвайце <ul>s, як паказана вышэй, або закіньце свой уласны, напрыклад, з <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="#">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" href="#">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="#">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="#">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" href="#">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" href="#">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" href="#">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="#">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="#">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="#">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="#">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="#">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="#">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="#">Disabled</a>
</nav>

Наконт даступнасці

Калі вы выкарыстоўваеце navs, каб забяспечыць панэль навігацыі, не забудзьцеся дадаць role="navigation"у найбольш лагічны бацькоўскі кантэйнер <ul>або абгарнуць <nav>элемент вакол усёй навігацыі. Не дадавайце ролю ў <ul>саму сябе, бо гэта не дазволіць аб'явіць яе як сапраўдны спіс дапаможнымі тэхналогіямі.

Звярніце ўвагу, што панэлі навігацыі, нават калі яны візуальна аформлены як укладкі з .nav-tabsкласам, не павінны даваць role="tablist", role="tab"або role="tabpanel"атрыбуты. Яны прыдатныя толькі для дынамічных інтэрфейсаў з укладкамі, як апісана ў WAI ARIA Authoring Practices . Глядзіце ў якасці прыкладу паводзіны JavaScript для дынамічных інтэрфейсаў з укладкамі ў гэтым раздзеле.

Выкарыстанне выпадаючых спісаў

Дадайце выпадаючыя меню з невялікай колькасцю дадатковага 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-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="#">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="#">Disabled</a>
  </li>
</ul>

Паводзіны JavaScript

Выкарыстоўвайце плагін JavaScript для ўкладак — уключыце яго асобна або праз скампіляваны bootstrap.jsфайл — каб пашырыць нашы навігацыйныя ўкладкі і таблеткі, каб ствараць панэлі лакальнага змесціва з укладкамі, нават з дапамогай выпадаючых меню.

Калі вы ствараеце наш JavaScript з зыходнага кода, патрабуеццаutil.js .

Дынамічныя інтэрфейсы з укладкамі, як апісана ў WAI ARIA Authoring Practices , патрабуюць role="tablist", role="tab", role="tabpanel"і дадатковых aria-атрыбутаў, каб перадаць сваю структуру, функцыянальнасць і бягучы стан карыстальнікам дапаможных тэхналогій (такіх як праграмы чытання з экрана).

Звярніце ўвагу, што дынамічныя інтэрфейсы з укладкамі не павінны ўтрымліваць выпадаючыя меню, бо гэта выклікае праблемы як з зручнасцю выкарыстання, так і з даступнасцю. З пункту гледжання зручнасці выкарыстання, той факт, што элемент запуску ўкладкі, які адлюстроўваецца ў дадзены момант, бачны не адразу (паколькі ён знаходзіцца ў закрытым выпадальным меню), можа выклікаць блытаніну. З пункту гледжання даступнасці ў цяперашні час не існуе разумнага спосабу супаставіць такую ​​канструкцыю са стандартным шаблонам WAI ARIA, што азначае, што яе немагчыма зрабіць зразумелай для карыстальнікаў дапаможных тэхналогій.

Неапрацаваны дэнім, вы напэўна не чулі пра іх джынсавыя шорты Осцін. Nesciunt tofu stumptown aliqua, рэтра-сінтэзатар майстар ачысткі. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Швэдар Cosby eu banh mi, qui irure Тэры Рычардсан былы кальмар. Aliquip placeat salvia cillum iphone. Seitan aliquip quis кардыган амерыканскае адзенне, мяснік voluptate nisi qui.

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>

Убудова tabs таксама працуе з таблеткамі.

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa exceptioneur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

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>

І з вертыкальнымі таблеткамі.

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit exceptioneur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit exceptioneur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt exceptioneur ea incididunt minim occaecat.

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>

Выкарыстанне атрыбутаў дадзеных

Вы можаце актываваць навігацыю па ўкладках або таблетках без напісання 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">
    <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>

Праз JavaScript

Уключыць укладкі з дапамогай JavaScript (кожную ўкладку неабходна актываваць асобна):

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

Метады

Асінхронныя метады і пераходы

Усе метады API асінхронныя і пачынаюць пераход . Яны вяртаюцца да абанента, як толькі пачынаецца пераход, але да яго заканчэння . Акрамя таго, выклік метаду пераходнага кампанента будзе ігнаравацца .

Для атрымання дадатковай інфармацыі глядзіце нашу дакументацыю па JavaScript.

$().таб

Актывуе элемент укладкі і кантэйнер змесціва. На ўкладцы павінна быць альбо data-targetабо, hrefарыентаванае на вузел кантэйнера ў DOM.

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

.tab('паказаць')

Выбірае дадзеную ўкладку і паказвае звязаную з ёй панэль. Любая іншая ўкладка, якая была выбрана раней, становіцца невыбранай, а звязаная з ёй панэль схавана. Вяртаецца да абанента да таго, як панэль укладак была фактычна паказана (г.зн. да таго , як shown.bs.tabадбудзецца падзея).

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

.tab('утылізаваць')

Знішчае ўкладку элемента.

Падзеі

Пры паказе новай укладкі падзеі запускаюцца ў наступным парадку:

  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не будуць запушчаны.

Тып падзеі Апісанне
паказаць.bs.tab Гэта падзея запускаецца падчас паказу ўкладак, але да таго, як будзе паказана новая ўкладка. Выкарыстоўвайце event.targetі event.relatedTarget, каб нацэліць на актыўную ўкладку і папярэднюю актыўную ўкладку (калі ёсць) адпаведна.
паказаны.bs.tab Гэта падзея спрацоўвае падчас паказу ўкладак пасля паказу ўкладкі. Выкарыстоўвайце event.targetі event.relatedTarget, каб нацэліць на актыўную ўкладку і папярэднюю актыўную ўкладку (калі ёсць) адпаведна.
hide.bs.tab Гэта падзея спрацоўвае, калі трэба паказаць новую ўкладку (і, такім чынам, папярэднюю актыўную ўкладку трэба схаваць). Выкарыстоўвайце event.targetі event.relatedTarget, каб нацэліць на бягучую актыўную ўкладку і новую ўкладку, якая хутка стане актыўнай, адпаведна.
схаваная.bs.ўкладка Гэта падзея спрацоўвае пасля таго, як новая ўкладка паказваецца (і, такім чынам, папярэдняя актыўная ўкладка схавана). Выкарыстоўвайце event.targetі event.relatedTarget, каб нацэліць на папярэднюю актыўную ўкладку і на новую актыўную ўкладку адпаведна. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})