Nav ak onglets

Dokimantasyon ak egzanp sou fason pou itilize eleman navigasyon Bootstrap yo.

Nan paj sa a

Base nav

Navigasyon ki disponib nan Bootstrap pataje maketing jeneral ak estil, soti nan .navklas debaz la nan eta aktif ak andikape yo. Boukante klas modifye pou chanje ant chak style.

Eleman baz .navla bati ak flexbox epi li bay yon fondasyon solid pou bati tout kalite konpozan navigasyon. Li gen ladann kèk ranvwaye style (pou travay ak lis), kèk padding lyen pou pi gwo zòn frape, ak manier debaz andikape.

Eleman baz .navla pa genyen okenn .activeeta. Egzanp sa yo gen ladan klas la, sitou pou demontre ke klas patikilye sa a pa deklanche okenn manier espesyal.

Pou transmèt eta aktif nan teknoloji asistans, sèvi ak aria-currentatribi a — lè l sèvi avèk pagevalè pou paj aktyèl la, oswa truepou atik aktyèl la nan yon seri.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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>

Klas yo itilize nan tout, kidonk maketing ou a ka super fleksib. Sèvi ak <ul>s tankou pi wo a, <ol>si lòd atik ou yo enpòtan, oswa woule pwòp ou a ak yon <nav>eleman. Paske .navitilizasyon display: flexyo, lyen nav yo konpòte menm jan ak atik nav yo, men san yo pa make siplemantè a.

<nav class="nav">
  <a class="nav-link active" aria-current="page" 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>

Styles ki disponib

Chanje style la nan .naveleman s ak modifikatè ak sèvis piblik. Melanje ak matche jan sa nesesè, oswa bati pwòp ou a.

Aliyman orizontal

Chanje aliyman orizontal nav ou a ak sèvis piblik flexbox . Pa default, nav yo aliye sou bò gòch, men ou ka fasilman chanje yo nan sant oswa a dwat.

Santre ak .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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>

Adwat ki aliyen ak .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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>

Vètikal

Pile navigasyon ou a lè w chanje direksyon atik fleksib ak .flex-columnsèvis piblik la. Bezwen pile yo sou kèk viewports men pa lòt moun? Sèvi ak vèsyon yo reponn (egzanp, .flex-sm-column).

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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>

Kòm toujou, navigasyon vètikal posib san yo pa <ul>s, tou.

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" 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>

Tabs

Pran navigasyon debaz la nan pi wo a epi li ajoute .nav-tabsklas la pou jenere yon koòdone ongle. Sèvi ak yo pou kreye rejyon tabtab ak plugin JavaScript tab nou an .

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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>

Grenn

Pran menm HTML sa a, men sèvi ak .nav-pillspito:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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>

Ranpli epi jistifye

Fòse .navsa ou a pou pwolonje tout lajè ki disponib nan youn nan de klas modifye yo. Pou ranpli tout espas ki disponib nan yon fason pwopòsyonèl .nav-item, sèvi ak .nav-fill. Remake ke tout espas orizontal yo okipe, men se pa tout atik nav ki gen menm lajè.

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

Lè w ap itilize yon <nav>navigasyon ki baze sou, ou ka san danje omisyon .nav-itemkòm sèlman .nav-linksa nesesè pou <a>eleman manier.

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

Pou eleman egal-lajè, sèvi ak .nav-justified. Tout espas orizontal pral okipe pa lyen nav, men kontrèman ak sa ki .nav-fillanwo a, chak atik nav yo pral menm lajè a.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Menm jan ak .nav-fillegzanp lan lè l sèvi avèk yon <nav>navigasyon ki baze sou.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Travay ak sèvis piblik flex

