Navs ne tabs

Ebiwandiiko n'ebyokulabirako ku ngeri y'okukozesaamu ebitundu by'okutambuliramu ebirimu Bootstrap.

Ku muko guno

Base nav

Navigation esangibwa mu Bootstrap egabana general markup ne styles, okuva ku base .navclass okutuuka ku active ne disabled states. Wap modifier classes okukyusa wakati wa buli sitayiro.

Ekitundu kya base .navkizimbibwa ne flexbox era kiwa omusingi omunywevu ogw’okuzimba ebika byonna eby’ebitundu by’okutambuliramu. Mulimu ebimu ku bikozesebwa mu kukola sitayiro (okukola n’enkalala), ebimu ku biyungo by’okuyunga ku bitundu ebinene ebikubwa, n’okukola sitayiro okulemesa okusookerwako.

Ekitundu eky’omusingi .navtekirimu .activembeera yonna. Ebyokulabirako bino wammanga mulimu ekibiina, okusinga okulaga nti kiraasi eno entongole tesitula sitayiro yonna ey’enjawulo.

Okutuusa embeera ekola ku tekinologiya ayamba, kozesa aria-currentekintu — ng’okozesa pageomuwendo gw’olupapula oluliwo kati, oba trueku kintu ekiriwo kati mu seti.

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

Classes zikozesebwa wonna, kale markup yo esobola okuba super flexible. Kozesa <ul>s nga waggulu, <ol>singa ensengeka y’ebintu byo eba nkulu, oba roll your own with a <nav>element. Kubanga the .navuses display: flex, enkolagana za nav zeeyisa kye kimu nga ebintu bya nav bwe byandikoze, naye awatali markup ey'enjawulo.

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

Emisono egiriwo

Kyusa sitayiro ya .navs component ne modifiers ne utilities. Tabula okwatagane nga bwe kyetaagisa, oba zimba eyiyo.

Okulaganya okw’okwebungulula

Kyusa okulaganya okw'okwebungulula kwa nav yo n'ebikozesebwa bya flexbox . Nga bwekiba, navs ziteekeddwa ku kkono, naye osobola bulungi okuzikyusa okudda wakati oba ku ddyo.

Wakkati ne .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>

Ekwatagana ku ddyo ne .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>

Okwesimba

