Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
Check
in English

Navs ani tabs

Sɛbɛnw ani misaliw baara kɛcogo kan Bootstrap ka navigatiɔn yɔrɔw la minnu bɛ a kɔnɔ.

Nin ɲɛ in kan

Base nav

Navigation min bɛ sɔrɔ Bootstrap kɔnɔ, o bɛ taamasiyɛn caman ni cogoyaw tila ɲɔgɔn na, k’a ta basigi .navkalasi la ka se active ani disabled states ma. Swap modifier classes ka ɲɔgɔn falen-falen cogoya kelen-kelen bɛɛ cɛ.

Basi .navyɔrɔ in bɛ jɔ ni flexbox ye ani ka jusigilan barikama di ka ɲɛsin navigatiɔn yɔrɔ suguya bɛɛ jɔli ma. A bɛ cogoya dɔw 'kɔnɔ (ka baara Kɛ ni lisiw ye), 'jyɛn-yɔrɔ dɔw bɛ yen minnu bɛ Kɛ 'yɔrɔbaw la minnu bɛ 'tàli Kɛ, ani 'sènfɛ-sɛbɛnni basigilenw.

Basi .navyɔrɔ in tɛ .activejamana si la. Misali nataw bɛ kalansen in na, kɛrɛnkɛrɛnnenya la walasa k’a jira ko nin kalan kɛrɛnkɛrɛnnen in tɛ cogoya kɛrɛnkɛrɛnnen si daminɛ.

Walasa ka waleyali cogoya lase dɛmɛn fɛɛrɛw ma, baara kɛ ni fɛn aria-currentye — ka baara kɛ ni pagenafa ye ɲɛ sisan na, walima truesisan fɛn min bɛ kulu dɔ kɔnɔ.

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

Kalanso bɛ baara kɛ ni a bɛɛ ye, o la i ka markup bɛ se ka kɛ super flexible ye. Baara kɛ ni <ul>s ye i n’a fɔ a fɔra cogo min na sanfɛ, <ol>ni aw ka fɛnw sigicogo nafa ka bon, walima aw bɛ aw yɛrɛ ta wuli ni <nav>fɛn dɔ ye. Sabula .navbaarakɛcogo display: flex, nav jɛgɛnw bɛ taamacogo kelen na i n’a fɔ nav fɛnw bɛna kɛ cogo min na, nka ni taamasiyɛn wɛrɛ tɛ.

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

Styles minnu bɛ sɔrɔ

s component cogoya Changer .navni modifiers ani utilités ye. Aw bɛ a ɲagami ka a fara ɲɔgɔn kan ni aw mago bɛ a la, walima aw bɛ aw yɛrɛ ta jɔ.

Alignment horizontal (Jɛɲɔgɔnya tilennen).

aw ka nav ka alignment horizontal Changer ni flexbox utilités ye . Ka da a kan, navs bɛ kɛ kinin fɛ, nka i bɛ se k’u Changer nɔgɔya la ka kɛ cɛmancɛ walima kinin fɛ.

Cɛmancɛ la ni .justify-content-center:

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

A kinin fɛ ni .justify-content-end:

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

Jɔ̀len

Stack i ka navigation ni flex item direction caman cili ye ni .flex-columnutilité ye. Aw mago bɛ u la ka u dalajɛ viewport dɔw kan nka dɔw tɛ wa? Baara kɛ ni jaabiw ye (misali la, .flex-sm-column).

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

I n’a fɔ a bɛ Kɛ cogo min na tuma bɛɛ, navigatiɔn jɔlen bɛ Se ka Kɛ ni <ul>s tɛ, o fana.

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

Tablow

A bɛ nav basigilen ta ka bɔ san fɛ ka .nav-tabskalasi fara a kan walasa ka tabbed interface (dakun) dɔ Lawuli. baara kɛ n' u ye walasa ka tabali maraw dilan ni an ka tablo JavaScript plugin ye .

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

Furakisɛw

Aw bɛ o HTML kelen in ta, nka aw bɛ baara kɛ n’a .nav-pillsnɔ na:

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

Fa ani ka jo di a ma

