Source

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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

We yu de yuz <nav>-based nevigishɔn, mek shɔ se yu put .nav-itemam na di ankɔ dɛn.

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

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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Semweso lɛk di .nav-fillɛgzampul we de yuz <nav>-based nevigishɔn, mek shɔ se yu put .nav-itemam na di ankɔ dɛn.

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

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" href="#" tabindex="-1" aria-disabled="true">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 as 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 dεm, lεk aw dεn dεskrεb am na di WAI ARIA Authoring Practices . 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-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>

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

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ɔ di lokal tin dɛn, ivin bay we yu yuz drɔpdɔwn mɛnyu dɛn.

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

Daynamik tab intafeys dɛn, as dɛn tɔk bɔt am na di WAI ARIA Ɔtorin Praktis dɛ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).

Notis se dinamik tab intafeys dɛn nɔ fɔ gɛt drɔpdɔwn mɛnyu dɛn, bikɔs dis kin mek dɛn gɛt prɔblɛm dɛn fɔ yuz ɛn fɔ yuz am. 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.

Raw denim yu probabli noh yehri boht dem jean shorts Austin. Nesciunt tofu stumptown aliqua, retro sint masta klin. Mustache kliche tempor, wiliamsbɔg karls vegan ɛlvɛtika. Reprehenderit butcher retro keffiyeh drim kat sint. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip plesat salvia cillum iphone. Seitan aliquip quis kardigan american klos, butcher 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>

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

Di tabs plɔgin de wok bak wit pils.

Konsekwat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt ofisia. Fugiat velit proident aliquip nisi incididunt nostrud eksasaiz proident est nisi. Irure magna elit komodo anim ex veniam kulpa eiusmod id nostrud sidon cupidat in veniam ad. Eiusmod consequat eu adipisisin minim animal alikwip kupidat kulpa ɛksɛptɔ quis. Occaecat sidon eu eksasaiz 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>

Ɛn wit vertikal pils dɛn.

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit ɛksɛptɔr labɔrum qui. Id id reprehenderit sit est eu aliqua occaecat quis ɛn velit ɛksɛptɔr labɔrum mɔlit dolɔr eiusmod. Ipsum dolor in occaecat komodo ɛn voluptate minim reprehenderit mollit pariatur. Deserunt non labourum enim et cillum eu deserunt ekseptɔr ea incididunt minim ɔccaecat.

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>

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

Yu kin yuz JavaSkript fɔ yuz am

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

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

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

$('#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 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 dɛn 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 ɛni wan pan wan data-targetɔ wan hrefwe de tɔch wan kɔntena node na di DOM.

<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('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. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})