Si ou bezwen varyasyon nav ki reponn, konsidere itilize yon seri sèvis piblik flexbox . Pandan ke plis detay, sèvis piblik sa yo ofri pi gwo personnalisation atravè pwen breakpoints reponn. Nan egzanp ki anba a, nav nou an pral anpile sou pwen rupture ki pi ba a, Lè sa a, adapte yo ak yon layout orizontal ki ranpli lajè ki disponib la kòmanse soti nan pwen rupture piti a.

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Konsènan aksesiblite

Si w ap itilize nav pou bay yon ba navigasyon, asire w ou ajoute yon role="navigation"nan veso paran ki pi lojik nan <ul>, oswa vlope yon <nav>eleman alantou tout navigasyon an. Pa ajoute wòl nan <ul>tèt li, paske sa ta anpeche teknoloji asistans yo anonse l kòm yon lis aktyèl.

Remake byen ke ba navigasyon, menm si vizyèlman style kòm onglè ak .nav-tabsklas la, pa ta dwe bay role="tablist", role="tab"oswa role="tabpanel"atribi. Sa yo apwopriye sèlman pou koòdone onglè dinamik, jan sa dekri nan Pratik otè WAI ARIA yo . Gade konpòtman JavaScript pou entèfas onglet dinamik nan seksyon sa a pou yon egzanp. Atribi aria-currenta pa nesesè sou entèfas onglet dinamik paske JavaScript nou an okipe eta chwazi a lè nou ajoute aria-selected="true"sou tab aktif la.

Sèvi ak dropdowns

Ajoute meni déroulants ak yon ti HTML anplis ak plugin JavaScript deroulans yo .

Onglet ak dropdowns

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </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>

Grenn ak dropdowns

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </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>

Sass

Varyab

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

Konpòtman JavaScript

Sèvi ak tab JavaScript plugin-enkli li endividyèlman oswa atravè bootstrap.jsfichye konpile-pou pwolonje onglet navigasyon nou yo ak grenn nou yo pou kreye fenèt tabulab nan kontni lokal yo.

Entèfas onglet dinamik yo, jan sa dekri nan Pratik Otorize WAI ARIA yo , mande pou role="tablist", role="tab", role="tabpanel", ak aria-atribi adisyonèl pou yo ka transmèt estrikti yo, fonksyonalite yo ak eta aktyèl yo bay itilizatè teknoloji asistans yo (tankou lektè ekran yo). Kòm yon pi bon pratik, nou rekòmande pou itilize <button>eleman pou onglet yo, paske sa yo se kontwòl ki deklanche yon chanjman dinamik, olye ke lyen ki navige nan yon nouvo paj oswa kote.

Remake byen ke koòdone onglè dinamik pa ta dwe gen meni deroulan, paske sa lakòz tou de pwoblèm itilizasyon ak aksè. Soti nan yon pèspektiv itilizasyon, lefèt ke eleman deklanche tab la kounye a parèt pa imedyatman vizib (kòm li nan andedan meni an deroulant fèmen) ka lakòz konfizyon. Soti nan yon pwen de vi aksesibilite, kounye a pa gen okenn fason sansib nan kat sòt de konstriksyon sa a nan yon modèl estanda WAI ARIA, sa vle di ke li pa ka fasilman konprann itilizatè teknoloji asistans.

Sa a se kèk kontni anplasman kontni ki asosye onglet Kay la. Klike sou yon lòt onglet pral baske vizibilite sa a pou pwochen an. Tab JavaScript chanje klas yo pou kontwole vizibilite kontni an ak stil. Ou ka itilize li ak onglè, grenn, ak nenpòt lòt .navnavigasyon ki mache ak pisans.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>

Pou ede w adapte bezwen w yo, sa ap travay ak <ul>maketing ki baze sou, jan yo montre pi wo a, oswa ak nenpòt maketing abitrè "woule pwòp ou a". Remake byen ke si w ap itilize <nav>, ou pa ta dwe ajoute role="tablist"dirèkteman nan li, paske sa a ta depase wòl natif natal eleman an kòm yon bòn tè navigasyon. Olye de sa, chanje nan yon eleman altènatif (nan egzanp ki anba a, yon senp <div>) epi vlope la <nav>alantou li.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>

