Navs

Nwoma ne nhwɛsoɔ a ɛfa sɛdeɛ wɔde Bootstrap no akwantuo afã a ɛka ho no bedi dwuma.

Base nav

Navigation a ɛwɔ Bootstrap mu no kyɛ general markup ne styles, efi base .navclass no so kosi active ne disabled states so. Sesa modifier classes na dannan style biara ntam.

Wɔde flexbox na ɛkyekyee base .navcomponent no na ɛma fapem a ɛyɛ den a wɔde besi navigation components ahorow nyinaa. Ɛka style overrides binom (a wɔde yɛ adwuma wɔ lists ho), link padding bi ma hit areas akɛse, ne basic disabled styling.

Base .navcomponent no nka .activetebea biara ho. Nhwɛso ahorow a edidi so yi de adesuakuw no ka ho, titiriw de kyerɛ sɛ adesuakuw pɔtee yi nkanyan ɔkwan titiriw biara a wɔfa so yɛ no.

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

Wɔde adesua ahorow di dwuma wɔ ne nyinaa mu, enti wo markup betumi ayɛ super flexible. Fa <ul>s te sɛ atifi hɔ no di dwuma, sɛ wo nneɛma no nhyehyɛe ho hia a, anaasɛ fa element <ol>bi bobɔ w’ankasa de . <nav>Efisɛ .navuses display: flex, nav links no yɛ wɔn ade sɛnea nav nneɛma bɛyɛ no, nanso enni markup foforo no.

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

Nneɛma a wɔde yɛ nneɛma a ɛwɔ hɔ

Sesa .navs component no kwan so de modifiers ne utilities. Fa fra mu sɛnea ɛho hia, anaasɛ si w’ankasa de.

Horizontal a wɔde hyɛ mu

Sesa wo nav no horizontal alignment no ne flexbox utilities . Sɛnea wɔahyɛ no, navs no yɛ benkum so, nanso ɛnyɛ den sɛ wobɛsesa no akɔ mfinimfini anaa nifa so.

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

Nifa-a ɛne .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>

Tenten mu

