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ɛ 'sèn Bɔ, 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ɔ.

<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" href="#" tabindex="-1" aria-disabled="true">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ɛ.

<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" href="#" tabindex="-1" aria-disabled="true">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:

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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).

<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" href="#" tabindex="-1" aria-disabled="true">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.

<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" href="#" tabindex="-1" aria-disabled="true">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 .

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Furakisɛw

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

<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" href="#" tabindex="-1" aria-disabled="true">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.

<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" href="#" tabindex="-1" aria-disabled="true">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.

<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" href="#" tabindex="-1" aria-disabled="true">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.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

A bɛ tali kɛ .nav-fillmisali la min bɛ baara kɛ ni <nav>-based navigation 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" href="#" tabindex="-1" aria-disabled="true">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.

<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" href="#" tabindex="-1" aria-disabled="true">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. Olu 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 WAI ARIA sɛbɛnnikɛcogo 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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Furakisɛw ni furakisɛw

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Sass ye

Yɛlɛma-yɛlɛmaw

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

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

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

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.

Dynamic tabbed interfaces, i n’a fɔ a ɲɛfɔlen bɛ cogo min na WAI ARIA Authoring Practices 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.

A kɔlɔsi ko dynamic tabbed interfaces man kan ka kɛ 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ɛ.

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.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

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>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

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

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

Ani ni furakisɛ jɔlenw ye.

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

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

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>
</div>

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

JavaScript fɛ

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

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

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

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

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
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">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

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

constructor

A bɛ tab element ni kɔnɔkow minɛn dɔ baara. Tab ka kan ka kɛ ni data-bs-targetwalima, ni a bɛ baara kɛ ni jɛgɛnsira ye, fɛn dɔ href, min bɛ minɛn node dɔ laɲini DOM kɔnɔ.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

k'a jira

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

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

  tab.show()

ka a fili

A bɛ element dɔ ka tab tiɲɛ.

getInstance ye

Static method min b’a to i bɛ se ka tab instance sɔrɔ min bɛ tali kɛ DOM element dɔ la

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

sɔrɔWala ka Instance Dabɔ

Static method min b’a To i bɛ se ka tab instance sɔrɔ min bɛ tali Kɛ DOM element dɔ la, walima ka kura Dabɔ n’a sɔrɔla a ma daminɛ

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

Ko minnu kɛra

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

hide.bs.tab(tab min bɛ baara la sisan)
show.bs.tab(tabu min bɛna jira, o kan)
hidden.bs.tab(tab active tɛmɛnen kan, o ni hide.bs.tabko kɛlen ta ye kelen ye)
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
`show.bs.tab`	Nin ko in bɛ tasuma don tab jirali la, nka sanni tab kura ka jira. Baara kɛ `event.target`ni ani `event.relatedTarget`ye 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.target`ni ani `event.relatedTarget`ye walasa ka tablo active ani tab active tɛmɛnen (ni o bɛ sɔrɔ) laɲini.
`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.target`ni ani `event.relatedTarget`ye 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.target`ni ani `event.relatedTarget`ye walasa ka tab baarakɛta tɛmɛnen ni tab baarakɛta kura laɲini, o cogo kelen na.

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})