Source

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

<nav>-based navigation i hman .nav-itemhian anchor-ah te pawh telh ngei ngei tur a ni.

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item 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" 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 , anchor-ah te pawh telh ngei ngei tur a ni.<nav>.nav-item

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item 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" 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 .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-haspopup="true" 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" 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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

JavaScript tih dan tur

Tab JavaScript plugin hmang la—a mal emaw, compiled bootstrap.jsfile hmangin emaw telh la—kan navigational tab leh pills te chu tizau la, local content tabbable pane siam la, dropdown menu hmang pawhin.

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

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-

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.

Raw denim i la hre lo mai thei jean shorts Austin. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. Retro synth master cleanse. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. A rilru a buai em em a, a rilru a hah em em bawk a. dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid a ni a, a man pawh a tlawm hle. A rilru a buai em em a, a rilru a hah em em bawk a. salvia cillum iphone. Seitan aliquip quis cardigan american thawmhnaw, sa thattu voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </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">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </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.

A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a. id nostrud sit cupidat in veniam ad. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. A rilru a buai em em a, a rilru a hah em em bawk a. Occaecat sit eu exercise irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </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.

A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a. Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit tih loh chu laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis leh velit tih loh chu laborum mollit dolore eiusmod tih loh chu. Ipsum dolor in occaecat commodo leh voluptate tlem ber reprehenderit mollit pariatur. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a. ea incididunt minim occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </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">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').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 DOM ah container node targeting a data-targetemaw a nei tur a ni.href

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').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 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})