Navs leh tabs te a awm

Bootstrap-a navigation component awmte hman dan tur documentation leh entirnan.

He page ah hian

Base nav

Bootstrap-a navigation awmte hian general markup leh style hrang hrang an share a, base .navclass atanga active leh disabled state thlengin an share a ni. Style tin inthlak danglam turin modifier class hrang hrang swap rawh.

Base .navcomponent hi flexbox hmanga siam a ni a, navigation component chi hrang hrang siamna tur lungphum nghet tak a pe a ni. Style override thenkhat (list nena hnathawhna tur), hit area lian zawk tan link padding thenkhat, leh basic disabled styling te a awm bawk.

Base component hian state .navengmah a huam lo . .activeA hnuaia entirnan hian class hi a tel a, a bik takin he class bik hian special styling engmah a tichhuak lo tih lantir nan a ni.

Active state chu assistive technology-te hnena thlen tur chuan aria-currentattribute hmang la — pagecurrent page atan value hmangin, emaw trueset-a item awm mek atan emaw.

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

Class hi hman vek a nih avangin i markup chu super flexible a ni thei. <ul>A chunga kan sawi ang khan s hmang la , <ol>i thil order pawimawh a nih chuan, a nih loh leh <nav>element hmangin nangmah ngeiin roll rawh. A chhan chu .navuses display: flex, nav links te hian nav items te ang bawkin an che thin a, mahse extra markup awm lovin.

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

Style awm thei te

.navModifier leh utilities hmangin s component style thlak rawh . A tul angin mix leh match la, a nih loh leh nangmah ngeiin siam rawh.

Horizontal a awm theih nan

I nav horizontal alignment chu flexbox utilities hmangin thlak rawh . Default-ah chuan navs hi left-aligned a ni a, mahse awlsam takin center emaw right aligned emaw-ah i thlak thei bawk.

Centered ah hian .justify-content-center: 1.1.

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

Right-aligned a ni a, a hnuaia mi ang hian .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>

Ding ngil

