Navs leh tabs te a awm

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

He page ah hian

Base nav a ni

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 — pagetuna page atana value hmangin, emaw, trueset-a item awm mek atan emaw.

html tih a ni

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

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.

html tih a ni

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

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.

html tih a ni

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

Right-aligned a ni a, a hnuaia mi ang hian .justify-content-end:

html tih a ni

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

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

html tih a ni

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

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

html tih a ni

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

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 .

html tih a ni

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

Pills te pawh a awm

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

html tih a ni

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

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

html tih a ni

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

-based navigation i hman hian styling elements atan chauh a mamawh angin <nav>him takin i paih thei ang..nav-item.nav-link<a>

html tih a ni

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

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 tin hi a zau zawng inang vek a ni ang.

html tih a ni

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

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

html tih a ni

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

Flex utilities hmanga hnathawh

Responsive nav variation i mamawh chuan flexbox utilities series hman hi 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.

html tih a ni

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

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 visual style pawh nise , , emaw attribute emaw pek loh tur tih hre reng ang che. Hengte hi ARIA Authoring Practices Guide tabs pattern -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

html tih a ni

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

Pills leh dropdown te

html tih a ni

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

Variables te pawh a awm

v5.2.0 ah dah belh a ni

Bootstrap-in CSS variables approach a kalpui mek zingah hian navs te chuan local CSS variables chu .nav, .nav-tabs, ah leh .nav-pillsreal-time customization tihchangtlunna atan an hmang ta a ni. CSS variable hrang hrangte tana value te hi Sass hmanga set a nih avangin Sass customization pawh a la support reng bawk.

.navBase class-ah chuan :

  --#{$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};

.nav-tabsModifier class chungchangah chuan :

  --#{$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};

.nav-pillsModifier class chungchangah chuan :

  --#{$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 a danglam thei

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

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.

Hei hi Home tab-a placeholder content thenkhat a ni. Tab dang click chuan he tab visibility chu a dang atan a toggle ang. Tab JavaScript hian class hrang hrang a inthlak a, content visibility leh styling 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.

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>

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.

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>

Tabs plugin hian pills nen pawh a thawk thei bawk.

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>

Tin, vertical pills nen pawh. A tha ber chu vertical tab tan aria-orientation="vertical"chuan tab list container ah pawh i dah tel tur a ni.

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>

A thlen theihna tur

Dynamic tabbed interfaces, ARIA Authoring Practices Guide tabs pattern -a tarlan angin , an structure, functionality, leh current state te chu 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.

ARIA Authoring Practices pattern nen inmil takin, tuna active tab chauh hian keyboard focus a dawng a ni. JavaScript plugin chu initialize a nih chuan tabindex="-1"inactive tab control zawng zawngah a set vek ang. Tuna active tab hian focus a neih hnuah cursor keys te chuan previous/next tab chu a activate a, plugin chuan rovingtabindex chu a thlak danglam ang. Mahse, JavaScript plugin hian cursor key inzawmna chungchangah chuan horizontal leh vertical tab list a thliar hrang lo tih hre reng ang che: tab list-a orientation eng pawh ni se, up leh left cursor pahnih chu tab hmasaah an kal a, down leh right cursor-ah te an kal bawk a dawt leh tab chu a rawn lang leh ang.

A tlangpuiin, keyboard navigation awlsam zawka kalpui theih nan tab panel-te ngei pawh focusable-a siam a tha a, tab panel chhunga awmze nei thil awm element hmasa ber chu focusable a nih tawh loh chuan. tabindex="0"JavaScript plugin hian he lam hawi hi a buaipui a tum lo—a remchan dan angin, i markup-a dah belhin i tab panel-te chu chiang taka focusable-a siam a ngai ang .

Tab JavaScript plugin hian dropdown menu awmna tabbed interface a support lo a , hengte 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.

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

JavaScript hmangin

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

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

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

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

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

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 .

I content chu tab element angin a activate thin.

Constructor hmangin tab instance i siam thei a, entirnan:

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

Tihdan	Hrilhfiahna
`dispose`	Element pakhat tab a tichhia.
`getInstance`	Static method hmanga DOM element nena inzawm tab instance hmuh theihna tur, hetiang hian i hmang thei ang: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Static method chu DOM element nena inzawm tab instance rawn pe chhuak emaw, initialized a nih loh chuan a thar siam emaw a ni. Hetiang hian i hmang thei ang: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	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 tak`shown.bs.tab` hmain (chu chu event a thlen hmain ) caller hnenah a kir leh thin.

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 lo a nih chuan hide.bs.taband hidden.bs.tabevents chu a fire dawn lo.

Event chi hrang hrang	Hrilhfiahna
`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`
`show.bs.tab`	He event hi tab show-ah a fire a, mahse tab thar a lan hmain a fire thin. Active tab leh active tab hmasa (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 active tab hmasa (a awm chuan) te target turin `event.target`and hmang ang che .`event.relatedTarget`

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