Plugin a tabs travay tou ak grenn.

<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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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>

Epi ak grenn vètikal.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <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>

Sèvi ak atribi done yo

Ou ka aktive yon tab oswa navigasyon grenn san yo pa ekri okenn JavaScript pa senpleman espesifye data-bs-toggle="tab"oswa data-bs-toggle="pill"sou yon eleman. Sèvi ak atribi done sa yo sou .nav-tabsoswa .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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>

Via JavaScript

Pèmèt onglè tabulab yo atravè JavaScript (yo bezwen chak tab aktive endividyèlman):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

Ou ka aktive onglè endividyèl yo nan plizyè fason:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Efè fennen

Pou fè onglet fennen nan, ajoute .fadenan chak .tab-pane. Premye volet tab la dwe genyen tou .showpou fè kontni inisyal la vizib.

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

Metòd

Metòd asynchrone ak tranzisyon

Tout metòd API yo asenkron epi yo kòmanse yon tranzisyon . Yo retounen kote moun k ap rele a le pli vit ke tranzisyon an kòmanse men anvan li fini . Anplis de sa, yo pral inyore yon apèl metòd sou yon eleman tranzisyon .

Gade dokiman JavaScript nou an pou plis enfòmasyon .

constructor

Aktive yon eleman tab ak yon veso kontni. Tab ta dwe gen swa yon data-bs-targetoswa, si w ap itilize yon lyen, yon hrefatribi, vize yon ne veso nan DOM la.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

montre

Chwazi tab la bay epi li montre fenèt ki asosye li yo. Nenpòt lòt tab ki te chwazi deja vin pa seleksyone epi fenèt ki asosye li yo kache. Retounen bay moun kap rele a anvan yo te montre volet tab la (sa vle di anvan shown.bs.tabevènman an rive).

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

jete

Detwi tab yon eleman.

getInstance

Metòd estatik ki pèmèt ou jwenn egzanp tab ki asosye ak yon eleman DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Metòd estatik ki pèmèt ou jwenn egzanp tab ki asosye ak yon eleman DOM, oswa kreye yon nouvo si li pa te inisyalize.

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Evènman

Lè w ap montre yon nouvo tab, evènman yo pran dife nan lòd sa a:

hide.bs.tab(sou onglet aktif aktyèl la)
show.bs.tab(sou onglet ki dwe montre)
hidden.bs.tab(sou onglet aktif anvan an, menm jan ak hide.bs.tabevènman an)
shown.bs.tab(sou onglet ki fèk parèt aktif la, menm bagay la tou pou show.bs.tabevènman an)

Si pa gen okenn tab te deja aktif, Lè sa a, hide.bs.tabak hidden.bs.tabevènman yo pa pral revoke.

Kalite evènman	Deskripsyon
`show.bs.tab`	Evènman sa a dife sou tab montre, men anvan yo te montre nouvo tab la. Sèvi `event.target`ak ak `event.relatedTarget`pou vize tab aktif la ak tab aktif anvan an (si disponib) respektivman.
`shown.bs.tab`	Evènman sa a pran dife sou tab montre apre yo fin montre yon tab. Sèvi `event.target`ak ak `event.relatedTarget`pou vize tab aktif la ak tab aktif anvan an (si disponib) respektivman.
`hide.bs.tab`	Evènman sa a dife lè yon nouvo tab yo dwe montre (e konsa tab aktif anvan an dwe kache). Sèvi `event.target`ak ak `event.relatedTarget`pou vize onglet aktyèl la aktif ak nouvo tab la byento-a-aktif, respektivman.
`hidden.bs.tab`	Evènman sa a dife apre yo fin montre yon nouvo tab (e konsa tab aktif anvan an kache). Sèvi `event.target`ak ak `event.relatedTarget`pou vize tab aktif anvan an ak nouvo tab aktif la, respektivman.

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})