.flex-columnUtility hmangin flex item direction thlak la, i navigation chu stack rawh . Viewport thenkhatah stack a ngai a, thenkhatah erawh stack a ngai lo em ni? Responsive version te hmang la (eg, .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>

A hma ang bawkin vertical navigation pawh <ul>s tel lo chuan a theih bawk.

<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 te a awm

A chung atang chuan basic nav a la a, .nav-tabsclass chu a dah belh a, tabbed interface a siam ang. Kan tab JavaScript plugin hmangin tabbable region siam nan hmang rawh .

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

Pills te pawh a awm

Chu HTML tho chu la la, mahse chu .nav-pillsai chuan hmang zawk rawh:

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

Fill leh justify rawh

Force your .nav's contents chu modifier class pahnih zinga pakhata full available width extend turin force rawh. I .nav-items hmanga hmun awm zawng zawng chu a zatvea khat tur chuan .nav-fill. Horizontal space zawng zawng luah vek a ni tih hre reng ang che, mahse nav item zawng zawng hian width inang an nei vek lo.

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

-based navigation i hman hian styling elements atan chauh a mamawh angin <nav>him takin i paih thei ang..nav-item.nav-link<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Equal-width elements tan chuan .nav-justified. Horizontal space zawng zawng chu nav link in a luah vek ang a, mahse a .nav-fillchunga kan sawi ang lo takin nav item zawng zawng hi a zau zawng inang vek a ni ang.

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

-based navigation .nav-fillhmanga entir ang bawkin .<nav>

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

Flex utilities hmanga hnathawh

Responsive nav variation i mamawh chuan flexbox utilities series hman ngaihtuah rawh . Verbose zawk mahse, heng utility te hian responsive breakpoint hrang hrangah customization nasa zawk an pe a ni. A hnuaia entirnan hian kan nav chu breakpoint hniam ber ah stack a ni ang a, chutah chuan breakpoint te tak te atanga tan in width awmsa luah khat thei horizontal layout ah adapt a ni ang.

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

Accessibility chungchangah

Navs hmangin navigation bar i pe a nih chuan , a role="navigation"logical ber parent container-ah a dah ngei ngei tur a ni a, a nih loh leh navigation pumpuiah element pakhat <ul>wrap la . <nav>Role chu a mah ngeiah belh suh <ul>, hei hian assistive technology-te’n list tak tak anga an puan theih loh nan.

Navigation bars, .nav-tabsclass nena tab anga visually style pawh nise , , emaw attribute emaw pek loh tur tih hre reng ang che. Hengte hi WAI ARIA Authoring Practices -a tarlan angin, dynamic tabbed interface-te tan chauh a remchang a ni. Entirna atan he section-a dynamic tabbed interface-te tana JavaScript behavior en rawh . Kan JavaScript hian active tab-a add-in state thlan chu a handle avangin dynamic tabbed interface-ah chuan attribute hi a ngai lo .role="tablist"role="tab"role="tabpanel" aria-currentaria-selected="true"

Dropdown hmangin

Dropdown menu te chu HTML tlem tal extra leh dropdowns JavaScript plugin te nen add rawh .

Tabs ah hian dropdown a awm bawk

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

Pills leh dropdown te

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

Variables te pawh a awm

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

JavaScript tih dan tur

Tab JavaScript plugin hmang la—a mal emaw, compiled file kaltlangin emaw telh la bootstrap.js—kan navigational tab leh pills te chu tizau la, local content tabbable pane siam rawh.

Dynamic tabbed interfaces, WAI ARIA Authoring Practices -a tarlan angin , an structure, functionality leh current state assistive technology (screen reader ang chi) hmangtute hnena thlen theih nan , , , leh attribute role="tablist"dang role="tab"a role="tabpanel"mamawh a ni. aria-Thil tih dan tha ber angin, tab-te tan element hman kan rawt a <button>, hengte hi dynamic change tichhuaktu control an nih avangin, page thar emaw hmun thara kal theihna link ai chuan.

Dynamic tabbed interface-ah hian dropdown menu a awm tur a ni lo tih hre reng ang che , hei hian usability leh accessibility chungchangah harsatna a thlen vek a ni. Usability lam atanga thlir chuan tuna kan tarlan tab-a trigger element chu a lang nghal lo (closed dropdown menu chhunga a awm avangin) hian buaina a siam thei a ni. Accessibility lam atanga thlir chuan tunah hian hetiang ang construct hi standard WAI ARIA pattern-a map theihna tur kawng awmze nei tak a awm lo a, chu chu assistive technology hmangtute tan awlsam taka hriatthiam theiha siam theih a ni lo tihna a ni.

Hei hi Home tab-a placeholder content thenkhat a ni. Tab dang click chuan he pakhat visibility chu a dang atan a toggle ang. Tab JavaScript hian class hrang hrang a inthlak a, chu chuan content visibility leh styling a control a ni. Tab, pills, leh .nav-powered navigation dang eng pawh nen i hmang thei bawk.

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>

I mamawh phuhrukna tura pui turin, hei hian <ul>-based markup hmangin a thawk a, a chunga kan hmuh ang hian, emaw, duh duh “roll your own” markup eng pawh hmangin a thawk thei a ni. Hriat tur chu <nav>, i hman chuan direct-a i dah tur a ni lo role="tablist", hei hian element-a native role chu navigation landmark anga a override dawn avangin. Chu ai chuan element dang (a hnuaia entirnan, simple <div>)-ah switch la, a chhehvel chu wrap <nav>rawh.

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

Tabs plugin hian pills nen pawh a thawk thei bawk.

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

Tin, vertical pills nen pawh.

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>

Data attribute hmanga thil tih dan

JavaScript engmah ziak lovin tab emaw pill navigation emaw chu element pakhat specify data-bs-toggle="tab"emaw on emaw mai mai hmangin i activate thei a ni. data-bs-toggle="pill"Heng data attribute te hi .nav-tabsor ah hmang rawh .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>

JavaScript hmangin

JavaScript hmangin tabbable tab te chu enable rawh (tab tin hi a hranin activate a ngai a ni):

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

Tab hrang hrangte chu kawng hrang hrangin i activate thei ang:

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

Fade effect a awm bawk

Tabs fade in siam tur chuan, pakhat zel ah add .faderawh .tab-pane. Tab pane hmasa ber pawhin .showa bul tanna thu awm chu hmuh theih turin a siam a ngai bawk.

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

Thiltih dan tur

Asynchronous method leh inthlak danglamna te

API method zawng zawng hi asynchronous a ni a , transition a tan vek a ni . Transition an tan veleh mahse a tawp hmain call tu hnenah an kir leh thin . Chu bakah, transitioning component-a method call chu ngaihthah a ni ang .

Hriat belh duh chuan kan JavaScript documentation en rawh .

constructor

Tab element leh content container pakhat a activate thin. Tab hian DOM chhunga container node target tur attribute data-bs-targetemaw, link hman a nih chuan attribute emaw a nei tur a ni.href

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

lantir

Tab pek chu thlang la, a kaihhnawih pane chu a rawn tarlang ang. A hmaa tab dang thlan tawh zawng zawng chu thlan loh a ni a, a kaihhnawih pane chu a thup vek a ni. Tab pane a lan tak takshown.bs.tab hmain (chu chu event a thlen hmain ) caller hnenah a kir leh thin.

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

  tab.show()

paih chhuak rawh

Element pakhat tab a tichhia.

GetInstance tih a ni

Static method hmanga DOM element nena inzawm tab instance hmuh theihna tur

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

GetOrCreateInstance tih theih a ni

Static method hmangin DOM element nena inzawm tab instance chu i hmu thei a, a nih loh leh initialised a nih loh chuan a thar siam theih a ni bawk

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

Thil thlengte

Tab thar kan lantir hian events te chu a hnuaia mi ang hian a rawn fire thin:

hide.bs.tab(tuna active tab-ah hian)
show.bs.tab(to-be-shown tab-ah chuan)
hidden.bs.tab(active tab hmasaah khan hide.bs.tabevent atana hman ang chiah kha)
shown.bs.tab(active thar-a just-shown tab-ah chuan, show.bs.tabevent atana hman ang chiah kha)

Tab active tawh loh chuan hide.bs.taband hidden.bs.tabevents chu a fire dawn lo.

Event chi hrang hrang	Hrilhfiahna
`show.bs.tab`	He event hi tab show-ah a fire a, mahse tab thar a lan hmain a fire thin. Active tab leh a hmaa active tab (a awm chuan) te target turin `event.target`and hmang ang che .`event.relatedTarget`
`shown.bs.tab`	He event hi tab pakhat a lan hnuah tab show ah a fire thin. Active tab leh a hmaa active tab (a awm chuan) te target turin `event.target`and hmang ang che .`event.relatedTarget`
`hide.bs.tab`	He event hi tab thar entir tur a nih hunah a fire thin (chutiang chuan a hmaa active tab kha thup tur a ni). Tuna active tab leh soon-to-be-active tab thar chu target turin `event.target`and hmang ang che .`event.relatedTarget`
`hidden.bs.tab`	He event hi tab thar a lan hnuah a fire a (chutiang chuan a hmaa active tab kha a thup a ni). Active tab hmasa leh active tab thar target turin `event.target`and hmang ang che .`event.relatedTarget`

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