in English

Navs

Bootstrap камтылган навигация компоненттерин кантип колдонуу керектиги боюнча документтер жана мисалдар.

Негизги nav

.navBootstrap'те жеткиликтүү навигация негизги класстан активдүү жана өчүрүлгөн абалга чейин жалпы белгилөө жана стилдерди бөлүшөт. Ар бир стилди алмаштыруу үчүн өзгөрткүч класстарын алмаштырыңыз.

Негизги .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 элементтериндей эле иштейт, бирок кошумча белгилөөсүз .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 утилиталары менен навигацияңыздын горизонталдуу тегиздөөсүн өзгөртүңүз . Демейки боюнча, navs солго тегизделген, бирок сиз аларды оңой эле борборго же оңго тегиздеп өзгөртө аласыз.

Борбордо .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, өтмөктүү интерфейсти түзүү үчүн классты кошот. Аларды биздин өтмөк 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класс менен өтмөктөр катары визуалдык стилде болсо дагы , , же атрибуттар берилбеши керек . Булар ARIA Authoring Practices Guide өтмөк үлгүсүндө сүрөттөлгөндөй динамикалык өтмөктүү интерфейстерге гана ылайыктуу . Мисал үчүн бул бөлүмдөгү динамикалык өтмөктүү интерфейстер үчүн JavaScript жүрүм -турумун караңыз .role="tablist"role="tab"role="tabpanel"

Ашылмаларды колдонуу

Бир аз кошумча HTML жана ачылуучу JavaScript плагини менен ачылуучу менюларды кошуңуз .

ылдый түшүүчү өтмөктөр

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

Таблеткалар ылдый түшүүчү

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

JavaScript жүрүм-туруму

Таблетка JavaScript плагинин колдонуңуз — аны өзүнчө же компиляцияланган bootstrap.jsфайл аркылуу кошуңуз — жергиликтүү мазмундун өтүлүүчү панелдерин түзүү үчүн биздин навигациялык өтмөктөрдү жана таблеткаларды кеңейтүү үчүн.

Эгер сиз биздин JavaScript булактан куруп жатсаңыз, андаutil.js .

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

Таблеткалар плагини таблеткалар менен да иштейт.

Өтмөк панели үчүн толтуруучу мазмун. Бул үй өтмөгүнө тиешелүү. Сени миль бийиктикке, ушунчалык бийикке алып барат, анткени анын эл аралык жылмаюусу бар. Төшөгүмдө бейтааныш адам бар, башымда дүкүлдөп жатат. Ой жок. Башка жашоодо сени калтырмакмын. Себеби, мен баарына кудуретим жетет. Таажылуу согушума даярмын. Ата-энеңдин ичимдигин уурдап, чатырга чыгуу үчүн колдонулат. Тон, күйүп, даяр, аны өйдө буруңуз, анткени ал оор болуп баратат. Анын сүйүүсү баңгизат сыяктуу. Мен тандоом бар экенин унутуп калдым окшойт.

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>

Маалымат атрибуттарын колдонуу

data-toggle="tab"Сиз жөн гана белгилөө же data-toggle="pill"элемент боюнча эч кандай JavaScript жазбастан өтмөктү же таблетка навигациясын иштете аласыз . Бул маалымат атрибуттарын .nav-tabsже боюнча колдонуңуз .nav-pills.

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

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

JavaScript аркылуу

JavaScript аркылуу табулатура өтмөктөрдү иштетүү (ар бир өтмөк өзүнчө активдештирилиши керек):

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

Сиз жеке өтмөктөрдү бир нече жол менен иштете аласыз:

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

Өнүгүү эффекти

Өтмөктөрдү өчүрүү үчүн, .fadeар бирине кошуңуз .tab-pane. Биринчи өтмөк панели да .showбаштапкы мазмунду көрүнө бериши керек.

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

Методдор

Асинхрондук методдор жана өтүүлөр

Бардык API ыкмалары асинхрондуу жана өтүүнү баштайт . Алар чалуучуга өтүү башталаары менен, бирок ал бүтө электе кайтып келишет . Кошумчалай кетсек, өтүүчү компоненттеги ыкма чакырыгы этибарга алынбайт .

Көбүрөөк маалымат алуу үчүн биздин JavaScript документтерибизди караңыз .

$().tab

Өтмөк элементин жана мазмун контейнерин иштетет. Өтмөктө data-targetже шилтеме колдонулса, hrefDOMдагы контейнер түйүнүнө багытталган атрибут болушу керек.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

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

<script>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('шоу')

Берилген өтмөктү тандап, ага байланыштуу панелди көрсөтөт. Мурда тандалган башка өтмөктөр тандалбай калат жана ага тиешелүү панель жашырылат. Өтмөк панели иш жүзүндө көрсөтүлө электе (б.а. shown.bs.tabокуя болгонго чейин) чалуучуга кайтып келет.

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

.tab('dispose')

Элементтин өтмөктү жок кылат.

Окуялар

Жаңы өтмөктү көрсөткөндө, окуялар төмөнкү тартипте күйөт:

  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окуялар өчүрүлбөйт.

Окуя түрү Description
show.bs.tab Бул окуя өтмөк көрсөтүүсүндө, бирок жаңы өтмөк көрсөтүлө электе башталат. Тиешелүүлүгүнө жараша активдүү өтмөктү жана мурунку активдүү өтмөктү (эгер бар болсо) максаттуу үчүн event.targetжана колдонуңуз .event.relatedTarget
show.bs.tab Бул окуя өтмөк көрсөтүлгөндөн кийин өтмөк көрсөтүүсүндө күйөт. Тиешелүүлүгүнө жараша активдүү өтмөктү жана мурунку активдүү өтмөктү (эгер бар болсо) максаттуу үчүн event.targetжана колдонуңуз .event.relatedTarget
hide.bs.tab Бул окуя жаңы өтмөк көрсөтүлө турганда (ошондуктан мурунку активдүү өтмөк жашырылганда) күйөт. Учурдагы жигердүү өтмөктү жана жакын арада активдүү боло турган жаңы өтмөктү максаттуу үчүн event.targetжана колдонуңуз .event.relatedTarget
hidden.bs.tab Бул окуя жаңы өтмөк көрсөтүлгөндөн кийин башталат (ошентип мурунку активдүү өтмөк жашырылган). Мурунку активдүү өтмөктү жана жаңы активдүү өтмөктү максаттуу үчүн event.targetжана колдонуңуз .event.relatedTarget 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})