Mafere na isi ọdịnaya Gaa na ntugharị docs
in English

Navs na taabụ

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

Na ibe a

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ị isi nwere nkwarụ.

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.

Iji bufee steeti nọ n'ọrụ na teknụzụ enyemaka, jiri aria-currentnjirimara - iji pageuru maka ibe dị ugbu a, ma ọ bụ truemaka ihe dị ugbu a na nhazi.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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 ahụ ihe nav ga-eme, mana na-enweghị akara mgbakwunye.

<nav class="nav">
  <a class="nav-link active" aria-current="page" 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 nhazigharị 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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 ka 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" aria-current="page" 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 nhụsianya tabbed siri ike, dịka akọwara n'ime Omume edemede WAI ARIA . Hụ omume Javascript maka ihe nhụsianya dị ike na ngalaba a maka ọmụmaatụ. Àgwà aria-currentahụ adịghị mkpa na oghere tabbed ike ebe ọ bụ na Javascript anyị na-ejikwa steeti ahọpụtara site na ịgbakwunye aria-selected="true"na taabụ nọ n'ọrụ.

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" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </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" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </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>

Sass

Mgbanwe

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

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.

Ọhụụ tabbed dị ike, dị ka akọwara na WAI ARIA Omume Edemede , chọrọ role="tablist", role="tab", role="tabpanel", na aria-njirimara ndị ọzọ 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 nhụsianya tabbed ike ekwesịghị ịnwe menus dropdown, n'ihi na nke 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.

Nke a bụ ụfọdụ ọdịnaya ihe ejikọrọ taabụ ụlọ. Ịpị taabụ ọzọ ga-atụgharị visibiliti nke nke a maka nke na-esote. Taabụ Javascript na-agbanwe klaasị iji jikwaa visibiliti ọdịnaya na nhazi. Ị nwere ike iji ya na taabụ, pill, na ihe ọ bụla ọzọ .navna-akwado igodo.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

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

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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ụ.

Nke a bụ ụfọdụ ọdịnaya ihe ejikọrọ taabụ ụlọ. Ịpị taabụ ọzọ ga-atụgharị visibiliti nke nke a maka nke na-esote. Taabụ Javascript na-agbanwe klaasị iji jikwaa visibiliti ọdịnaya na nhazi. Ị nwere ike iji ya na taabụ, pill, na ihe ọ bụla ọzọ .navna-akwado igodo.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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ọ.

Nke a bụ ụfọdụ ọdịnaya ihe ejikọrọ taabụ ụlọ. Ịpị taabụ ọzọ ga-atụgharị visibiliti nke nke a maka nke na-esote. Taabụ Javascript na-agbanwe klaasị iji jikwaa visibiliti ọdịnaya na nhazi. Ị nwere ike iji ya na taabụ, pill, na ihe ọ bụla ọzọ .navna-akwado igodo.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <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>

Iji njirimara data

Ị nwere ike ịgbalite taabụ ma ọ bụ pill navigation na-edeghị Javascript ọ bụla site na ịkọwapụta data-bs-toggle="tab"ma ọ bụ data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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 JavaScript

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

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

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

var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first 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ọ .

constructor

Na-arụ ọrụ mmemme taabụ na akpa ọdịnaya. Tab kwesịrị inwe ma ọ data-bs-targetbụ, ọ bụrụ na ị na-eji njikọ, hrefàgwà, na-ezubere ọnụ ọ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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>
  var firstTabEl = document.querySelector('#myTab li:last-child button')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

gosi

Na-ahọpụta 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).

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

tufuo

Na-emebi taabụ mmewere.

nweta ihe atụ

Usoro static na-enye gị ohere ịnweta ihe atụ taabụ jikọtara ya na ihe DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

nwetaOrCreateInstance

Usoro static nke na-enye gị ohere ịnweta ihe atụ taabụ jikọtara ya na ihe DOM, ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidoghị ya.

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Ihe omume

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

  1. hide.bs.tab(na taabụ na-arụ ọrụ ugbu a)
  2. show.bs.tab(na taabụ a ga-egosi)
  3. hidden.bs.tab(na taabụ arụ ọrụ gara aga, otu maka mmemme hide.bs.tabahụ)
  4. 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ụ, agaghị achụpụ ihe omume hide.bs.tabna mmemme.hidden.bs.tab

Ụdị mmemme Nkọwa
show.bs.tab Ihe omume a na-agba ọkụ na ihe ngosi taabụ, mana tupu egosiri taabụ ọhụrụ. Jiri event.targetma event.relatedTargettụọ taabụ nọ n'ọrụ yana taabụ arụ ọrụ gara aga (ọ bụrụ na ọ dị) n'otu n'otu.
shown.bs.tab Ihe omume a na-agba ọkụ na ihe ngosi taabụ ka egosiri taabụ. Jiri event.targetma event.relatedTargettụọ taabụ nọ n'ọrụ yana taabụ arụ ọrụ gara aga (ọ bụrụ na ọ dị) n'otu n'otu.
hide.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.targetna event.relatedTargetdobe taabụ na-arụ ọrụ ugbu a yana taabụ ọhụrụ ga-arụ ọrụ n'oge adịghị anya, n'otu n'otu.
hidden.bs.tab Ihe omume a na-agba ọkụ ka egosiri taabụ ọhụrụ (ma yabụ na-ezobe taabụ arụ ọrụ gara aga). Jiri event.targetma event.relatedTargetdobe taabụ nọ n'ọrụ gara aga yana taabụ arụ ọrụ ọhụrụ, n'otu n'otu. 
var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})