Navs ken tabs

Dokumentasion ken dagiti pagarigan para iti no kasano nga usaren dagiti nairaman a paset ti nabigasion ti Bootstrap.

Iti daytoy a panid

Base nga nav

Ti nabigasion a magun-od iti Bootstrap ket mangibinglay ti sapasap a panagmarka ken dagiti estilo, manipud iti batayan .nava klase aginggana kadagiti aktibo ken baldado nga estado. Agsinnukat kadagiti klase ti mangbalbaliw tapno agsubli iti nagbaetan ti tunggal maysa nga estilo.

Ti batayan .nava paset ket naibangon babaen ti flexbox ken mangipaay ti napigsa a pundasion para iti panagbangon kadagiti amin a kita ti paset ti nabigasion. Daytoy ket mangiraman ti sumagmamano a panagbaliw ti estilo (para iti panagtrabaho kadagiti listaan), sumagmamano a silpo a padding para kadagiti dakdakkel a nadungpar a lugar, ken dagiti batayan a baldado nga estilo.

Ti batayan .nava paset ket saan a mangiraman ti ania man .activenga estado. Dagiti sumaganad a pagarigan ket mairaman ti klase, a nangruna tapno maipakita a daytoy a partikular a klase ket saan a mangtignay ti ania man nga espesial nga estilo.

Tapno maidanon ti aktibo a kasasaad kadagiti makatulong a teknolohia, usaren ti aria-currentattribute — nga agus-usar ti pagepateg para iti agdama a panid, wenno truepara iti agdama a banag iti maysa a grupo.

html nga

<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">Disabled</a>
  </li>
</ul>

Mausar dagiti klase iti intero, isu a mabalin a super flexible ti markup-mo. Usaren <ul>ti s a kas iti ngato, <ol>no napateg ti urnos dagiti banagmo, wenno i-roll ti bukodmo nga addaan iti <nav>elemento. Gapu ta dagiti .navpanagusar display: flex, dagiti silpo ti nav ket agtigtignayda a kas dagiti banag ti nav ket aramidenda, ngem awan ti ekstra a marka.

html nga

<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">Disabled</a>
</nav>

Dagiti magun-odan nga estilo

Baliwan ti estilo ti .navs component babaen dagiti modifier ken utilities. Paglalaoken ken pagtunos no kasapulan, wenno mangbangon iti bukodmo.

Paisaad a panagtunos

Baliwan ti horizontal a panagtunos ti nav mo kadagiti flexbox utilities . Babaen ti default, dagiti nav ket naitunos iti kannigid, ngem nalakam a baliwan dagitoy iti tengnga wenno kannawan a naitunos.

Naisentro iti .justify-content-center:

html nga

<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">Disabled</a>
  </li>
</ul>

Kannawan-a-naitunos iti .justify-content-end:

html nga

<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">Disabled</a>
  </li>
</ul>

Patakder

I-stack ti nabigasionmo babaen ti panangbalbaliw iti direksion ti flex item babaen ti .flex-columnutility. Kasapulan kadi nga i-stack dagitoy iti sumagmamano a viewport ngem saan a dadduma? Usaren dagiti sumungbat a bersion (kas pagarigan, .flex-sm-column).

html nga

<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">Disabled</a>
  </li>
</ul>

Kas iti kanayon, ti bertikal a panaglayag ket mabalin nga awan <ul>ti s, met.

html nga

<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">Disabled</a>
</nav>

Dagiti Tab

Alaen ti batayan a nav manipud iti ngato ken manginayon ti .nav-tabsklase tapno mangpataud ti tabbed interface. Usaren dagitoy a mangpartuat kadagiti tabbable a rehion babaen ti tab a JavaScript plugin tayo .

html nga

<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">Disabled</a>
  </li>
</ul>

Pildoras nga

Alaem dayta met laeng nga HTML, ngem usarem .nav-pillsketdi:

html nga

<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">Disabled</a>
  </li>
</ul>

Punnuem ken ikalintegan

Piliten dagiti .navlinaon ti 'mo tapno mangpalawa ti naan-anay a magun-od a kalawa maysa kadagiti dua a klase ti mangbalbaliw. Tapno proporsional a mapno amin a magun-odan nga espasio babaen ti .nav-items-mo, usarem ti .nav-fill. Madlaw nga amin a horizontal space ket okupado, ngem saan a tunggal nav item ket addaan iti agpapada a kalawa.

html nga

<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">Disabled</a>
  </li>
</ul>

No agus-usar ti <nav>-based a nabigasion, mabalinmo a sitatalged a liklikan .nav-itema kas laeng ti kasapulan para kadagiti elemento .nav-linkti estilo .<a>

