Mafere na isi ọdịnaya Gaa na ntugharị docs
Check
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.

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

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

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

html 
<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).

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

html 
<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ị .

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

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

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

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

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

html 
<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ụ.

html 
<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 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ụ. À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

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

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

CSS

Mgbanwe

Agbakwunyere na v5.2.0

Dịka akụkụ nke mgbanwe mgbanwe CSS Bootstrap na-agbanwe, ndị ụgbọ mmiri na-eji mgbanwe CSS mpaghara na .nav, .nav-tabs, na .nav-pillsmaka nkwalite ezigbo oge. A na-edozi ụkpụrụ maka mgbanwe CSS site na Sass, yabụ ka na-akwado nhazi Sass, kwa.

Na .navklaasị isi:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

Na .nav-tabsklaasị modifier:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

Na .nav-pillsklaasị modifier:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Sass variables

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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.

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.

This is some placeholder content the Disabled tab's associated content.

<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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</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>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</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.

This is some placeholder content the Disabled tab's associated content.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

Na ọgwụ kwụ ọtọ. Dị ka o kwesịrị, maka taabụ kwụ ọtọ, ị ga-agbakwunye aria-orientation="vertical"na akpa ndepụta taabụ.

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 Disabled tab's associated content.

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-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Nnweta

Ọhụụ tabbed dị ike, dị ka akọwara na ụkpụrụ taabụ ntuziaka ARIA , 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ụ.

N'ikwekọ na ụkpụrụ Omume edemede ARIA, naanị taabụ na-arụ ọrụ ugbu a na-enweta mgbado ahụigodo. Mgbe mmalite ngwa mgbakwunye Javascript, ọ ga- tabindex="-1"edobe na njikwa taabụ niile anaghị arụ ọrụ. Ozugbo taabụ na-arụ ọrụ ugbu a lekwasịrị anya, igodo cursor na-arụ ọrụ taabụ gara aga/ na-esote, yana ngwa mgbakwunye na-agbanwe ntụgharị yatabindex . Otú ọ dị, rịba ama na ngwa mgbakwunye Javascript anaghị ama ọdịiche dị n'etiti listi taabụ kwụ ọtọ na vetikal ma a bịa na mkparịta ụka igodo: n'agbanyeghị nghazi ndepụta tab, ma cursor elu na aka ekpe na-aga na taabụ gara aga, na ala na aka nri gaa na taabụ na-esote.

N'ozuzu, iji kwado igodo ahụigodo, a na-atụ aro ka ịme akụkụ taabụ n'onwe ha ka a na-elekwasị anya, ọ gwụla ma ihe mbụ nwere ọdịnaya bara uru n'ime panel tab ahụ adịlarị elekwasị anya. Ngwa mgbakwunye Javascript anaghị anwa ijikwa akụkụ a - ebe ọ dabara adaba, ị ga-achọ ime ka akụkụ taabụ gị lekwasị anya n'ụzọ doro anya site na ịgbakwunye tabindex="0"na akara gị.
Ngwa mgbakwunye JavaScript nke taabụ anaghị akwado oghere tabbed nwere menus dropdown, n'ihi na ihe ndị a na-ebute ma nsogbu ojiji na ịnweta. 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.

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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Site JavaScript

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

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

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

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

const 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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</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ọ .

Na-eme ka ọdịnaya gị rụọ ọrụ dị ka mmewere taabụ.

Ị nwere ike ịmepụta ihe atụ taabụ na onye nrụpụta, dịka ọmụmaatụ:

const bsTab = new bootstrap.Tab('#myTab')
Usoro Nkọwa
dispose Na-emebi taabụ mmewere.
getInstance Ụzọ kwụ ọtọ nke na-enye gị ohere ịnweta ihe atụ taabụ jikọtara ya na ihe DOM, ị nwere ike iji ya dị ka nke a: bootstrap.Tab.getInstance(element).
getOrCreateInstance Ụzọ kwụ ọtọ nke na-eweghachi ihe atụ taabụ jikọtara na ihe DOM ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidoghị ya. Ị nwere ike iji ya dị ka nke a bootstrap.Tab.getOrCreateInstance(element):.
show 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).

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
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.
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. 
const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})