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.

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

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

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

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

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

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

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

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

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

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

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

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

<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 WAI ARIA Authoring Practices . 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

<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

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

Sass nga

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:                    $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;

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.

Dagiti dinamiko a tabbed nga interface, a kas nailadawan kadagiti WAI ARIA Authoring Practices , 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.

Imutektekanyo a dagiti dinamiko a tabbed nga interface ket saan koma nga aglaon kadagiti dropdown a menu, a kas daytoy 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.

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.

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

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.

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

Agtrabaho met ti tabs plugin kadagiti pildoras.

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

Ket addaan kadagiti bertikal a pildoras.

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>

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

Babaen ti JavaScript

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

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

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

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

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

var 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">...</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>

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 .

constructor

Paaktiboenna ti elemento ti tab ken container ti linaon. Ti tab ket rumbeng nga addaan iti maysa data-bs-targetwenno, no agus-usar ti silpo, ti maysa a hrefkababalin, a mangpuntiria ti maysa a nodo ti pagkargaan iti 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-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 button')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

ipakita

Pilien ti naited a tab ken ipakitana ti nainaig a pane daytoy. Aniaman 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.tabmapasamak ti pasamak).

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

  tab.show()

ibelleng

Dadaelenna ti tab ti maysa nga elemento.

makaala tiInstansia

Estatiko a pamay-an a mangipalubos kenka a makaala ti pagarigan ti tab a nainaig iti maysa nga elemento ti DOM

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

makaalaWennoAgaramid itiInstansia

Estatiko a pamay-an a mangipalubos kenka a makaala ti pagarigan ti tab a nainaig iti maysa nga elemento ti DOM, wenno mangpartuat ti baro no kas pagarigan saan a nairugi

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

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

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