Force your .nav's kɔnɔkow ka janya dafalen sɔrɔlen bonya kelen la modifier classes fila la. Walasa ka yɔrɔ sɔrɔlenw bɛɛ fa ka kɛɲɛ ni aw ka .nav-items ye, aw bɛ baara kɛ ni .nav-fill. A kɔlɔsi ko yɔrɔ tilennen bɛɛ minɛna, nka nav fɛn bɛɛ bonya tɛ kelen ye.

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

Ni i bɛ baara Kɛ ni <nav>-based navigation ye, i bɛ Se k'a Bɔ lafiya la .nav-itemi n'a fɔ dɔrɔn .nav-linkde wajibiyalen dòn styling <a>elements (fɔlifɛnw) la.

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

Walasa ka fɛnw sɔrɔ minnu bonya bɛ bɛn ɲɔgɔn ma, aw bɛ baara kɛ ni .nav-justified. Yɔrɔ tilennen bɛɛ bɛna Minɛ nav jɛgɛnsira fɛ, nka a tɛ i n’a fɔ .nav-fillsanfɛtaw, nav fɛn bɛɛ bɛna Kɛ bonya kelen ye.

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

A bɛ tali kɛ .nav-fillmisali la min bɛ baara kɛ ni <nav>-based navigation ye.

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

Baara kɛli ni flex utilities ye

Ni aw mago bɛ jaabi nav variations la, aw bɛ a lajɛ ka baara kɛ ni flexbox utilités ye . Hali n’a y’a sɔrɔ ko kumasenw ka ca, o nafalanw bɛ ladamuni caman di jaabi-ka-bɔ-yɔrɔw bɛɛ la. Misali min bɛ duguma, an ka nav bɛna Sìgi ɲɔgɔn kan kariyɔrɔ dɔgɔmannin kan, o kɔ fɛ a bɛ Labɛn ka Kɛɲɛ ni labɛncogo tilennen ye min bɛ bonya sɔrɔlen Fa k’a daminɛ kariyɔrɔ fitinin na.

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

Ka ɲɛsin sɔrɔli ma

N’i ​​bɛ baara Kɛ ni navs ye walasa ka navigatiɔn-yɔrɔ Di, i k’i jija ka a Fàra role="navigation"parent container kan min bɛ hakili sɔrɔ kosɛbɛ <ul>, walima ka <nav>fɛn dɔ siri navigatiɔn bɛɛ la. Aw kana jɔyɔrɔ in fara a <ul>yɛrɛ kan, bawo o bɛna a bali ka laseli kɛ ko a ye lisi yɛrɛ ye dɛmɛni fɛɛrɛw fɛ.

Aw k’a kɔlɔsi ko navigatɛriw, hali ni u labɛnna yecogo la i n’a fɔ tablo ni .nav-tabskalasi, u man kan ka di role="tablist", role="tab"walima ka role="tabpanel"fɛnw di. Ninnu bɛ bɛn dɔrɔn tablɛtiw ka ɲɔgɔndanw ma minnu bɛ wuli, i n’a fɔ a ɲɛfɔlen bɛ cogo min na ARIA sɛbɛnnikɛlanw ka gafe taabolow misali kɔnɔ . Aw ye JavaScript kɛcogo lajɛ tablo-interface dinamikiw kan nin yɔrɔ in na misali la. O aria-currentfɛnɲɛnɛma tɛ wajibiya tablɛtiw kan minnu bɛ 'yɔrɔ la bari an ka JavaScript bɛ cogoya sugandilen ɲɛnabɔ ni farali aria-selected="true"ye tablɛti baarakɛta kan.

Baara kɛ ni fɛnw ye minnu bɛ jigin

menu dɔw fara a kan ni HTML dɔ faralen ye ɲɔgɔn kan ani JavaScript plugin min bɛ jigin .

Tablo minnu bɛ ni fɛnw ye minnu bɛ jigin

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

Furakisɛw ni furakisɛw

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

Yɛlɛma-yɛlɛmaw

A farala a kan v5.2.0 kɔnɔ

