Ndị agha mmiri

Akwụkwọ na ihe atụ maka otu esi eji Bootstrap agụnyere igodo nsoroụzọ.

Base nav

Nsoro ụzọ dị na Bootstrap na-ekekọrịta mkpokọta na ụdị, site na .navklaasị ruo na steeti nọ n'ọrụ yana ndị nwere nkwarụ. Gbanwee klaasị modifier ka ịgbanwee n'etiti ụdị ọ bụla.

A .navna-eji flexbox wuo ihe ntọala ahụ ma nye ntọala siri ike maka ịmepụta ụdị ihe ọ bụla nke igodo igodo. Ọ na-agụnye ụfọdụ nbibi ụdị (maka iji ndepụta rụọ ọrụ), ụfọdụ padding njikọ maka mpaghara ndị buru ibu, na ụdị nkwarụ ndị bụ isi.

Akụkụ ntọala .navanaghị agụnye .activesteeti ọ bụla. Ọmụmaatụ ndị a gụnyere klaasị, tumadi iji gosi na otu klas a anaghị akpalite ụdị ọ bụla pụrụ iche.

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

A na-eji klaasị eme ihe n'oge niile, yabụ akara gị nwere ike ịdị oke mgbanwe. Jiri <ul>s dị ka n'elu, <ol>ọ bụrụ na usoro nke ihe gị dị mkpa, ma ọ bụ jiri <nav>mmewere tụgharịa nke gị. N'ihi na .navojiji ndị a na-eme display: flex, njikọ ụgbọ mmiri na-akpa àgwà otu ihe ndị nav ga-eme, mana na-enweghị akara mgbakwunye.

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

Ụdị dị

Gbanwee ụdị nke .navs akụrụngwa na modifiers na utilities. Gwakọta ma dakọtara ka achọrọ, ma ọ bụ wuo nke gị.

Nkwanye kwụ ọtọ

Gbanwee nhazi kwụ ọtọ nke ụgbọ mmiri gị site na iji ngwa flexbox . Site na ndabara, ụgbọ mmiri na-adakọ n'aka ekpe, mana ị nwere ike gbanwee ha n'ụzọ dị mfe ka ha na etiti ma ọ bụ dakọtara aka nri.

dabere na .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>

Haziri nke ọma na .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>

kwụ ọtọ

