in English

нав

Дакументацыя і прыклады выкарыстання навігацыйных кампанентаў 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">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>

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

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

Звярніце ўвагу, што панэлі навігацыі, нават калі яны візуальна аформлены як укладкі з .nav-tabsкласам, не павінны даваць role="tablist", role="tab"або role="tabpanel"атрыбуты. Яны падыходзяць толькі для інтэрфейсаў з дынамічнымі ўкладкамі, як апісана ў шаблоне ўкладак Кіраўніцтва па практыцы стварэння ARIA . Глядзіце ў якасці прыкладу паводзіны 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-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 Authoring Practices Guide , патрабуюць 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>вакол яго.

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

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

Змест запаўняльніка для панэлі ўкладак. Гэта адносіцца да галоўнай укладкі. Падымае цябе на мілі, так высока, таму што ў яе такая міжнародная ўсмешка. У маім ложку незнаёмец, у галаве стукае. О не. У іншым жыцці я прымусіў бы цябе застацца. Таму што я, я здольны на ўсё. Падрыхтоўка да майго кароннага бою. Раней краў спіртное ў бацькоў і лазіў на дах. Тон, загар у форме і гатовы, узмацніце, бо ён становіцца цяжкім. Яе каханне - як наркотык. Я мяркую, што я забыўся, што ў мяне быў выбар.

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.

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

$().таб

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

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-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('утылізаваць')

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

Падзеі

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

  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, каб нацэліць на папярэднюю актыўную ўкладку і на новую актыўную ўкладку адпаведна. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})