Bootstrap ka CSS fɛn caman sɛgɛsɛgɛli taabolo dɔ ye min bɛ ka wuli, navs bɛ baara kɛ sisan ni sigida CSS fɛn caman sɛgɛsɛgɛli ye .nav, .nav-tabs, kan ani .nav-pillswalasa ka waati yɛrɛyɛrɛ ladamuni yiriwa. Nafa minnu bɛ CSS fɛn caman sɛgɛsɛgɛli la, olu bɛ sigi Sass fɛ, o la Sass ka ladamuni bɛ dɛmɛ hali bi, o fana.

.navBase kalan kan :

  --#{$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};

.nav-tabsModificateur kalasi kan :

  --#{$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};

.nav-pillsModificateur kalasi kan :

  --#{$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 bεε bε bεn

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

JavaScript kɛcogo

Baara kɛ ni JavaScript plugin tab ye—aw k’a don a kelen-kelen na walima ka tɛmɛ bootstrap.jsdosiye lajɛlen fɛ—walasa ka an ka navigatiɔn tabw ni furakisɛw janya walasa ka sigida kɔnɔkow tablɛtiw dilan.

Nin ye yɔrɔ-yɔrɔ-ko dɔw ye Home tab ka kɔnɔkow bɛ tali Kɛ ɲɔgɔn na. Ni i ye tab wɛrɛ digi, o bɛna nin kelen in yecogo wuli ka taa a nɔfɛ. JavaScript tab bɛ kalasiw ɲɔgɔn falen-falen walasa ka kɔnɔkow yecogo n’u cogoya kɔlɔsi. Aw bɛ se ka baara kɛ n’a ye ni tablɛtiw, furakisɛw, ani .nav-powered navigation wɛrɛw ye.

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>

Walasa ka dɛmɛ don ka bɛn i magow ma, o bɛ baara kɛ ni <ul>-based markup ye, i n’a fɔ a jiralen bɛ cogo min na sanfɛ, walima ni “roll your own” taamasiyɛn suguya o suguya ye. A kɔlɔsi ko n’i bɛ baara Kɛ ni <nav>, i man kan ka dɔ Fàra a kan role="tablist"k’a ɲɛsin a ma, bari o bɛna fɛn in jɔyɔrɔ fɔlɔ Bɔ a la i n’a fɔ navigatiɔn taamaʃyɛn. O nɔ na, ​​aw bɛ wuli ka taa fɛn wɛrɛ la (misali la min bɛ duguma, a nɔgɔn <div>) ka a <nav>lamini.

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

Tabs plugin fana bɛ baara kɛ ni furakisɛw ye.

Nin ye yɔrɔ-yɔrɔ-ko dɔw ye Home tab ka kɔnɔkow bɛ tali Kɛ ɲɔgɔn na. Ni i ye tab wɛrɛ digi, o bɛna nin kelen in yecogo wuli ka taa a nɔfɛ. JavaScript tab bɛ kalasiw ɲɔgɔn falen-falen walasa ka kɔnɔkow yecogo n’u cogoya kɔlɔsi. Aw bɛ se ka baara kɛ n’a ye ni tablɛtiw, furakisɛw, ani .nav-powered navigation wɛrɛw ye.

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>

Ani ni furakisɛ jɔlenw ye. A ka fisa, tablo jɔlenw kama, aw ka kan fana ka dɔ fara aria-orientation="vertical"tablo list minɛn kan.

Nin ye yɔrɔ-yɔrɔ-ko dɔw ye Home tab ka kɔnɔkow bɛ tali Kɛ ɲɔgɔn na. Ni i ye tab wɛrɛ digi, o bɛna nin kelen in yecogo wuli ka taa a nɔfɛ. JavaScript tab bɛ kalasiw ɲɔgɔn falen-falen walasa ka kɔnɔkow yecogo n’u cogoya kɔlɔsi. Aw bɛ se ka baara kɛ n’a ye ni tablɛtiw, furakisɛw, ani .nav-powered navigation wɛrɛw ye.

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>

Seko ni dɔnko

