in English

Navs fɔ di wan dɛn we de

Dokumɛnt ɛn ɛgzampul dɛn fɔ aw fɔ yuz Bootstrap in inklud nevigishɔn kɔmpɔnɛnt dɛn.

Base nav

Navigishɔn we de na Bootstrap sheb jenɛral mak ɛn stayl dɛn, frɔm di bays .navklas to di aktif ɛn disabled stet dɛn. Swap modifya klas fɔ swich bitwin ɛni stayl.

Di bays .navkɔmpɔnɛnt dɛn bil wit fleksbɔks ɛn i de gi wan strɔng fawndeshɔn fɔ bil ɔl kayn nevigishɔn kɔmpɔnɛnt dɛn. I inklud sɔm stayl ɔvarayd dɛn (fɔ wok wit list dɛn), sɔm link pad fɔ big hit eria dɛn, ɛn besik disabled stayl.

Di bays .navkɔmpɔnɛnt nɔ de inklud ɛni .activestet. Di ɛgzampul dɛn we de kam biɛn ya gɛt di klas, mɔ fɔ sho se dis patikyula klas nɔ de trig ɛni spɛshal stayl. 
<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>

Klas dɛn de yuz ɔlsay, so yu mak kin bi supa fleksibul. Yuz <ul>s lɛk ɔp, <ol>if di ɔda we aw yu tin dɛn de impɔtant, ɔ rol yu yon wit wan <nav>ɛlimɛnt. Bikɔs di .navyuz display: flexdɛn , di nav link dɛn de biev di sem we aw di nav tin dɛn go biev, bɔt we nɔ gɛt di ɛkstra mak.

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

Stayl dɛn we de

Chenj di stayl fɔ .navs kɔmpɔnɛnt wit modifya ɛn yutiliti. Miks ɛn mach as nid de, ɔ bil yu yon.

Ɔrizɔntal alaynɛshɔn

Chenj di ɔrizɔntal alaynɛshɔn fɔ yu nav wit flexbox yutiliti dɛn . Bay difɔlt, nav dɛn de alaynɛd ​​na di lɛft, bɔt yu kin chenj dɛn izi wan to sɛnt ɔ rayt alaynɛd.

Sɛntral wit .justify-content-center: .

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

Rayt-alayn wit .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>

Ɔp ɛn dɔŋ

