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.

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>

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.

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>

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:

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>

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

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

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>

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

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>

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 .

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>

Empeke

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

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>

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.

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>

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

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>

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.

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>

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

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>

Okukola ne flex utilities

Bw’oba weetaaga enkyukakyuka za nav eziddamu, lowooza ku kukozesa omuddirirwa gwa flexbox utilities . Wadde nga ebigambo ebisingawo, 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.

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 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 ARIA Authoring Practices Guide tabs pattern . 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

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>

Empeke eziriko ebitonnya

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

Enkyukakyuka ezikyukakyuka

Yayongerwako mu v5.2.0

Nga ekitundu ku nkola ya Bootstrap egenda ekulaakulana enkyukakyuka za CSS, navs kati zikozesa enkyukakyuka za CSS ez’omu kitundu ku .nav, .nav-tabs, era .nav-pillsolw’okulongoosa okw’ekiseera ekituufu okulongooseddwa. Emiwendo gy'enkyukakyuka za CSS giteekebwawo nga giyita mu Sass, kale okulongoosa Sass kukyawagirwa, nakyo.

Ku .navkiraasi ya base:

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

Ku .nav-tabskiraasi y'omukyusa:

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

Ku .nav-pillskiraasi y'omukyusa:

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

Enkyukakyuka za Sass

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

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.

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.

Kino kye kimu ku bikwata ku kifo ebirimu ebikwatagana ne tabu ya Profile . 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 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>

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. Wabula, kyusa ku elementi endala (mu kyokulabirako wansi, a simple <div>) era ozinge ku <nav>kyo.

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.

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

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>

Era nga balina empeke eziyimiridde. Ekisinga obulungi, ku tabu ezeesimbye, olina n'okwongera aria-orientation="vertical"ku kibya ky'olukalala lwa tabu.

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>

Okutuuka ku bantu

Dynamic tabbed interfaces, nga bwe kinyonyoddwa mu ARIA Authoring Practices Guide tabs pattern , zeetaaga role="tablist", role="tab", role="tabpanel", n’ebintu ebirala aria-okusobola okutuusa ensengeka yaabwe, 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.

Mu kukwatagana n'enkola ya ARIA Authoring Practices, tabu yokka ekola mu kiseera kino efuna essira ku kibboodi. JavaScript plugin bwetandikibwawo, ejja kuteeka tabindex="-1"ku bifuga byonna ebya tabu ebitali bikola. Taabu ekola mu kiseera kino bw’emala okufuna focus, ebisumuluzo bya cursor bikola tab eyasooka/eddako, nga plugin ekyusa rovingtabindex okusinziira ku ekyo. Naye, weetegereze nti JavaScript plugin teyawula wakati w’enkalala za tabu ez’okwesimbye n’ez’okwesimbye bwe kituuka ku nkolagana y’ebisumuluzo bya cursor: awatali kufaayo ku ludda lwa lukalala lwa tabu, cursor zombi waggulu ne kkono zigenda ku tabu eyasooka, ate cursor wansi ne ddyo zigenda ku ekitundu ekiddako.

Okutwaliza awamu, okusobola okwanguyiza okutambulira ku kibboodi, kirungi okufuula ebipande bya tabu byennyini ebitunuulirwa nabyo, okuggyako ng’ekintu ekisooka ekirimu ebirimu eby’amakulu munda mu kipande kya tabu kyateekebwa dda okussa essira. JavaScript plugin tegezaako kukwata nsonga eno —we kiba kituufu, ojja kwetaaga okufuula mu bulambulukufu ebipande byo ebya tab okubeera ebitunuulirwa ng’oyongera tabindex="0"mu markup yo.

Tab JavaScript plugin tewagira tabbed interfaces ezirimu dropdown menus, kubanga zino zireeta ensonga zombi ez'okukozesa n'okutuuka. 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.

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 element. 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" 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>

Okuyita mu JavaScript

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

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

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

Osobola okukola tabu ssekinnoomu mu ngeri eziwerako:

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

Enkola

Enkola ezitakwatagana n’enkyukakyuka

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

Laba ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo .

Ekola ebirimu byo nga ekintu kya tabu.

Osobola okukola ekifaananyi kya tabu n'omuzimbi, okugeza:

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

Engeri	Okunnyonnyola
`dispose`	Esaanyaawo tabu ya elementi.
`getInstance`	Enkola ya static ekusobozesa okufuna tab instance ekwatagana ne DOM element, osobola okugikozesa nga eno: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Enkola ya static ezzaayo ekifaananyi kya tab ekikwatagana ne elementi ya DOM oba okukola ekipya singa kiba nga tekitandikibwawo. Osobola okugikozesa bw’otyo: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	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.tab`ekintu tekinnabaawo).

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

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