Stack wo navigation denam nsakrae a wobɛsesa flex ade no kwankyerɛ ne .flex-columnutility no so. Ɛho hia sɛ wo stack wɔn wɔ viewports binom so nanso ɛnyɛ afoforo so? Fa nkyerɛase ahorow a ɛyɛ mmuae no di dwuma (sɛ nhwɛso no, .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>

Sɛnea ɛte daa no, vertical navigation betumi ayɛ yiye a <ul>s nka ho, nso.

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

Fa nav titiriw no fi soro na ɔde .nav-tabsadesuakuw no ka ho ma ɛyɛ tabbed interface. Fa wɔn yɛ tabbable regions denam yɛn tab JavaScript plugin no so .

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

Nnuru a wɔde di dwuma

Fa saa HTML koro no ara, nanso fa di dwuma .nav-pillsmmom:

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

Hyɛ no ma na bu bem

Hyɛ wo .nav's mu nsɛm no ma ɛntrɛw ntrɛwmu a ɛwɔ hɔ nyinaa mu biako a ɛwɔ modifier class abien no mu. Sɛ wopɛ sɛ wode wo .nav-items no hyɛ baabi a ɛwɔ hɔ nyinaa ma sɛnea ɛfata a, fa .nav-fill. Hyɛ no nsow sɛ wɔafa horizontal space nyinaa, nanso ɛnyɛ nav ade biara na ne tɛtrɛtɛ yɛ pɛ.

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

Sɛ wode <nav>-gyina navigation redi dwuma a, wubetumi ayi afi mu dwoodwoo .nav-itemsɛnea .nav-linkɛho hia ma styling <a>elements nkutoo.

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

Sɛ wopɛ nneɛma a ne tɛtrɛtɛ yɛ pɛ a, fa .nav-justified. Nav links bɛfa horizontal space nyinaa, nanso ɛnte sɛ .nav-fillatifi hɔ no, nav adeɛ biara bɛyɛ ne tɛtrɛtɛ korɔ.

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

Te sɛ .nav-fillnhwɛso a wɔde <nav>-gyina akwantuo so di dwuma no.

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

Adwuma a wɔde flex utilities yɛ

Sɛ wuhia nav nsakrae a ɛyɛ mmuae a, susuw ho sɛ wode flexbox utilities ahorow a ɛtoatoa so bedi dwuma . Bere a ɛyɛ verbose kɛse no, saa utilities yi ma customization kɛse wɔ mmuae breakpoints nyinaa mu. Wɔ nhwɛsoɔ a ɛwɔ aseɛ ha yi mu no, yɛn nav no bɛboaboa ano wɔ breakpoint a ɛba fam koraa no so, afei wɔbɛdane akɔ horizontal layout a ɛhyɛ width a ɛwɔ hɔ no ma a ɛfiri aseɛ firi breakpoint ketewa no so.

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

Ɛdefa sɛnea wobetumi anya bi ho

Sɛ wode navs redi dwuma de ama navigation bar a, hwɛ hu sɛ wode a bɛka role="navigation"ɔwofo container a ntease wom sen biara a ɛwɔ <ul>, anaasɛ fa <nav>element bi kyekyere navigation no nyinaa ho. Mfa dwuma no nka <ul>n’ankasa ho, efisɛ eyi remma mfiridwuma a ɛboa no rentumi mfa ho dawuru sɛ ɛyɛ din ankasa.

Hyɛ no nsow sɛ ɛnsɛ sɛ wɔde navigation bars, mpo sɛ wɔayɛ no aniwa so sɛ tabs ne .nav-tabsclass no a, ɛnsɛ sɛ wɔde role="tablist", role="tab"anaasɛ role="tabpanel"attributes ma. Eyinom fata ma tabbed interfaces a ɛyɛ nnam nkutoo, sɛnea wɔakyerɛkyerɛ mu wɔ ARIA Authoring Practices Guide tabs pattern . Hwɛ JavaScript suban ma dynamic tabbed interfaces wɔ ɔfa yi mu ma nhwɛso.

Sɛ wode nneɛma a wɔde gu fam di dwuma

Fa menu ahorow a ɛwɔ fam no ka ho a HTML kakra aka ho ne JavaScript plugin a ɛwɔ fam no .

Tabs a ɛwɔ dropdown ahorow

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

Nnuru a wɔde gu mu a wɔde gu fam

<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 nneyɛe

Fa tab JavaScript plugin no di dwuma—fa ka ho mmiako mmiako anaa fa bootstrap.jsfael a wɔaboaboa ano no so—na trɛw yɛn navigational tabs ne pills no mu ma yɛ tabbable panes a ɛwɔ mpɔtam hɔ nsɛm no mu.

Sɛ worekyekye yɛn JavaScript no afi fibea a, ɛhwehwɛ sɛutil.js .

Dynamic tabbed interfaces, sɛnea wɔaka ho asɛm wɔ ARIA Authoring Practices Guide tabs pattern , hwehwɛ role="tablist", role="tab", role="tabpanel", ne aria-su afoforo sɛnea ɛbɛyɛ a wɔde wɔn nhyehyɛe, dwumadie ne mprempren tebea bɛma wɔn a wɔde mfiridwuma a ɛboa (te sɛ screen readers) di dwuma no. Sɛ́ adeyɛ a eye sen biara no, yɛkamfo kyerɛ sɛ fa <button>elements di dwuma ma tabs no, efisɛ eyinom yɛ controls a ɛkanyan nsakrae a ɛyɛ nnam, sen sɛ wode link ahorow a ɛkɔ krataafa anaa beae foforo so.

Hyɛ no nsow sɛ tab JavaScript plugin no ntumi mmoa tabbed interfaces a ɛwɔ dropdown menus, efisɛ eyinom de nsɛm a ɛfa dwumadie ne kwan a wɔfa so kɔ hɔ nyinaa ba. Sɛ yɛhwɛ sɛnea wobetumi de adi dwuma a, nokwasɛm a ɛyɛ sɛ tab a wɔada no adi mprempren no trigger element no ntumi nhu ntɛm ara (sɛnea ɛwɔ dropdown menu a wɔato mu no mu) no betumi ama adwene atu afra. Sɛ yɛhwɛ kwan a wɔfa so kɔ hɔ a, mprempren ɔkwan biara nni hɔ a ntease wom a wɔbɛfa so ayɛ saa ɔdansi yi ho mfonini akɔ WAI ARIA nhyehyɛe a ɛwɔ hɔ no so, a ɛkyerɛ sɛ ɛnyɛ mmerɛw sɛ wɔbɛma wɔn a wɔde mfiridwuma a ɛboa di dwuma no ate ase.

Beaeɛ a ɛwɔ mu ma tab panel no. Eyi fa home tab no ho. Ɛfa wo akwansin a ɛkorɔn, ɛkorɔn saa, efisɛ ɔwɔ saa amanaman ntam serew biako no. Ɔhɔho bi wɔ me mpa so, ɛrebɔ me tirim. Oh, dabi. Wɔ asetena foforo mu no anka mɛma woatra hɔ. 'Cause me, metumi ayɛ biribiara. Suiting up ma me abotiri ɔko no. Wɔtaa wia w’awofo nsa na woforo kɔ ɔdan no atifi. Tone, tan fit na ayɛ krado, dan no kɔ soro cause ne gettin 'heavy. Ne dɔ te sɛ nnubɔne. Misusuw sɛ me werɛ fii sɛ mewɔ biribi a mɛpaw.

Beaeɛ a ɛwɔ mu ma tab panel no. Eyi fa profile tab no ho. Wo nsa kaa adansi ho nhyehyɛe a eye sen biara. Passport stamps, ɔyɛ cosmopolitan. Fine, fresh, fierce, yenyaa no wɔ lock so. Menyɛɛ nhyehyɛe da sɛ da bi mɛhwere wo. Ɔwe wo koma. Wo kiss yɛ cosmic, move biara yɛ nkonyaayi. Mekyerɛ wɔn no, mekyerɛ sɛ ɔno ne no. Nkyia adɔfo momma yɛntu kwan. Kɛkɛ wura anadwo no te sɛ 4th of July! Nanso wobɛpɛ sɛ wosɛe ade.

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>

Sɛnea ɛbɛyɛ a ɛbɛboa ma ɛne w’ahiade ahyia no, eyi de <ul>-based markup yɛ adwuma, sɛnea wɔakyerɛ wɔ atifi hɔ no, anaasɛ “roll your own” markup biara a wopɛ. Hyɛ no nsow sɛ sɛ wode redi dwuma <nav>a, ɛnsɛ sɛ wode ka ho role="tablist"tẽẽ, efisɛ eyi bɛbu element no kurom dwumadi sɛ akwantu agyiraehyɛde no so. Mmom no, dan kɔ element foforo bi so (wɔ nhwɛso a ɛwɔ ase ha no mu no, a simple <div>) na fa kyekyere <nav>ho.

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.

<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 no nso ne pills yɛ adwuma.

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

Na ɛne nnuru a wɔde di dwuma gyina hɔ.

Beaeɛ a ɛwɔ mu ma tab panel no. Eyi fa home tab no ho. Mehunuu wo downtown sɛ woreto Blues nnwom. Hwɛ sɛnea wotwa nsu a ɛkɔ nsu no mu no ho hyia. Dɛn nti na womma minnyae? Ti a ɛhyɛ abotiri no yɛ duru. Yiw, yɛma abɔfo su, na osu fi soro tɔ wɔ asase so. Wopɛ sɛ wohu ɔyɛkyerɛ no wɔ 3D mu, sini bi. So wote nka pɛn, te nka sɛ krataa yɛ teateaa saa. Ɛyɛ yiw anaa dabi, dabi ebia.

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 su ahorow a wɔde bedi dwuma

Wubetumi ama tab anaa pill navigation ayɛ adwuma a worenkyerɛw JavaScript biara denam element bi a wobɛkyerɛ ara kwa data-toggle="tab"anaasɛ wobɛka so. data-toggle="pill"Fa saa data su ahorow yi di dwuma wɔ .nav-tabsanaa .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>

Ɛdenam JavaScript so

Ma tabbable tabs no nyɛ adwuma denam JavaScript so (ɛsɛ sɛ wode tab biara yɛ adwuma mmiako mmiako):

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

Wubetumi ayɛ tab ankorankoro adwuma wɔ akwan horow pii so:

$('#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 nkɛntɛnso

Sɛ wopɛ sɛ tab ahorow no bɛyera a, fa ka .fadeemu biara ho .tab-pane. Ɛsɛ sɛ tab pane a edi kan no nso .showma nsɛm a edi kan no da adi.

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

Akwan a wɔfa so yɛ

Asynchronous akwan ne nsakrae ahorow

API akwan nyinaa yɛ asynchronous na ɛhyɛ nsakrae ase . Wɔsan kɔ nea ɔfrɛɛ no no nkyɛn bere a wɔafi nsakrae no ase ara pɛ nanso ansa na aba awiei . Bio nso, wobebu ani agu ɔkwan a wɔfa so frɛ ade bi a ɛresakra so no so .

Hwɛ yɛn JavaScript nkrataa no na woanya nsɛm pii .

$().tab no ho nsɛm

Ɛma tab element ne nsɛm a ɛwɔ mu no yɛ adwuma. Ɛsɛ sɛ tab nya data-targetanaa, sɛ wode link redi dwuma a, hrefattribute a ɛde n’ani si container node so wɔ DOM no mu.

<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('kyerɛ') .

Paw tab a wɔde ama no na ɛkyerɛ ne pane a ɛbata ho. Tab foforo biara a na wɔadi kan apaw no bɛyɛ nea wɔanpaw na ne pane a ɛbata ho no sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ tab pane no ankasa (kyerɛ sɛ ansa na shown.bs.tabasɛm no asi).

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

.tab('tow gu') .

Ɔsɛe element bi tab no.

Nsɛm a esisi

Sɛ worekyerɛ tab foforo a, nsɛm a esisi no bɛtow wɔ nnidiso nnidiso a edidi so yi mu:

hide.bs.tab(wɔ tab a ɛreyɛ adwuma mprempren no so)
show.bs.tab(wɔ tab a wɔrebɛkyerɛ no so)
hidden.bs.tab(wɔ active tab a atwam no so no, nea ɛwɔ hide.bs.tabadeyɛ no ho no ara)
shown.bs.tab(wɔ tab a wɔakyerɛ seesei ara a ɛyɛ adwuma foforo no so no, nea ɛwɔ show.bs.tabadeyɛ no ho no ara)

Sɛ na tab biara nni hɔ a ɛyɛ adwuma dedaw a, ɛnde wɔrentow hide.bs.tabne hidden.bs.tabnsɛm a esisi no.

Nsɛm a Ɛsisii no Su	Nkyerɛmu
kyerɛ.bs.tab no	Saa adeyɛ yi tow wɔ tab show so, nanso ansa na wɔakyerɛ tab foforo no. Fa `event.target`ne di dwuma `event.relatedTarget`fa w’ani si active tab ne active tab a atwam no so (sɛ ɛwɔ hɔ a) sɛnea ɛte biara.
wɔakyerɛ.bs.tab	Saa adeyɛ yi tow wɔ tab show so bere a wɔakyerɛ tab bi akyi. Fa `event.target`ne di dwuma `event.relatedTarget`fa w’ani si active tab ne active tab a atwam no so (sɛ ɛwɔ hɔ a) sɛnea ɛte biara.
hide.bs.tab no ho nsɛm	Saa adeyɛ yi tow bere a ɛsɛ sɛ wɔkyerɛ tab foforo (na ɛnam saa kwan yi so no ɛsɛ sɛ wɔde tab a ɛyɛ adwuma a atwam no sie). Fa `event.target`ne di dwuma `event.relatedTarget`fa w’ani si tab a ɛreyɛ adwuma mprempren ne tab foforo a ɛrenkyɛ na ɛreyɛ adwuma no so, sɛnea ɛte biara.
ahintaw.bs.tab no	Saa adeyɛ yi tow bere a wɔakyerɛ tab foforo akyi (na ɛnam saa kwan yi so no wɔde tab a ɛyɛ adwuma a atwam no asie). Fa `event.target`ne di dwuma `event.relatedTarget`fa w’ani si tab a ɛreyɛ adwuma a atwam no ne tab a ɛreyɛ adwuma foforo no so, sɛnea ɛte biara.

$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})