Navs kple tabs

Nuŋlɔɖiwo kple kpɔɖeŋuwo na alesi woazã Bootstrap ƒe mɔfiame ƒe akpa siwo le eme.

Le axa sia dzi

Base nav

Navigation si li le Bootstrap me ma dzesi kple atsyãwo le xexeame katã, tso gɔmeɖoanyi .navƒe klass dzi va ɖo nɔnɔme siwo le dɔ wɔm kple esiwo me nuwɔametɔ le dzi. Trɔ asi le tɔtrɔ ƒe hatsotsowo ŋu be nàtrɔ ɖe atsyã ɖesiaɖe dome.

Wotu gɔmeɖoanyi .navƒe akpaa kple flexbox eye wònaa gɔmeɖoanyi sesẽ aɖe na mɔfiame ƒe akpa ƒomevi ɖesiaɖe tutu. Elɔ atsyã ƒe tɔtrɔ aɖewo ɖe eme (hena dɔwɔwɔ kple xexlẽdzesiwo), kadodo ƒe padding aɖewo na teƒe siwo lolo wu siwo woƒo, kple atsyã vevi siwo wowɔ le nuwɔametɔwo ŋu.

Gɔmeɖoanyi .navƒe akpaa melɔ .activenɔnɔme aɖeke ɖe eme o. Kpɔɖeŋu siwo gbɔna la lɔ klass la ɖe eme, vevietɔ be woaɖee afia be klass sia koŋ meʋãa atsyã tɔxɛ aɖeke o.

Be nàtsɔ nɔnɔme si le dɔ wɔm la ayi kpekpeɖeŋu mɔ̃ɖaŋunuwo gbɔ la, zã aria-currentnɔnɔmea — zã pageasixɔxɔ na axa si li fifia, alo truena nu si li fifia le ƒuƒoƒo aɖe me.

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>

Wozãa klasswo katã, eyata wò markup ate ŋu anye super flexible. Zã <ul>s abe alesi wòle etame ene, ne wò nuwo ƒe ɖoɖo le vevie, alo nàtsɔ element <ol>aɖe aƒo tɔwò . <nav>Elabena the .navuses display: flex, nav kadodoawo wɔa nu abe alesi nav nuawo awɔ nui ene, gake dzesidede kpeɖeŋutɔa manɔmee.

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>

Atsyã siwo li

Trɔ .navs component ƒe atsyã kple modifiers kple utilities. Tsɔe tsaka eye nàtsɔe asɔ kple wo nɔewo ne ehiã, alo nàtu tɔwò.

Nusiwo woɖo ɖe ɖoɖo nu le tsia dzi

Trɔ wò nav ƒe ɖoɖo si le tsia dzi kple flexbox dɔwɔnuwo . Le gɔmedzedzea me la, navs le miame, gake àteŋu atrɔ wo bɔbɔe be woaɖo titina alo ɖusime.

Le titina kple .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>

Woɖoe ɖe ɖusime kple .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>

Tsi tsitre