Dynamic tabbed interfaces, i n’a fɔ a ɲɛfɔlen bɛ cogo min na ARIA Authoring Practices Guide tabs pattern kɔnɔ, olu bɛ role="tablist", role="tab", role="tabpanel", ani fɛn wɛrɛw de wajibiya aria-walasa k’u jɔcogo, u baarakɛcogo ani u cogoya lase dɛmɛ fɛɛrɛw baarakɛlaw ma (i n’a fɔ ɛkran kalanbagaw). O kɛcogo ɲuman na, an b’a ɲini aw fɛ aw ka baara kɛ ni <button>fɛnw ye tablow kama, bawo olu ye kɔrɔsilifɛnw ye minnu bɛ fɛn caman Changement dynamique daminɛ, sanni ka kɛ jɛgɛnw ye minnu bɛ taa ɲɛ walima yɔrɔ kura la.

Ka kɛɲɛ ni ARIA Authoring Practices misali ye, tab min bɛ baara la sisan, o dɔrɔn de bɛ klaviyeti sinsinnan sɔrɔ. Ni JavaScript plugin daminɛna, a bɛna sigi tabindex="-1"tab controls bɛɛ kan minnu tɛ baara kɛ. Ni tab min bɛ baara la sisan, o ye focus sɔrɔ, cursor keys bɛ tab tɛmɛnen/nata baara, ni plugin bɛ rovingtabindex Changer ka kɛɲɛ n’o ye. Nka, a kɔlɔsi ko JavaScript plugin tɛ danfara don tab list horizontal ni vertical cɛ ni a bɛ na ni cursor key interactions ye: tab list ɲɛsincogo mana kɛ min o min ye, cursor sanfɛla ni numanbolo fila bɛɛ bɛ taa tab tɛmɛnen na, ka jigin ani kininbolo taamasiyɛn bɛ taa yɔrɔ min na tablo nata la.

A ka c’a la, walasa ka klaviyeti taama nɔgɔya, a ka ɲi ka tablo panneau yɛrɛ kɛ ɲɛmajɔ ye fana, fo n’a y’a sɔrɔ fɛn fɔlɔ min kɔnɔko kɔrɔ bɛ tab panneau kɔnɔ, o bɛ se ka sinsin kaban. JavaScript plugin t’a ɲini ka nin fan in ɲɛnabɔ—ni a bɛnnen don, i bɛna a ɲini k’a jɛya k’i ka tab panneaux kɛ fɛn ɲɛnamaw ye ni i ye dɔ fara tabindex="0"i ka markup kan.
Tab JavaScript plugin tɛ o kɛ tab-interfaces dɛmɛ minnu bɛ ni dropdown menus ye, bawo o bɛ na ni baarakɛcogo ni sɔrɔli gɛlɛyaw ye. Baarakɛcogo siratigɛ la, ni tab min bɛ jira sisan, o ka trigger element tɛ Ye joona (i n’a fɔ a bɛ 'fɛn min bɛ 'kɔnɔna na min dagalen dòn) o bɛ Se ka hakilijagabɔ Kɛ. Ka bɔ sɔrɔli siratigɛ la, sisan, fɛɛrɛ hakilitigi si tɛ yen min bɛ se ka nin jɔli sugu in kariti kɛ ka kɛɲɛ ni WAI ARIA misali sariyalen ye, o kɔrɔ ye ko a tɛ se ka kɛ fɛn ye min bɛ se ka faamuya nɔgɔya la dɛmɛnfɛɛrɛw baarakɛlaw fɛ.

Baara kɛ ni data attributes ye

I bɛ se ka tab walima pill navigation dɔ baara k’a sɔrɔ i ma JavaScript si sɛbɛn ni i ye element dɔ jira dɔrɔn data-bs-toggle="tab"walima a kan. data-bs-toggle="pill"Baara kɛ ni nin kunnafonidilanw ye .nav-tabswalima .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>

JavaScript fɛ

Tabable tabw daminɛ JavaScript fɛ (tab kelen-kelen bɛɛ ka kan ka baara kɛ kelen-kelen):

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

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

Aw bɛ se ka tablo kelen-kelen bɛɛ baara cogo caman na:

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

Fade nɔ ye

Walisa ka tablow ka fade in kɛ, i ka dɔ fara .fadeu kelen-kelen bɛɛ .tab-panekan . Tablo fɔlɔ fana ka kan .showka kɛ sababu ye ka kɔnɔko fɔlɔw kɛ fɛn yetaw ye.

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