html nga

<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">Disabled</a>
</nav>

Para kadagiti agpapada ti kalawana nga elemento, usaren ti .nav-justified. Amin a horisontal nga espasio ket okupado babaen dagiti silpo ti nav, ngem saan a kas dagiti .nav-fillnadakamat, tunggal maysa a banag ti nav ket agpapadato ti kalawa.

html nga

<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">Disabled</a>
  </li>
</ul>

Kasla ti .nav-fillpagarigan nga agus-usar ti <nav>-based a nabigasion.

html nga

<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">Disabled</a>
</nav>

Panagtrabaho kadagiti flex utilities

No kasapulam dagiti makasungbat a panagduduma ti nav, ibilangmo ti panagusar ti serye dagiti flexbox a utilidad . Bayat nga ad-adu a berboso, dagitoy a utilidad ket mangitukon ti dakdakkel a panagpasayaat iti ballasiw dagiti sumungbat a breakpoint. Iti pagarigan iti baba, ti navtayo ket maitumpokto iti kababaan a breakpoint, kalpasanna makibagay iti maysa a horisontal a layout a mangpunno ti magun-od a kalawa a mangrugi manipud iti bassit a breakpoint.

html nga

<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">Disabled</a>
</nav>

Maipapan iti accessibility

No agus-usar ka ti navs tapno mangipaay ti bara ti nabigasion, siguraduem nga inayon ti role="navigation"a iti lohikal unay a nagannak a pagkargaan ti <ul>, wenno baluten ti maysa <nav>nga elemento iti aglawlaw ti sibubukel a nabigasion. Dimo inayon ti akem iti <ul>mismo, ta daytoy ti manglapped iti pannakaipakaammo dayta kas aktual a listaan babaen kadagiti makatulong a teknolohia.

Imutektekanyo a dagiti bara ti nabigasion, urayno makita nga estilo a kas dagiti tab nga addaan iti .nav-tabsklase, ket saan koma a maited role="tablist", role="tab"wenno role="tabpanel"dagiti kababalin. Dagitoy ket maitutop laeng para kadagiti dinamiko a tabbed nga interface, a kas nailadawan iti padron dagiti tab ti Giya ti Panagsurat ti Panagsurat ti ARIA . Kitaen ti kababalin ti JavaScript para kadagiti dinamiko a tabbed nga interface iti daytoy a benneg para iti pagarigan. Ti aria-currentattribute ket saan a kasapulan kadagiti dinamiko a tabbed nga interface manipud idi ti JavaScriptmi ket mangasikaso ti napili nga estado babaen ti pananginayon aria-selected="true"iti aktibo a tab.

Panangusar kadagiti dropdown

Manginayon kadagiti dropdown a menu nga addaan iti bassit nga ekstra nga HTML ken dagiti dropdown a JavaScript plugin .

Dagiti tab nga addaan kadagiti dropdown

html nga

<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">Disabled</a>
  </li>
</ul>

Pildoras nga addaan dropdowns

html nga

<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">Disabled</a>
  </li>
</ul>

CSS nga

Dagiti Variable

Nainayon iti v5.2.0

Kas paset ti agbaliwbaliw nga asidegan dagiti CSS a variable ti Bootstrap, dagiti nav ket agus-usar itan kadagiti lokal a CSS a variable iti .nav, .nav-tabs, ken .nav-pillspara iti napasayaat nga aktual nga oras a panagpasayaat. Dagiti pateg para kadagiti variable ti CSS ket naikeddeng babaen ti Sass, isu a ti panagpasayaat ti Sass ket nasuportaran pay laeng, met.

Iti .navbase a klase:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

Iti .nav-tabsklase ti mangbalbaliw:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

Iti .nav-pillsklase ti mangbalbaliw:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Sass dagiti variable

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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;

Kababalin ti JavaScript

Usaren ti tab a JavaScript plugin—iraman daytoy a saggaysa wenno babaen ti naurnong bootstrap.jsa file—tapno mapalawa dagiti tab ken pildorastayo iti nabigasion tapno makaaramid kadagiti tabbable a pane ti lokal a linaon.

Daytoy ket sumagmamano a linaon ti placeholder ti nainaig a linaon ti tab ti Balay . Ti panangi-click iti sabali a tab ket mangbalbaliw iti pannakakita daytoy para iti sumaganad. Ti tab a JavaScript ket agsinnukat kadagiti klase tapno makontrol ti pannakakita ti linaon ken estilo. Mabalinmo nga usaren dayta kadagiti tab, pildoras, ken aniaman a dadduma pay a .nav-paandaren a nabigasion.

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.