Stak yu nevigishɔn bay we yu chenj di fleks aytem dairekshɔn wit di .flex-columnyutiliti. Nid fɔ stak dɛn na sɔm viewport dɛn bɔt nɔto ɔda wan dɛn? Yuz di vɛshɔn dɛn we de ansa (ɛgz., .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>

As ɔltɛm, vertikal nevigishɔn pɔsibul witout <ul>s, tu.

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

Tab dɛn

Tek di besik nav frɔm ɔp ɛn ad di .nav-tabsklas fɔ jenarayz wan tab intafays. Yuz dɛn fɔ mek tab rijyɔn dɛn wit wi tab JavaSkript plɔgin .

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

Pils dɛn we dɛn kin gi

Tek da sem HTML de, bɔt yuz .nav-pillsinsted:

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

Fil ɛn jɔstify

Fos yu .nav's kɔntinyu fɔ ɛkstɛnd di ful avaylabl wit wan pan tu modifya klas dɛn. Fɔ ful-ɔp ɔl di ples we de wit yu .nav-items di rayt we, yuz .nav-fill. Notis se ɔl di ɔrizɔntal spɛs de ɔkup, bɔt nɔto ɔl nav aytem gɛt di sem wit.

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

We yu de yuz <nav>-based nevigishɔn, yu kin sef wan ɔmit .nav-itemas .nav-linkna fɔ stayl <a>ɛlimɛnt dɛn nɔmɔ nid.

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

Fɔ ikwal-wid ɛlimɛnt dɛn, yuz .nav-justified. Ɔl di ɔrizɔntal spɛs go gɛt nav link dɛn, bɔt nɔ lɛk di wan dɛn we de .nav-fillɔp, ɛvri nav aytem go gɛt di sem wit.

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

Semweso lɛk di .nav-fillɛgzampul we de yuz wan <nav>-based nevigishɔn.

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

Wok wit fleks yutiliti

If yu nid responsive nav variations, tink bɔt fɔ yuz wan siriɔs flexbox utilities . Wail mɔ verbose, dɛn yutiliti ya de gi big kɔstɔmayshɔn akɔdin to rispɔnsiv brekpɔynt dɛn. Insay di ɛgzampul we de dɔŋ ya, wi nav go stak na di brek pɔynt we smɔl pas ɔl, dɔn adap to wan ɔrizɔntal layout we de ful di wit we de stat frɔm di smɔl brek pɔynt.

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

Fɔ tɔk bɔt aw fɔ ebul fɔ go de

If yu de yuz navs fɔ gi wan nevigishɔn bar, mek shɔ se yu ad a role="navigation"to di mɔs lɔjik mama ɛn papa kɔntena fɔ di <ul>, ɔ rap wan <nav>ɛlimɛnt rawnd di wan ol nevigishɔn. Nɔ ad di wok to di <ul>sɛf, bikɔs dis go mek dɛn nɔ anɔys am as rial list bay ɛp tɛknɔlɔji dɛn.

Notis se nevigishɔn bar dɛn, ivin if dɛn stayl dɛn we dɛn de si lɛk tab dɛn wit di .nav-tabsklas, dɛn nɔ fɔ gi dɛn role="tablist", role="tab"ɔ role="tabpanel"atribyut dɛn. Dis na onli aprכpriet fכ dinamik tab intafeys, lεk aw dεn dεskrεb am na di ARIA Authoring Practices Guide tab patεn . Si JavaSkript bihayvya fɔ dinamik tab intafeys dɛn na dis sɛkshɔn fɔ ɛgzampul.

Yuz di drɔpdɔwn dɛn

Ad drɔpdɔwn mɛnyu dɛn wit smɔl ɛkstra HTML ɛn di drɔpdɔwn dɛn JavaSkript plɔgin .

Tab dɛn we gɛt drɔp-dɔwn dɛn

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

Pils wit dropdowns

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

JavaSkript bihayvya

Yuz di tab JavaSkript plɔgin—inklud am wan wan ɔ tru di bootstrap.jsfayl we dɛn dɔn kɔmpilayt—fɔ ɛkstɛnd wi nevigishɔn tab ɛn pils dɛn fɔ mek tab pan dɛn fɔ lokal tin dɛn.

If yu de bil wi JavaSkript frɔm sɔs, i nid fɔutil.js .

Daynamik tab intafeys, as dɛn diskrayb am na di ARIA Ɔtorin Praktis Gɛd tab patɛn , nid role="tablist", role="tab", role="tabpanel", ɛn ɔda aria-atribyut dɛn fɔ mek dɛn ebul fɔ gi dɛn strɔkchɔ, funkshɔnaliti ɛn di stet we dɛn de naw to di wan dɛn we de yuz ɛp tɛnkɔlɔji dɛn (lɛk skrin rida dɛn). As di bɛst we fɔ du tin, wi kin advays yu fɔ yuz <button>ɛlimɛnt dɛn fɔ di tab dɛn, bikɔs dɛn tin ya na kɔntrol dɛn we de mek chenj chenj, pas fɔ yuz link dɛn we de go na nyu pej ɔ ples.

Notis se di tab JavaSkript plɔgin nɔ de sɔpɔt tab intafays dɛn we gɛt drɔpdɔwn mɛnyu dɛn, bikɔs dɛn tin ya kin mek yu yuz ɛn aksesibiliti prɔblɛm dɛn. Frɔm wan yusabiliti pɔynt, di tru tin se di tab we de sho naw in trig ɛlimɛnt nɔ de si wantɛm wantɛm (as i de insay di drɔpdɔwn mɛnyu we dɛn lɔk) kin mek pipul dɛn kɔnfyus. Frɔm wan aksesibiliti pɔynt fɔ si, naw, nɔ sɛnsful we nɔ de fɔ map dis kayn kɔnstrɔkshɔn to wan standad WAI ARIA patɛn, we min se dɛn nɔ go ebul fɔ mek am izi fɔ mek pipul dɛn we de yuz ɛp tɛknɔlɔji dɛn ɔndastand am izi wan.

Pleshɔlda kɔntinyu fɔ di tab panɛl. Dis wan gɛt fɔ du wit di tab we de na di os. Tek yu mayl hai, so hai, 'cos shi get dat wan intanashona smayl. Wan strenja de na mi bed, wan paund de na mi ed. Oh, nɔto so. Na ɔda layf a go mek yu de de. ‘Couse mi, a ebul fɔ du ɛnitin. Suiting up fɔ mi krawn batɛl. Yus fɔ tif yu mama ɛn papa dɛn rɔm ɛn klaym go na di ruf. Tone, tan fit en redi, turn it up cause its gettin' hevi. In lɔv tan lɛk drɔgs. A tink se a fɔgɛt se a gɛt fɔ disayd fɔ du sɔntin.

Pleshɔlda kɔntinyu fɔ di tab panɛl. Dis wan gɛt fɔ du wit di tab we de na di prɔfayl. Yu bin gɛt di bɛst akitɛkɛt. Paspɔt stamp, na kɔsmopɔlit. Fayn, fresh, faya, wi get am pan lok. Neva plan se wan de a go de los yu. I de it yu at kɔmɔt. Yu kis na kosmik, evri muv na majik. I min di wan dɛn, a min lɛk se na di wan. Gritin di wan dɛn we wi lɛk lɛ wi tek wan joyn. Jɔs ɔna di nɛt lɛk di 4 dez insay Julay! Bɔt yu go lɛk fɔ west.

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>

Fɔ ɛp fɔ fit yu nid, dis de wok wit <ul>-based mak, lɛk aw dɛn sho ɔp, ɔ wit ɛni arbitrary “roll your own” mak. Notis se if yu de yuz <nav>, yu nɔ fɔ ad role="tablist"dairekt to am, bikɔs dis go ɔvalayz di ɛlimɛnt in nativ wok as nevigishɔn landmak. Bifo dat, chenj to ɔda ɛlimɛnt (insay di ɛgzampul we de dɔŋ ya, wan simpul <div>) ɛn rap di wan dɛn we de <nav>rawnd am.

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

Di tabs plɔgin de wok bak wit pils.

Pleshɔlda kɔntinyu fɔ di tab panɛl. Dis wan gɛt fɔ du wit di tab we de na di os. Tek yu mayl hai, so hai, 'cos shi get dat wan intanashona smayl. Wan strenja de na mi bed, wan paund de na mi ed. Oh, nɔto so. Na ɔda layf a go mek yu de de. ‘Couse mi, a ebul fɔ du ɛnitin. Suiting up fɔ mi krawn batɛl. Yus fɔ tif yu mama ɛn papa dɛn rɔm ɛn klaym go na di ruf. Tone, tan fit en redi, turn it up cause its gettin' hevi. In lɔv tan lɛk drɔgs. A tink se a fɔgɛt se a gɛt fɔ disayd fɔ du sɔntin.

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>

Ɛn wit vertikal pils dɛn.

Pleshɔlda kɔntinyu fɔ di tab panɛl. Dis wan gɛt fɔ du wit di tab we de na di os. Saw yu downtown de sing di Blues. Wach yu de sɛrkɛl di dreyn. Wetin mek yu nɔ de mek a stɔp? Hevi na di ed we de wɛr di krawn. Yɛs, wi de mek enjɛl dɛn kray, ɛn ren de kam dɔŋ na di wɔl frɔm ɔp. Wanna si di sho in 3D, wan fim. Yu eva fil, fil so pepa thin. Na yes ɔ nɔ, nɔ sɔntɛm.

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>

Yuz data atribyut dɛn

Yu kin aktiv wan tab ɔ pil nevigishɔn we yu nɔ rayt ɛni JavaSkript bay we yu jɔs spɛsifa data-toggle="tab"ɔ data-toggle="pill"pan wan ɛlimɛnt. Yuz dɛn data atribyut dɛn ya na .nav-tabsɔ .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>

Yu kin yuz JavaSkript fɔ yuz am

Enable tabable tabs via JavaScript (ɛni tab nid fɔ aktiv wan wan):

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

Yu kin aktiv wan wan tab dɛn difrɛn we dɛn:

$('#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 effekt we yu de du

Fɔ mek di tab dɛn go fayn, ad .fadeto ɛni wan pan dɛn .tab-pane. Di fɔs tab pan fɔ gɛt bak .showfɔ mek di fɔs tin we de insay de sho.

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

Di we aw dɛn de du am

Asynchronous mεtכd dεm εn transishכn dεm

Ɔl di API mɛtɔd dɛn na asynchronous ɛn dɛn kin stat wan transishɔn . Dɛn kin go bak to di pɔsin we kɔl am jɔs lɛk aw dɛn bigin fɔ chenj bɔt bifo i dɔn . Apat frɔm dat, dɛn go ignore wan mɛtɔd kɔl pan wan transishɔn kɔmpɔnɛnt .

Si wi JavaSkript dɔkyumentri fɔ no mɔ .

$().tab fɔ di wan dɛn

Aktiv wan tab ɛlimɛnt ɛn kɔntinyu kɔntena. Tab fɔ gɛt wan data-targetɔ, if yu de yuz link, wan hrefatribyut we de tɔch wan kɔntena node na di DOM.

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

Pik di tab we dɛn gi ɛn sho di say we gɛt fɔ du wit am. Ɛni ɔda tab we dɛn bin dɔn pik bifo tɛm nɔ kin pik ɛn di pan we gɛt fɔ du wit am kin ayd. Ritɔn to di pɔsin we kɔl bifo dɛn rili sho di tab pan (dat na bifo di shown.bs.tabtin apin).

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

.tab('dispɔz') .

Destroy wan element in tab.

Di tin dɛn we kin apin

We yu de sho nyu tab, di tin dɛn we de apin de faya insay di ɔda we we de dɔŋ ya:

  1. hide.bs.tab(na di tab we de wok naw)
  2. show.bs.tab(na di tab we dɛn go sho)
  3. hidden.bs.tab(na di fɔs aktif tab, di sem wan we bin de fɔ di hide.bs.tabivin)
  4. shown.bs.tab(na di nyu-aktiv tab we jɔs sho, di sem wan we de fɔ di show.bs.tabivin)

If no tab nɔ bin dɔn ɔlrɛdi aktif, den di hide.bs.tabɛn hidden.bs.tabivin dɛn nɔ go faya.

Di kayn tin we apin Tɔk bɔt
sho.bs.tab fɔ sho Dis ivent de faya pan tab sho, bɔt bifo dɛn dɔn sho di nyu tab. Yuz event.targetɛn event.relatedTargetfɔ tɔch di aktiv tab ɛn di aktiv tab we bin de bifo (if i de) rispɛktful wan.
we dɛn sho.bs.tab Dis ivent de faya pan tab sho afta dɛn dɔn sho wan tab. Yuz event.targetɛn event.relatedTargetfɔ tɔch di aktiv tab ɛn di aktiv tab we bin de bifo (if i de) rispɛktful wan.
ayd.bs.tab fɔ di wan dɛn we de Dis ivent de faya we dɛn fɔ sho nyu tab (ɛn so di fɔs aktif tab fɔ ayd). Yuz event.targetɛn event.relatedTargetfɔ tɔch di tab we de wok naw ɛn di nyu tab we go aktiv jisnɔ, rispɛktful wan.
di tab we dɛn ayd.bs Dis ivent de faya afta dɛn dɔn sho nyu tab (ɛn so di fɔs aktif tab de ayd). Yuz event.targetɛn event.relatedTargetfɔ tɔch di fɔs aktif tab ɛn di nyu aktif tab, rispɛktful wan. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})