Stack navigation yo nga okyusa flex item direction ne .flex-columnutility. Olina okuzituuma ku viewports ezimu naye nga si ndala? Kozesa enkyusa eziddamu (okugeza, .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>

Nga bulijjo, okutambulira mu bbanga (vertical navigation) kisoboka awatali <ul>s, nakyo.

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

Ebitabo ebiyitibwa Tabs

Atwala basic nav okuva waggulu n'agattako .nav-tabsclass okukola tabbed interface. Zikozese okukola ebitundu ebirina tabba nga tukozesa tab yaffe JavaScript plugin .

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

Empeke

Twala HTML eyo y’emu, naye kozesa .nav-pillsmu kifo ky’ekyo:

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

Jjuza era oweebwe obutuufu

Force your .nav's contents okugaziya obugazi obujjuvu obuliwo ekimu ku bibiri ebikyusa ebika. Okujjuza mu kigerageranyo ekifo kyonna ekiriwo ne .nav-items yo, kozesa .nav-fill. Weetegereze nti ekifo kyonna eky’okwebungulula kikwatibwa, naye si buli kintu kya nav nti kirina obugazi bwe bumu.

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

Nga okozesa <nav>-based navigation, osobola okulekawo awatali bulabe .nav-itemnga kyokka .nav-linkkye kyetaagisa ku <a>elementi z'okukola sitayiro.

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

Ku bintu eby’obugazi obwenkanankana, kozesa .nav-justified. Ekifo kyonna eky’okwebungulula kijja kuba kya nav links, naye obutafaananako ebyo .nav-fillwaggulu, buli kintu kya nav kijja kuba kya bugazi bwe bumu.

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

Okufaananako .nav-filln'ekyokulabirako nga tukozesa -okutambulira ku <nav>-based navigation.

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

Okukola ne flex utilities

Bw’oba weetaaga enkyukakyuka za nav eziddamu, lowooza ku kukozesa omuddirirwa gwa flexbox utilities . Wadde nga zisingako ebigambo, ebikozesebwa bino biwa okulongoosa okusingawo mu bifo eby’okumenyawo ebiddamu. Mu kyokulabirako wansi, nav yaffe ejja kutumbibwa ku breakpoint esinga wansi, olwo ekwatagana ne horizontal layout ejjuza obugazi obuliwo okutandika okuva ku breakpoint entono.

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

Ku bikwata ku kutuuka ku bantu

Bw’oba okozesa navs okuwa ebbaala y’okutambuliramu, kakasa nti ossaako a role="navigation"ku kibya ky’omuzadde ekisinga okutegeerekeka ekya <ul>, oba okuzinga <nav>ekintu okwetooloola okutambulira kwonna. Togattako kifo ku <ul>kyo, kubanga kino kyandiguremesezza okulangirirwa ng’olukalala lwennyini nga tekinologiya ayamba.

Weetegereze nti ebbaala z’okutambuliramu, ne bwe ziba nga zikoleddwa mu ngeri ey’okulaba nga tabu ne .nav-tabskiraasi, tezirina kuweebwa role="tablist", role="tab"oba role="tabpanel"ebifaananyi. Bino bituukira ddala ku nkolagana za tabbe ezikyukakyuka zokka, nga bwe kinyonyoddwa mu WAI ARIA Authoring Practices . Laba enneeyisa ya JavaScript ku dynamic tabbed interfaces mu kitundu kino ekyokulabirako. Attribute aria-currenttekyetaagisa ku dynamic tabbed interfaces okuva JavaScript yaffe bwekwata embeera erongooseddwa nga egatta aria-selected="true"ku active tab.

Okukozesa ebifo ebikka wansi

Okwongerako menu ezikka wansi nga olina HTML akatono ak'enjawulo n'ebigwa JavaScript plugin .

Taabu eziriko ebigwa wansi

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

Empeke eziriko ebitonnya

<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 nga bwe kiri

Enkyukakyuka ezikyukakyuka

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

Enneeyisa ya JavaScript

Kozesa tabu JavaScript plugin —giteekemu kinnoomu oba okuyita mu bootstrap.jsfayiro ekung’aanyiziddwa —okugaziya tabu zaffe ez’okutambuliramu n’empeke okukola tabbable panes ez’ebirimu eby’omu kitundu.

Dynamic tabbed interfaces, nga bwe kinyonyoddwa mu WAI ARIA Authoring Practices , zeetaaga role="tablist", role="tab", role="tabpanel", n’ebintu ebirala aria-okusobola okutuusa ensengeka yazo, enkola n’embeera eriwo kati eri abakozesa tekinologiya ayamba (nga screen readers). Nga enkola esinga obulungi, tusaba okukozesa <button>ebintu ku tabu, kubanga bino bye bifuga ebivaako enkyukakyuka ekyukakyuka, okusinga enkolagana ezigenda ku lupapula oba ekifo ekipya.

Weetegereze nti dynamic tabbed interfaces tezirina kubaamu dropdown menus, kubanga kino kireeta byombi enkozesa n'okutuuka ku nsonga. Okusinziira ku ndowooza y'okukozesa, eky'okuba nti ekintu ekiziyiza ekya tabu eragiddwa mu kiseera kino tekirabika mangu (nga bwe kiri munda mu menu eggaddwa) kiyinza okuleeta okutabulwa. Okusinziira ku ndowooza y’okutuuka ku bantu, mu kiseera kino tewali ngeri ya magezi ey’okukola maapu y’ekika kino eky’okuzimba ku nkola ya WAI ARIA eya bulijjo, ekitegeeza nti tekiyinza kyangu kufuulibwa kitegeerekeka eri abakozesa tekinologiya ayamba.

Kino kye kimu ku bikwata ku kifo the Home tab's associated content. Okunyiga ku tabu endala kijja kukyusa okulaba kwa eno okudda ku ddako. Taabu JavaScript ewanyisiganya kiraasi okufuga okulabika kw’ebirimu n’okukola sitayiro. Osobola okugikozesa ne tabu, empeke, n'endala yonna .nav-powered navigation.

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>

Okuyamba okutuukana n’ebyetaago byo, kino kikola ne <ul>-based markup, nga bwe kiragibwa waggulu, oba ne markup yonna ey’okwesalirawo “roll your own”. Weetegereze nti bw'oba okozesa <nav>, tolina kugigattako role="tablist"butereevu, kubanga kino kyandisukkiridde omulimu gw'ekintu enzaalwa ng'akabonero k'okutambuliramu. Mu kifo ky’ekyo, kyusa ku elementi endala (mu kyokulabirako wansi, ennyangu <div>) era ozinge <nav>ekikyetoolodde.

<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 nayo ekola ne pills.

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

Era nga balina empeke eziyimiridde.

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>

Okukozesa ebikwata ku data

Osobola okukola tab oba pill navigation nga towandiise JavaScript yonna nga omala kulaga data-bs-toggle="tab"oba data-bs-toggle="pill"ku elementi. Kozesa bino ebikwata ku data ku .nav-tabsoba .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>

Okuyita mu JavaScript

Ssobozesa tabu eziriko tabba ng’oyita mu JavaScript (buli tabu yeetaaga okukozesebwa kinnoomu):

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

Osobola okukola tabu ssekinnoomu mu ngeri eziwerako:

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 effect

Okusobola okufuula tabu okuzikira mu, yongera .fadeku buli .tab-pane. Ekipande kya tabu ekisooka nakyo kirina okuba nga .showkirina okufuula ebirimu ebisooka okulabika.

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

Enkola

Enkola ezitakwatagana n’enkyukakyuka

Enkola zonna eza API tezikwatagana era zitandika enkyukakyuka . Zidda eri oyo akubye amangu ddala ng'enkyukakyuka etandise naye nga tennaggwa . Okugatta ku ekyo, okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .

Laba ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo .

constructor

Ekola ekintu kya tabu n'ekintu ekirimu. Tab erina okuba ne data-bs-targetoba, singa ekozesa link, hrefattribute, nga etunuulira node ya container mu DOM.

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

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

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

  firstTab.show()
</script>

okulaga

Londa tabu eweereddwa era eraga ekitundu kyayo ekikwatagana. Taabu endala yonna eyalondebwa emabegako efuuka etalondeddwa era ekipande kyayo ekikwatagana ne kikwekebwa. Edda eri omuyita nga ekitundu kya tabu tekinnalagibwa ddala (kwe kugamba nga shown.bs.tabekintu tekinnabaawo).

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

  tab.show()

okusuula

Esaanyaawo tabu ya elementi.

getEkyokulabirako

Enkola ya static ekusobozesa okufuna tab instance ekwatagana ne DOM element

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

funaObaTondawoEkifaananyi

Enkola ya static ekusobozesa okufuna tab instance ekwatagana ne DOM element, oba okukola empya singa teyali etandikibwawo

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

Ebibaddewo

Nga olaga tabu empya, ebibaawo bikuba amasasi mu nsengeka eno wammanga:

hide.bs.tab(ku tabu ekola kati)
show.bs.tab(ku kitundu ekigenda okulagibwa)
hidden.bs.tab(ku tabu ekola emabega, y’emu hide.bs.tabn’ey’omukolo)
shown.bs.tab(ku kitundu ekipya-ekikola ekyaakalagibwa, kye kimu show.bs.tabn'eky'omukolo)

Singa tewali tabu yali yakola dda, olwo hide.bs.tabne hidden.bs.tabevents tezijja kugobwa.

Ekika ky’ekintu ekibaawo	Okunnyonnyola
`show.bs.tab`	Ekintu kino kikuba omuliro ku tab show, naye nga tab empya tennalagibwa. Kozesa `event.target`ne `event.relatedTarget`okutunuulira tabu ekola ne tabu ekola eyasooka (bwe kiba nga kiriwo) mu kulondako.
`shown.bs.tab`	Ekintu kino kikuba omuliro ku tab show oluvannyuma lwa tab okulagibwa. Kozesa `event.target`ne `event.relatedTarget`okutunuulira tabu ekola ne tabu ekola eyasooka (bwe kiba nga kiriwo) mu kulondako.
`hide.bs.tab`	Ekintu kino kikuba omuliro nga tabu empya egenda kulagibwa (era bwe kityo tabu ekola eyasooka erina okukwekebwa). Kozesa `event.target`ne `event.relatedTarget`okutunuulira tabu ekola kati ne tabu empya egenda okukola mu bbanga ttono, mu kulondako.
`hidden.bs.tab`	Ekintu kino kikuba omuliro oluvannyuma lwa tabu empya okulagibwa (era bwe kityo tabu ekola eyasooka ekwekebwa). Kozesa `event.target`ne `event.relatedTarget`okutunuulira tabu ekola emabega ne tabu empya ekola, mu kulondako.

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