Fɛɛrɛw

Fɛɛrɛ minnu tɛ kelen ye ani fɛn caman tigɛli

API fɛɛrɛw bɛɛ ye asynchrone ye ani ka tɛmɛsira dɔ daminɛ . u bɛ segin welebaga ma ni wuli daminɛna dɔrɔn nka sanni a ka ban . Ka fara o kan, fɛɛrɛ weleli min bɛ kɛ tɛmɛsira yɔrɔ dɔ kan, o bɛna jate .

aw ye an ka JavaScript sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ .

A bɛ i ka kɔnɔkow baara i n’a fɔ tab element.

Aw bɛ se ka tab misali dɔ Dabɔ ni constructeur ye, misali la:

const bsTab = new bootstrap.Tab('#myTab')
Kɛcogo Cogojirali
dispose A bɛ element dɔ ka tab tiɲɛ.
getInstance Static method min b’a to i bɛ se ka tab instance sɔrɔ min bɛ tali kɛ DOM element dɔ la, i bɛ se ka baara kɛ n’a ye nin cogo la: bootstrap.Tab.getInstance(element).
getOrCreateInstance Fɛɛrɛ jɔlen min bɛ tab misali dɔ Lasegin min bɛ tali Kɛ DOM fɛn dɔ la walima ka kura Dabɔ n'a ma Daminɛ. Aw bɛ se ka baara kɛ n’a ye nin cogo la: bootstrap.Tab.getOrCreateInstance(element).
show A bɛ tab dilen sugandi ani k’a ni ɲɔgɔn cɛ panne jira. Tab wɛrɛ o wɛrɛ min tun sugandira ka tɛmɛ, o bɛ kɛ sugandibali ye ani a ni a ni ɲɔgɔn cɛ panneau bɛ dogo. A bɛ segin welebaga ma sani tab pane ka jira tiɲɛ na (o kɔrɔ ye ko sanni ko shown.bs.tabin ka kɛ).

Ko minnu kɛra

Ni tab kura jira, ko kɛlenw bɛ tasuma don nin cogo la:

  1. hide.bs.tab(tab min bɛ baara la sisan)
  2. show.bs.tab(tabu min bɛna jira, o kan)
  3. hidden.bs.tab(tab active tɛmɛnen kan, o ni hide.bs.tabko kɛlen ta ye kelen ye)
  4. shown.bs.tab(tab min jirala sisan, o min bɛ baara kura kɛ, o ni show.bs.tabko kɛlen ta ye kelen ye)

Ni tab si tun tɛ baara la kaban, o tuma na hide.bs.tabani hidden.bs.tabko kɛlenw tɛna ci.

Ko kɛlen suguya Cogojirali
hide.bs.tab O ko in bɛ tasuma Bɔ ni tablo kura dɔ ka kan ka jira (wa o cogo la tab baarakɛta tɛmɛnen ka kan ka dogo). Baara kɛ event.targetni ani event.relatedTargetye walasa ka tab min bɛ baara la sisan ani tab kura min bɛna kɛ sɔɔni, o laɲini, o cogo kelen na.
hidden.bs.tab O ko in bɛ tasuma Bɔ tab kura jiralen kɔ (wa o cogo la tab baarakɛta tɛmɛnen bɛ dogo). Baara kɛ event.targetni ani event.relatedTargetye walasa ka tab baarakɛta tɛmɛnen ni tab baarakɛta kura laɲini, o cogo kelen na.
show.bs.tab Nin ko in bɛ tasuma don tab jirali la, nka sanni tab kura ka jira. Baara kɛ event.targetni ani event.relatedTargetye walasa ka tablo active ani tab active tɛmɛnen (ni o bɛ sɔrɔ) laɲini.
shown.bs.tab Nin ko in bɛ tasuma don tab jirali la tab jiralen kɔfɛ. Baara kɛ event.targetni ani event.relatedTargetye walasa ka tablo active ani tab active tɛmɛnen (ni o bɛ sɔrɔ) laɲini. 
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
})