Stack wò navigation to asitɔtrɔ le flex item ƒe mɔfiame kple .flex-columnutility la me. Ðe wòhiã be nàƒo wo nu ƒu ɖe nukpɔkpɔmɔ̃ aɖewo dzi gake menye ɖe bubuwo dzi oa? Zã gɔmeɖeɖe siwo ɖoa nya ŋu (le kpɔɖeŋu me, .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>

Abe alesi wònɔna ɖaa ene la, mɔzɔzɔ le tsitrenu ate ŋu adzɔ <ul>s manɔmee, hã.

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>

Tabwo ƒe ƒuƒoƒo

Exɔa nav vevi la tso dziƒo eye wòtsɔa .nav-tabsklass la kpena ɖe eŋu be wòawɔ tabbed interface. Zã wo nàtsɔ awɔ tabbable nutowo kple míaƒe tab JavaScript plugin .

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>

Atikekuiwo

Tsɔ HTML ma ke, gake zãe .nav-pillsboŋ:

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>

Kpe ɖo eye nàɖo kpe edzi

Zi wò .nav's emenyawo dzi be woakeke kekeme bliboa si li la ɖe enu le tɔtrɔɖenu ƒe hatsotso eve dometɔ ɖeka me. .nav-itemBe nàtsɔ wò s ayɔ teƒe siwo katã li la ɖe ɖoɖo nu la, zã .nav-fill. De dzesii be woxɔ teƒe siwo katã le tsia dzi, gake menye nav nu ɖesiaɖe ƒe kekeme sɔ o.

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>

Ne èle <nav>mɔfiame si wotu ɖe -dzi zãm la, àte ŋu aɖe asi le eŋu dedie .nav-itemelabena ɖeko .nav-linkwòhiã na atsyã ƒe <a>akpawo.

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>

Ne èdi nusiwo ƒe kekeme sɔ la, zã .nav-justified. Nav kadodowo axɔ teƒe siwo katã le tsia dzi, gake to vovo na esiwo le .nav-filletame la, nav nu ɖesiaɖe ƒe kekeme anɔ ɖeka.

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>

Abe .nav-fillkpɔɖeŋu si wozã <nav>-si wotu ɖe mɔfiame dzi ene.

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>

Dɔwɔwɔ kple flex utilities

Ne èhiã nav tɔtrɔ siwo ɖoa nya ŋu la, bu flexbox dɔwɔnu siwo kplɔ wo nɔewo ɖo zazã ŋu . Togbɔ be nyagbɔgblɔ geɖe wu hã la, dɔwɔnu siawo naa asitɔtrɔ geɖe wu le breakpoints siwo ɖoa nya ŋu me. Le kpɔɖeŋu si le ete me la, míaƒe nav la aƒo ƒu ɖe gbagbãƒe si bɔbɔ wu dzi, emegbe woatrɔ ɖe ɖoɖo si le tsia dzi si ayɔ kekeme si li la me adze egɔme tso gbagbãƒe sue la dzi.

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>

Ku ɖe alesi woate ŋu aɖoe ŋu

Ne èle navs zãm tsɔ le mɔfiame ƒe ʋuƒo nam la, kpɔ egbɔ be yetsɔ a kpe role="navigation"ɖe dzila ƒe nugoe si me susu le wu ŋu le <ul>, alo nàxatsa nu <nav>aɖe ɖe mɔfiame bliboa ŋu. Mègatsɔ akpaa akpe ɖe <ul>eya ŋutɔ ŋu o, elabena esia axe mɔ na mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu be woaɖe gbeƒãe be enye xexlẽdzesi ŋutɔŋutɔ o.

De dzesii be mele be woana mɔfiamewo, ne wowɔ wo le nukpɔkpɔ me abe tabwo kple .nav-tabsklass la ene gɔ̃ hã la , , alo nɔnɔmewo o. Esiawo sɔ na tabbed ƒe ŋgɔdonya siwo trɔna ko, abe alesi woɖe eme le ARIA Authoring Practices Guide tabs pattern me ene. Kpɔ JavaScript ƒe nuwɔna na dynamic tabbed interfaces le akpa sia me hena kpɔɖeŋu. Nɔnɔmea mehiã le dynamic tabbed interfaces dzi o elabena míaƒe JavaScript kpɔa nɔnɔme si nètia la gbɔ to tsɔtsɔ kpe ɖe tab si le dɔ wɔm la dzi.role="tablist"role="tab"role="tabpanel"aria-currentaria-selected="true"

Nusiwo wotsɔna ƒua gbe zazã

Tsɔ nu siwo le tsia dzi kple HTML vi aɖe kpee kple JavaScript ƒe kpeɖeŋutɔ siwo le tsia dzi la kpe ɖe eŋu .

Tab siwo dzi woŋlɔ nu ɖo

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>

Atikekui siwo me wotsɔa atikekuiwo ƒua gbe ɖo

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 ƒe ƒuƒoƒo

Nusiwo trɔna

Wotsɔe kpe ɖe eŋu le v5.2.0 me

Abe Bootstrap ƒe CSS tɔtrɔwo ƒe mɔnu si le tɔtrɔm ƒe akpa aɖe ene la, navs zãa teƒea ƒe CSS tɔtrɔwo fifia le .nav, .nav-tabs, kple .nav-pillshena ɣeyiɣi ŋutɔŋutɔ ƒe tɔtrɔwɔwɔ si wodo ɖe ŋgɔ. Woɖo asixɔxɔwo na CSS ƒe tɔtrɔwo to Sass dzi, eyata Sass ƒe tɔtrɔwɔwɔ gakpɔtɔ doa alɔ, hã.

Le .navgɔmeɖoanyi ƒe klass la dzi la:

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

Le .nav-tabstɔtrɔɖenu ƒe hatsotso la dzi la:

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

Le .nav-pillstɔtrɔɖenu ƒe hatsotso la dzi la:

  --#{$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 ƒe tɔtrɔwo

$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 ƒe nuwɔna

Zã tab JavaScript plugin—de eme ɖekaɖeka alo to bootstrap.jsfaɛl si woƒo ƒu la dzi—be nàkeke míaƒe mɔfiamewo ƒe tabwo kple atikekuiwo ɖe enu be nàwɔ teƒea me nyatakakawo ƒe akpa siwo woate ŋu aƒo tagba ɖo.

Esia nye teƒe aɖewo ƒe nyawo Home tab ƒe nya siwo do ƒome kplii. Ne èzi tab bubu dzi la, atrɔ asi le esiawo ƒe dzedzeme ŋu na esi kplɔe ɖo. JavaScript ƒe tab la trɔa klasswo be wòakpɔ emenyawo ƒe dzedzeme kple woƒe atsyã dzi. Àte ŋu azãe kple tabwo, atikekuiwo, kple .navmɔfianu bubu ɖesiaɖe si ŋu -ŋusẽ le.

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>

Be wòakpe ɖe ŋuwò wòasɔ ɖe wò hiahiãwo nu la, esia wɔa dɔ kple dzesi si wotu ɖe <ul>-dzi, abe alesi woɖee fia le etame ene, alo kple dzesi ɖesiaɖe si nèdi be yeaƒo “ƒo wò ŋutɔ wò” nu. De dzesii be ne èle , zãm <nav>la, mele be nàtsɔe akpe ɖe eŋu role="tablist"tẽ o, elabena esia agblẽ nu le element la ƒe akpa si wòwɔna ŋutɔŋutɔ abe mɔzɔzɔ ƒe dzesi ene ŋu. Ke boŋ trɔ ɖe nu bubu aɖe ŋu (le kpɔɖeŋu si le ete me la, bɔbɔe aɖe <div>) eye nàxatsa ɖe <nav>eŋu.

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

<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 la hã wɔa dɔ kple atikekuiwo.

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>

Eye kple atikekui siwo le tsitrenu. Le mɔ nyuitɔ nu la, le tab siwo le tsitrenu gome la, ele be nàtsɔe akpe aria-orientation="vertical"ɖe tabwo ƒe xexlẽdzesiwo ƒe nugoe la hã ŋu.

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>

Mɔnukpɔkpɔwo ƒe Mɔnukpɔkpɔ

Dynamic tabbed interfaces, abe alesi woɖe eme le ARIA Authoring Practices Guide tabs pattern me ene la, bia role="tablist", role="tab", role="tabpanel", kple aria-nɔnɔme bubuwo be woatsɔ agblɔ woƒe wɔwɔme, dɔwɔwɔ, kple nɔnɔme si li fifia na kpekpeɖeŋu mɔ̃ɖaŋunuwo (abe screen readers ene) zãlawo. Abe nuwɔna nyuitɔ ene la, míeɖo aɖaŋu be nàzã <button>nusiwo le tabawo me, elabena esiawo nye dziɖuɖu siwo hea tɔtrɔ si trɔna vɛ, ke menye kadodo siwo yia axa alo teƒe yeye aɖe dzi o.

Le ɖekawɔwɔ me kple ARIA Authoring Practices ƒe kpɔɖeŋu la, tab si le dɔ wɔm fifia koe xɔa keyboard ƒe susu. Ne wodze JavaScript ƒe kpeɖeŋutɔa gɔme la, aɖo tabindex="-1"tab dziɖunu siwo katã mele dɔ wɔm o la dzi. Ne tab si le dɔ wɔm fifia la nya kpɔ susu ko la, cursor keys la wɔa tab si do ŋgɔ/si kplɔe ɖo la ŋudɔ, eye plugin la trɔa rovingtabindex la ɖe edzi. Ke hã, de dzesii be JavaScript ƒe kpeɖeŋutɔa medea vovototo tab ƒe xexlẽdzesi siwo le tsia dzi kple esiwo le tsia dzi dome ne wole nu ƒom tso cursor key ƒe kadodowo ŋu o: eɖanye aleke kee tab xexlẽdzesia le o, dzi kple miame ƒe fli siaa yia tab si do ŋgɔ la gbɔ, eye yia dzi kple ɖusime fli la yia tab si do ŋgɔ la gbɔ tab si kplɔe ɖo la dzi.

Le goawo katã me la, be keyboard ƒe mɔzɔzɔ nanɔ bɔbɔe la, wokafui be nàna tab panels ŋutɔ hã nate ŋu akpɔ nu, negbe ɖe nu gbãtɔ si me nya siwo ŋu gɔmesese le le tab panel la me le xoxo. JavaScript ƒe kpeɖeŋutɔa medzea agbagba be yeakpɔ akpa sia gbɔ o—le afisi wòasɔ le la, ahiã be nàna wò tab-wo ƒe akpawo nadze ƒã to tabindex="0"wò dzesidenuawo tsɔtsɔ kpee me.

Tab JavaScript ƒe kpeɖeŋutɔa mewɔe nenema o le tabbed interface siwo me dropdown menuwo le ŋu o, elabena esiawo hea zazã kple mɔɖeɖe siaa ƒe kuxiwo vɛ. Le zazã ƒe nukpɔsusu nu la, nyateƒe si wònye be tab si woɖe fia fifia ƒe trigger element medzena enumake o (abe alesi wòle le dropdown menu si wotu la me ene) ateŋu ahe tɔtɔ vɛ. Le mɔnukpɔkpɔ ƒe nukpɔsusu nu la, mɔ si me susu le aɖeke meli fifia si dzi woato awɔ xɔtuɖoɖo sia ƒomevi ƒe nɔnɔmetata ɖe WAI ARIA ƒe ɖoɖo si sɔ nu o, si fia be womate ŋu ana kpekpeɖeŋu mɔ̃ɖaŋunuwo zazãlawo nase egɔme bɔbɔe o.

Nyatakaka ƒe nɔnɔmewo zazã

Àte ŋu awɔ tab alo pill navigation ŋudɔ JavaScript aɖeke maŋlɔ to element aɖe gbɔgblɔ data-bs-toggle="tab"alo ɖe edzi ko me. data-bs-toggle="pill"Zã nyatakaka ƒe nɔnɔme siawo le .nav-tabsalo .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>

To JavaScript dzi

Na tabbable tabs nawɔ dɔ to JavaScript dzi (ele be woawɔ tab ɖesiaɖe ŋudɔ ɖekaɖeka):

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

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

Àte ŋu awɔ tab ɖekaɖekawo ŋudɔ le mɔ vovovowo nu:

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 ƒe ŋusẽkpɔɖeamedzi

Be nàna tabwo naɖiɖi la, tsɔe kpe .fadeɖe wo dometɔ ɖesiaɖe .tab-paneŋu . Ele be tab ƒe akpa gbãtɔ hã .shownana nya siwo le gɔmedzedzea me la nadze.

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

Mɔnuwo

Mɔnu siwo mewɔ ɖeka kple ɣeyiɣi aɖeke o kple tɔtrɔwo

API mɔnuwo katã nye asynchronous eye wodzea tɔtrɔ gɔme . Wotrɔna yia ame si le ka ƒom na la gbɔ ne wonya dze tɔtrɔa gɔme ko gake hafi wòwu enu . Tsɔ kpe ɖe eŋu la, woaŋe aɖaba aƒu mɔnu ƒe yɔyɔ aɖe dzi le akpa si le tɔtrɔm dzi .

Kpɔ míaƒe JavaScript nuŋlɔɖiwo hena nyatakaka bubuwo .

Ewɔa wò nyatakakawo ŋudɔ abe tab ƒe akpa aɖe ene.

Àteŋu awɔ tab ƒe kpɔɖeŋu kple xɔtula, le kpɔɖeŋu me:

const bsTab = new bootstrap.Tab('#myTab')

Nuwɔmɔnu	Nuɖᴐɖᴐ
`dispose`	Egblẽa nu le element aɖe ƒe tab ŋu.
`getInstance`	Static mɔnu si ɖea mɔ na wò be nàxɔ tab ƒe kpɔɖeŋu si do ƒome kple DOM element aɖe, àteŋu azãe ale: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Static mɔnu si trɔa tab ƒe kpɔɖeŋu si do ƒome kple DOM element alo wɔa yeye nenye be womedze egɔme o. Àte ŋu azãe ale: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Tia tab si wona eye wòaɖe eƒe akpa si do ƒome kplii afia. Tab bubu ɖesiaɖe si wotia va yi la va zua esi wometia o eye eƒe akpa si do ƒome kplii la ɣlana. Trɔ yi yɔla gbɔ hafi woɖe tab ƒe akpaa fia ŋutɔŋutɔ (si nye hafi `shown.bs.tab`nudzɔdzɔa nadzɔ).

Nudzɔdzɔwo

Ne èle tab yeye aɖe ɖem fia la, nudzɔdzɔawo dzona le ɖoɖo si gbɔna nu:

hide.bs.tab(le tab si le dɔ wɔm fifia dzi)
show.bs.tab(le tab si woaɖe afia la dzi)
hidden.bs.tab(le tab si le dɔ wɔm va yi dzi la, esi le hide.bs.tabnudzɔdzɔa gome la ke)
shown.bs.tab(le tab si woɖe fia teti koe nye ema si le dɔ wɔm yeyee la dzi la, esi sɔ kple esi wowɔ na show.bs.tabwɔnaa tɔ)

Ne tab aɖeke menɔ dɔ wɔm xoxo o la, ekema womaɖe asi le hide.bs.tabkple nudzɔdzɔawo ŋu o.hidden.bs.tab

Nudzɔdzɔ ƒomevi	Nuɖᴐɖᴐ
`hide.bs.tab`	Nudzɔdzɔ sia doa dzo ne woaɖe tab yeye aɖe afia (eye to esia me la, woaɣla tab si le dɔ wɔm va yi). Zã `event.target`kple `event.relatedTarget`nàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm fifia kple tab yeye si awɔ dɔ kpuie la, ɖe wo nɔewo yome.
`hidden.bs.tab`	Nudzɔdzɔ sia dzona ne woɖe tab yeye aɖe fia vɔ (eye to esia me la, woɣla tab si le dɔ wɔm va yi). Zã `event.target`kple `event.relatedTarget`nàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm va yi kple tab yeye si le dɔ wɔm la, ɖe wo nɔewo yome.
`show.bs.tab`	Nudzɔdzɔ sia dzona le tab show dzi, gake hafi woaɖe tab yeyea afia. Zã `event.target`kple `event.relatedTarget`nàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm kple tab si le dɔ wɔm va yi (ne ele eme) ɖe wo nɔewo yome.
`shown.bs.tab`	Nudzɔdzɔ sia dzona le tab ɖeɖefia me ne woɖe tab aɖe fia vɔ. Zã `event.target`kple `event.relatedTarget`nàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm kple tab si le dɔ wɔm va yi (ne ele eme) ɖe wo nɔewo yome.

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