This is some placeholder content the Disabled tab's associated content.

<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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

Tapno makatulong a maibagay kadagiti kasapulam, daytoy ket agtrabaho iti <ul>-based markup, kas naipakita iti ngato, wenno iti ania man nga arbitrario a “roll your own” markup. Imutektekanyo a no agus-usar ka ti <nav>, saanmo koma a role="tablist"direkta a manginayon iti daytoy, a kas daytoy ket mangbalbaliw ti katutubo nga akem ti elemento a kas maysa a pagilasinan ti nabigasion. Imbes ketdi, agsublika iti alternatibo nga elemento (iti pagarigan iti baba, maysa a simple <div>) ken baluten ti <nav>aglawlawna.

This is some placeholder content the Disabled tab's associated content.

<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>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

Agtrabaho met ti tabs plugin kadagiti pildoras.

This is some placeholder content the Disabled tab's associated content.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

Ket addaan kadagiti bertikal a pildoras. Ti nasayaat, para kadagiti bertikal a tab, rumbeng met nga inayonmo aria-orientation="vertical"iti pagkargaan ti listaan ti tab.

This is some placeholder content the Disabled tab's associated content.

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-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Ti pannakagun-od

Dagiti dinamiko a tabbed nga interface, a kas nailadawan iti ARIA Authoring Practices Guide tabs pattern , ket agkasapulan ti role="tablist", role="tab", role="tabpanel", ken dagiti kanayonan aria-a kababalin tapno maidanon ti estrukturada, panagusar, ken agdama a kasasaadda kadagiti agar-aramat kadagiti makatulong a teknolohia (kas dagiti agbasbasa ti iskrin). Kas ti kasayaatan nga aramid, irekomendarmi ti panagusar kadagiti <button>elemento para kadagiti tab, gapu ta dagitoy ket dagiti kontrol a mangtignay ti dinamiko a panagbalbaliw, imbes a dagiti silpo a mangiturong iti baro a panid wenno lokasion.

Iti panagtunos iti padron ti ARIA Authoring Practices, ti laeng agdama nga aktibo a tab ti umawat ti pokus ti teklado. No ti plugin ti JavaScript ket nairugi, daytoy ket mangikeddeng tabindex="-1"kadagiti amin a di aktibo a kontrol ti tab. Apaman a ti agdama nga aktibo a tab ket addaan iti pokus, dagiti tulbek ti kursor ket mangpaaktibo ti napalabas/sumaruno a tab, nga addaan ti plugin a mangbalbaliw ti panag- rovingtabindex a maitunos. Nupay kasta, laglagipen a ti plugin ti JavaScript ket saan a mangilasin kadagiti horisontal ken bertikal a listaan ti tab no maipapan kadagiti panagtitinnulong ti tulbek ti kursor: urayno ania ti orientasion ti listaan ti tab, agpada a ti ngato ken kannigid a kursor ket mapan iti napalabas a tab, ken ti baba ken kannawan a kursor ket mapan iti ti sumaganad a tab.

Iti sapasap, tapno mapasayaat ti panaglayag ti teklado, mairekomendar a mangaramid kadagiti mismo a panel ti tab a maipamaysa pay, malaksid no ti umuna nga elemento a naglaon ti addaan kaipapanan a linaon iti uneg ti panel ti tab ket naipamaysadan. Ti plugin ti JavaScript ket saan a mangpadas a mangasikaso iti daytoy nga aspeto—no sadino a maitutop, kasapulam a nalawag a pagbalinen dagiti tab panelmo a maipamaysa babaen ti pananginayon tabindex="0"iti markaam.

Ti tab a plugin ti JavaScript ket saan a mangsuporta kadagiti tabbed nga interface a naglaon kadagiti dropdown a menu, a kas dagitoy ket mangpataud kadagiti agpada nga isyu ti pannakausar ken pannakagun-od. Manipud iti perspektibo ti pannakausar, ti kinapudno a ti agdama a naiparang a tab ti trigger element ket saan a dagus a makita (kas daytoy ket adda iti uneg ti naserraan a dropdown a menu) ket mabalin a mangpataud ti pannakariro. Manipud iti punto ti panagkita ti aksesibilidad, awan ti agdama a nainsiriban a wagas a mangmapa iti daytoy a kita ti konstrukto iti maysa a pagalagadan a padron ti WAI ARIA, a ti kayatna a sawen ket saan a nalaka a maaramid a maawatan kadagiti agar-aramat kadagiti makatulong a teknolohia.

Panangusar kadagiti attribute ti datos

