in English

Navs a ni

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

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

<nav class="nav">
  <a class="nav-link active" 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.

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

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

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

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

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

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

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" 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 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" 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>

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" 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 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" 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 visually 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 inmil a ni. Entirna atan he section-a dynamic tabbed interface-te tana JavaScript behavior en rawh .role="tablist"role="tab"role="tabpanel"

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

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

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.

Kan JavaScript hi source atanga i siam a nih chuanutil.js .

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.

Tab JavaScript plugin hian dropdown menu awmna tabbed interface a support lo tih hre reng ang che , 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.

Tab panel atan placeholder awm tur a awm. Hei hi home tab nen a inzawm a ni. Miles sang tak tak, a sang em em a, 'cause she's got that one international smile. Ka khumah chuan mi hriat loh pakhat a awm a, ka lu-ah chuan pounding a awm a. Aw, ni lo. Nun dangah chuan ka awm tir ang che. ‘Cause kei, engkim ka thiam a ni. Ka lallukhum khumna indona atan chuan a suiting up. I nu leh pa zu rukbo a, inchung thlenga lawn thin. Tone, tan fit leh ready, turn up cause a gettin' heavy. A hmangaihna chu ruihhlo ang mai a ni. Duhthlan tur ka nei tih ka theihnghilh tawh niin ka ring.

Tab panel atan placeholder awm tur a awm. Hei hi profile tab nen a inzawm a ni. Architecture tha ber ber i hmu a. Passport stamp, cosmopolitan tak a ni. Fine, fresh, fierce, lock-ah kan hmu a. Ni khat chu ka hloh dawn che tih ka ruahman ngai lo. I thinlung a ei chhuak vek. I kiss chu cosmic a ni a, move tinreng chu magic a ni. Ka sawi tum chu a ni, ka sawi tum chu amah ang mai a ni. Hmangaihte chibai ka buk a che u. July ni 4 ang zan chu nei mai rawh! Mahse, khawhral mai mai i duh zawk.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

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

Tab panel atan placeholder awm tur a awm. Hei hi home tab nen a inzawm a ni. Miles sang tak tak, a sang em em a, 'cause she's got that one international smile. Ka khumah chuan mi hriat loh pakhat a awm a, ka lu-ah chuan pounding a awm a. Aw, ni lo. Nun dangah chuan ka awm tir ang che. ‘Cause kei, engkim ka thiam a ni. Ka lallukhum khumna indona atan chuan a suiting up. I nu leh pa zu rukbo a, inchung thlenga lawn thin. Tone, tan fit leh ready, turn up cause a gettin' heavy. A hmangaihna chu ruihhlo ang mai a ni. Duhthlan tur ka nei tih ka theihnghilh tawh niin ka ring.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

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

Tab panel atan placeholder awm tur a awm. Hei hi home tab nen a inzawm a ni. Khawpui chhungah Blues hla sak lai ka hmu a. Drain i circle lai chu en rawh. Engvangin nge min chawlh tir loh? Lullukhum khumtu lu chu a rit a ni. Ni e, vântirhkohte kan ṭap a, chung lam aṭangin leiah ruah a sur ṭhin. 3D-a show en duh tan, movie a ni. I hre ngai em, chutiang paper thin angin i hria em. A ni emaw, ni lo emaw a ni mai thei.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

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

Data attribute hmanga thil tih dan

JavaScript engmah ziak lovin tab emaw pill navigation emaw chu element pakhat specify data-toggle="tab"emaw on emaw mai mai hmangin i activate thei a ni. data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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):

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

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

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third 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 .

$().tab ah hian a awm

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

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab(' entir') tih a ni.

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.

$('#someTab').tab('show')

.tab('paih') tih a ni.

Element pakhat tab a tichhia.

Thil thlengte

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

  1. hide.bs.tab(tuna active tab-ah hian)
  2. show.bs.tab(to-be-shown tab-ah chuan)
  3. hidden.bs.tab(active tab hmasaah khan hide.bs.tabevent atana hman ang chiah kha)
  4. 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.

Thil thleng chi hrang hrang Hrilhfiahna
show.bs.tab ah hian a awm 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.targetand hmang ang che .event.relatedTarget
tih a ni.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.targetand hmang ang che .event.relatedTarget
hide.bs.tab ah hian a awm 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.targetand hmang ang che .event.relatedTarget
thup.bs.tab ah hian a awm 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.targetand hmang ang che .event.relatedTarget 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})