Dochie igodo gị site na iji akụrụngwa gbanwee ntụzịaka ihe flex .flex-column. Ịchọrọ ikpokọta ha na ụfọdụ ebe nlele mana ọ bụghị ndị ọzọ? Jiri ụdị anabatara (dịka ọmụmaatụ, .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>

Dị ka oge niile, igodo kwụ ọtọ ga-ekwe omume na-enweghị <ul>s, kwa.

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

Taabụ

Na-esi n'elu na-ewepụta ụgbọ mmiri bụ isi ma gbakwunye .nav-tabsklaasị iji mepụta interface tabbed. Jiri ha mepụta mpaghara tabbable na ngwa mgbakwunye Javascript anyị .

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

Ọgwụ

Were otu HTML ahụ, mana jiri .nav-pillskama:

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

Jupụta ma kwado ya

Manye .navọdịnaya gị ka ịgbatị obosara zuru oke dị otu n'ime klaasị mgbanwe abụọ. Iji mejupụta ohere niile dị na .nav-items gị nke ọma, jiri .nav-fill. Rịba ama na oghere niile kwụ n'ahịrị nwere, mana ọ bụghị ihe ụgbọ mmiri ọ bụla nwere otu obosara.

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

Mgbe ị na-eji <nav>igodo dabere, ị nwere ike hapụ ya n'enweghị nsogbu .nav-itemdịka naanị .nav-linkihe achọrọ maka <a>ihe nhazi.

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

Maka ihe nha nha nha, jiri .nav-justified. A ga-eji njikọ ụgbọ mmiri were oghere niile kwụ ọtọ, mana n'adịghị ka nke .nav-filldị n'elu, ihe ụgbọ mmiri ọ bụla ga-abụ otu obosara.

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

Yiri ihe .nav-fillatụ site na iji <nav>igodo dabere.

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

Na-arụ ọrụ na flex utilities

Ọ bụrụ na ịchọrọ mgbanwe nav na-anabata, tụlee iji usoro ngwa ngwa flexbox . Ọ bụ ezie na ọ na-ekwukarị okwu ọnụ, akụrụngwa ndị a na-enye nhazi dị ukwuu n'ofe ebe nkwụsịtụ na-anabata. N'ihe atụ dị n'okpuru ebe a, a ga-edobe ụgbọ mmiri anyị na ebe nkwụsịtụ kacha ala, wee kwekọọ na nhazi nke kwụ ọtọ nke na-ejupụta obosara dị na-amalite site na obere nkwụsịtụ.

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

Banyere nnweta

Ọ bụrụ na ị na-eji ụgbọ mmiri iji weta mmanya nsoroụzọ, jide n'aka na ị ga-agbakwunye role="navigation"na akpa nne na nna kacha ezi uche dị na ya <ul>, ma ọ bụ kechie <nav>mmewere gburugburu nsoroụzọ niile. Etinyekwala ọrụ ahụ <ul>n'onwe ya, n'ihi na nke a ga-egbochi ịkpọsa ya dị ka ndepụta n'ezie site na teknụzụ enyemaka.

Rịba ama na ogwe igodo nsoroụzọ, ọ bụrụgodị na a na-eme ya ka ọ bụrụ taabụ na .nav-tabsklas ahụ, ekwesighi inye , role="tablist"ma role="tab"ọ bụ role="tabpanel"àgwà. Ndị a dabara adaba naanị maka ihu ihu taabụ dị ike, dịka akọwara na ụkpụrụ taabụ Ntuziaka Omume nke ARIA . Hụ omume Javascript maka ihe nhụsianya dị ike na ngalaba a maka ọmụmaatụ.

Iji dropdowns

Tinye ndetu mwụda nwere ntakịrị HTML mgbakwunye yana ngwa mgbakwunye Javascript .

Taabụ nwere dropdowns

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

Ọgwụ nwere ndapụta

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

Omume Javascript

Jiri ngwa mgbakwunye Javascript taabụ-gụnye ya n'otu n'otu ma ọ bụ site na bootstrap.jsfaịlụ ekpokọtara-iji gbatịa taabụ na ọgwụ njegharị anyị iji mepụta pane nke ọdịnaya mpaghara.

Ọ bụrụ na ị na-ewu Javascript anyị site na isi iyi, ọ chọrọutil.js .

Ọhụụ tabbed dị ike, dị ka akọwara na ARIA ụkpụrụ ntuziaka ntuziaka ndị na-ede akwụkwọ , chọrọ role="tablist", role="tab", role="tabpanel", na njiri mara ndị ọzọ aria-iji wepụta usoro ha, ọrụ ha na ọnọdụ ugbu a nye ndị ọrụ teknụzụ enyemaka (dị ka ndị na-agụ ihuenyo). Dị ka omume kacha mma, anyị na-akwado iji <button>ihe maka taabụ, ebe ndị a bụ njikwa na-ebute mgbanwe dị egwu, kama njikọ na-agagharị na ibe ma ọ bụ ọnọdụ ọhụrụ.

Rịba ama na ngwa mgbakwunye Javascript taabụ anaghị akwado ihu taabụ nke nwere menus dropdown, n'ihi na ihe ndị a na-ebute ma ojiji yana nsogbu nnweta. Site n'echiche ojiji, eziokwu ahụ bụ na ihe na-akpalite taabụ egosiri ugbu a anaghị ahụ ya ozugbo (dịka ọ dị n'ime menu ndetu mechiri emechi) nwere ike ibute ọgba aghara. Site n'echiche nnweta, ọ nweghị ụzọ ezi uche dị ugbu a iji mapụta ụdị ihe owuwu a ka ọ bụrụ ụkpụrụ WAI ARIA, nke pụtara na enweghị ike ime ka ndị ọrụ teknụzụ enyemaka ghọta ngwa ngwa.

Ọdịnaya njide maka panel tab. Nke a metụtara taabụ ụlọ. Na-ewe gị kilomita n'ịdị elu, dị elu, n'ihi na ọ nwere otu ọnụ ọchị mba ụwa. Onwere onye m mabu n’àkwà m, ihe na-akụ m n’isi. Oh, mba. N'ime ndụ ọzọ, m ga-eme ka ị nọrọ. N'ihi na m, enwere m ike ihe ọ bụla. Kwesịrị ekwesị maka agha okpueze m. Eji ya ezuru mmanya nne na nna gị wee rịgoro n'elu ụlọ. Ụda, tan dabara na njikere, tụgharịa ya na-eme ka ọ dị arọ. Ịhụnanya ya dị ka ọgwụ ọjọọ. Echere m na m chefuru na enwere m nhọrọ.

Ọdịnaya njide maka panel tab. Nke a metụtara taabụ profaịlụ. Ị nwetara ụlọ ọrụ kacha mma. Stampụ paspọtụ, ọ bụ mba ụwa. Ọ dị mma, ọhụrụ, dị egwu, anyị nwetara ya na mkpọchi. Ọ dịghị mgbe zubere na otu ụbọchị m ga-atụfu gị. Ọ na-eri gị obi. Nsusu ọnụ gị bụ mbara igwe, mmegharị ọ bụla bụ anwansi. M pụtara ndị ahụ, m pụtara na ọ bụ ya. Ekele ndị m hụrụ n'anya ka anyị gaa njem. Naanị nwe abalị dịka ụbọchị anọ nke Julaị! Mana ọ ga-akara gị mma ịla n'iyi.

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>

Iji nyere aka kwado mkpa gị, nke a na-arụ ọrụ na- <ul>dabere, dị ka egosiri n'elu, ma ọ bụ jiri akara "tụgharịa nke gị" ọ bụla aka ike. Rịba ama na ọ bụrụ na ị na-eji <nav>, ị gaghị etinye role="tablist"ya ozugbo, n'ihi na nke a ga-ewepụ ọrụ nwa afọ nke mmewere dị ka akara igodo ụzọ. Kama, gbanwee gaa na ihe ọzọ (n'ihe atụ dị n'okpuru, dị mfe <div>) ma kechie ya <nav>gburugburu.

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>

Ngwa mgbakwunye taabụ na-ejikwa mkpụrụ ọgwụ arụ ọrụ.

<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 ọgwụ kwụ ọtọ.

Ọdịnaya njide maka panel tab. Nke a metụtara taabụ ụlọ. Hụrụ gị ogbe ndịda na-abụ abụ bulu. Lelee ka ị na-agba gburugburu mmiri mmiri ahụ. Gịnị mere na ị gaghị ekwe ka m kwụsị? Arọ bụ isi na-eyi okpueze. Ee, anyị na-eme ka ndị mmụọ ozi tie mkpu, na-ezobe mmiri ozuzo n’ụwa site n’elu. Achọrọ ịhụ ihe ngosi na 3D, ihe nkiri. Ọ na-adị gị mgbe ọ bụla, ọ dị gị ka akwụkwọ dị gịrịgịrị. Ọ bụ ee ma ọ bụ mba, ee e nwere ike.

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>

Iji njirimara data

Ị nwere ike ịgbalite taabụ ma ọ bụ pill navigation na-edeghị Javascript ọ bụla site na ịkọwapụta data-toggle="tab"ma ọ bụ data-toggle="pill"na mmewere. Jiri njirimara data ndị a na .nav-tabsma ọ bụ .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>

Site na Javascript

Kwado taabụ tabbable site na Javascript (taabụ ọ bụla kwesịrị ịgbalite n'otu n'otu):

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

Ị nwere ike ịgbalite taabụ n'otu n'otu n'ụzọ dị iche iche:

$('#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

Mbelata mmetụta

Iji mee ka taabụ daa, tinye .fadena nke ọ bụla .tab-pane. Iberibe taabụ nke mbụ ga-enwerịrịrịrị .showime ka a hụ ọdịnaya mbụ.

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

Ụzọ

Ụzọ asynchronous na ntụgharị

Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .

Hụ akwụkwọ Javascript anyị maka ozi ndị ọzọ .

$()tab

Na-arụ ọrụ mmemme taabụ na akpa ọdịnaya. Tab kwesịrị inwe ma ọ data-targetbụ, ọ bụrụ na ị na-eji njikọ, hrefnjirimara na-eche ihu ọnụ akpa na 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>

.taabụ('show')

Họrọ taabụ enyere wee gosi pane metụtara ya. Taabụ ọ bụla ọzọ ahọpụtara na mbụ na-aghọ nke anaghị ahọpụtara yana pane ejikọtara ya na-ezo. Na-alaghachi na onye na-akpọ oku tupu egosiri pane taabụ n'ezie (ya bụ tupu shown.bs.tabmmemme emee).

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

.taabụ('tụfuo')

Na-emebi taabụ mmewere.

Ihe omume

Mgbe ị na-egosi taabụ ọhụrụ, mmemme ahụ na-agba ọkụ n'usoro a:

hide.bs.tab(na taabụ na-arụ ọrụ ugbu a)
show.bs.tab(na taabụ a ga-egosi)
hidden.bs.tab(na taabụ arụ ọrụ gara aga, otu maka mmemme hide.bs.tabahụ)
shown.bs.tab(na taabụ egosiri ọhụrụ na-arụ ọrụ, otu maka mmemme show.bs.tabahụ)

Ọ bụrụ na ọ nweghị taabụ na-arụ ọrụ, mgbe ahụ hide.bs.tab, hidden.bs.taba gaghị achụpụ ihe omume na mmemme.

Ụdị mmemme	Nkọwa
gosi.bs.tab	Ihe omume a na-agba ọkụ na ihe ngosi taabụ, mana tupu egosiri taabụ ọhụrụ. Jiri `event.target`ma `event.relatedTarget`tụọ taabụ nọ n'ọrụ yana taabụ arụ ọrụ gara aga (ọ bụrụ na ọ dị) n'otu n'otu.
egosiri.bs.taabụ	Ihe omume a na-agba ọkụ na ihe ngosi taabụ ka egosiri taabụ. Jiri `event.target`ma `event.relatedTarget`tụọ taabụ nọ n'ọrụ yana taabụ arụ ọrụ gara aga (ọ bụrụ na ọ dị) n'otu n'otu.
zoo.bs.tab	Ihe omume a na-agba ọkụ mgbe a ga-egosi taabụ ọhụrụ (ya mere a ga-ezobe taabụ arụ ọrụ gara aga). Jiri `event.target`ma `event.relatedTarget`tụọ taabụ na-arụ ọrụ ugbu a yana taabụ ọhụrụ ga-arụ ọrụ n'oge adịghị anya, n'otu n'otu.
zoro ezo.bs.taabụ	Ihe omume a na-agba ọkụ ka egosiri taabụ ọhụrụ (ma yabụ na-ezobe taabụ arụ ọrụ gara aga). Jiri `event.target`ma `event.relatedTarget`dobe taabụ nọ n'ọrụ gara aga yana taabụ arụ ọrụ ọhụrụ, n'otu n'otu.

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