Mabalinmo nga aktiboen ti tab wenno pildoras a nabigasion a dika agsurat iti aniaman a JavaScript babaen ti basta panangidatag data-bs-toggle="tab"wenno data-bs-toggle="pill"iti maysa nga elemento. Usaren dagitoy a kababalin ti datos iti .nav-tabswenno .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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Babaen ti JavaScript

Pagbalinen dagiti tabbable a tab babaen ti JavaScript (tunggal tab ket kasapulan a mapaaktibo a saggaysa):

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

Mabalinmo nga aktiboen dagiti indibidual a tab iti sumagmamano a wagas:

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

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

Fade nga epekto

Tapno agkupas dagiti tab, inayon .fadeiti tunggal .tab-pane. Ti umuna a tab pane ket masapul pay .showa mangaramid ti umuna a linaon a makita.

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

Dagiti Pamay-an

Dagiti asynchronous a pamay-an ken panagbalbaliw

Amin a pamay-an ti API ket asynchronous ken mangrugi ti panagbalbaliw . Agsublida iti tumawag apaman a mairugi ti panagbalbaliw ngem sakbay nga agpatingga . Iti pay maipatinayon, ti maysa nga awag ti pamay-an iti maysa a panagbalbaliw a paset ket mailaksidto .

Kitaen ti dokumentasionmi iti JavaScript para iti ad-adu pay nga impormasion .

Paaktiboenna ti linaonmo kas elemento ti tab.

Mabalinmo ti mangpartuat ti pagarigan ti tab babaen ti konstruktor, kas pagarigan:

const bsTab = new bootstrap.Tab('#myTab')

Wagas	Panangiladawan
`dispose`	Dadaelenna ti tab ti maysa nga elemento.
`getInstance`	Estatiko a pamay-an a mangipalubos kenka a makaala ti pagarigan ti tab a nainaig iti maysa nga elemento ti DOM, mabalinmo nga usaren daytoy a kas daytoy: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Estatiko a pamay-an a mangisubli ti maysa a pagarigan ti tab a nainaig iti maysa nga elemento ti DOM wenno mangpartuat ti baro no kas pagarigan saan a nairugi. Mabalinmo nga usaren dayta a kastoy: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Pilien ti naited a tab ken ipakitana ti nainaig a pane daytoy. Ania man a sabali a tab a dati a napili ket agbalin a saan a napili ken ti nainaig a pane daytoy ket mailemmeng. Agsubli iti tumawag sakbay nga aktual a naipakita ti tab pane (kayatna a sawen sakbay a `shown.bs.tab`mapasamak ti pasamak).

Dagiti Pasamak

No mangipakita ti baro a tab, dagiti pasamak ket agputok iti sumaganad nga urnos:

hide.bs.tab(iti agdama nga aktibo a tab)
show.bs.tab(iti tab a maipakita)
hidden.bs.tab(iti napalabas nga aktibo a tab, isu met laeng ti para iti hide.bs.tabpasamak)
shown.bs.tab(iti baro nga aktibo a kabarbaro a naipakita a tab, isu met laeng ti para iti show.bs.tabpasamak)

No awan ti tab a dati nga aktibo, kalpasanna ti hide.bs.tabken hidden.bs.tabdagiti pasamak ket saan a mapaputok.

Kita ti pasamak	Panangiladawan
`hide.bs.tab`	Daytoy a pasamak ket agputok no ti baro a tab ket maipakita (ken iti kasta ti napalabas nga aktibo a tab ket mailemmeng). Usaren ti `event.target`ken `event.relatedTarget`tapno puntiriaen ti agdama nga aktibo a tab ken ti baro nga asidegen nga aktibo a tab, agpada.
`hidden.bs.tab`	Daytoy a pasamak ket agputok kalpasan ti baro a tab a maipakita (ken iti kasta ti napalabas nga aktibo a tab ket mailemmeng). Usaren ti `event.target`ken `event.relatedTarget`tapno puntiriaen ti napalabas nga aktibo a tab ken ti baro nga aktibo a tab, a nagsasaruno.
`show.bs.tab`	Daytoy a pasamak ket agpuor iti tab show, ngem sakbay a naipakita ti baro a tab. Usaren ti `event.target`ken `event.relatedTarget`tapno puntiriaen ti aktibo a tab ken ti napalabas nga aktibo a tab (no adda) a nagsasaruno.
`shown.bs.tab`	Daytoy a pasamak ket agpuor iti tab show kalpasan a naipakita ti maysa a tab. Usaren ti `event.target`ken `event.relatedTarget`tapno puntiriaen ti aktibo a tab ken ti napalabas nga aktibo a tab (no adda) a nagsasaruno.

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