Navs kaj langetoj

Dokumentado kaj ekzemploj pri kiel uzi la inkluditajn navigadajn komponantojn de Bootstrap.

Sur ĉi tiu paĝo

Baznav

Navigado disponebla en Bootstrap kunhavas ĝeneralan markadon kaj stilojn, de la baza .navklaso ĝis la aktivaj kaj malfunkciigitaj ŝtatoj. Interŝanĝu modifklasojn por ŝanĝi inter ĉiu stilo.

La baza .navkomponanto estas konstruita kun flexbox kaj provizas fortan fundamenton por konstrui ĉiajn navigajn komponantojn. Ĝi inkluzivas iujn stilajn anstataŭojn (por labori kun listoj), iujn ligilojn por pli grandaj trafaj areoj kaj bazan malfunkciigitan stilon.

La baza .navkomponanto ne inkluzivas ajnan .activeŝtaton. La sekvaj ekzemploj inkluzivas la klason, ĉefe por pruvi, ke ĉi tiu aparta klaso ne ekigas ajnan specialan stilon.

Por transdoni la aktivan staton al helpaj teknologioj, uzu la aria-currentatributon — uzante la pagevaloron por nuna paĝo aŭ truepor la nuna ero en aro.

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>

Klasoj estas uzataj ĉie, do via markado povas esti tre fleksebla. Uzu <ul>s kiel supre, <ol>se la ordo de viaj aĵoj estas grava, aŭ rulu vian propran per <nav>elemento. Ĉar la .navuzoj display: flex, la nav-ligiloj kondutas same kiel nav-eroj, sed sen la ekstra markado.

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>

Disponeblaj stiloj

Ŝanĝu la stilon de .navs-komponento per modifiloj kaj utilecoj. Miksu kaj kongruu laŭbezone, aŭ konstruu vian propran.

Horizontala vicigo

Ŝanĝu la horizontalan vicigon de via nav per flexbox -utiloj . Defaŭlte, navigacioj estas maldekstre vicigitaj, sed vi povas facile ŝanĝi ilin al centra aŭ dekstre vicigitaj.

Centrita kun .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>

Dekstre vicigita kun .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>

Vertikala

Staku vian navigadon ŝanĝante la flekseblan direkton per la .flex-columnilo. Ĉu vi bezonas stakigi ilin sur iuj videjoj sed ne aliaj? Uzu la respondemajn versiojn (ekz., .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>

Kiel ĉiam, vertikala navigado ankaŭ eblas sen <ul>s.

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>

Langetoj

Prenas la bazan navigacion de supre kaj aldonas la .nav-tabsklason por generi langetan interfacon. Uzu ilin por krei tabulajn regionojn per nia langeto JavaScript-kromaĵ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">
    <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>

Piloloj

Prenu tiun saman HTML, sed uzu .nav-pillsanstataŭe:

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>

Plenigu kaj pravigu

Devigu vian .navenhavon etendi la plenan disponeblan larĝon unu el du modifklasoj. Por proporcie plenigi la tutan disponeblan spacon per viaj .nav-items, uzu .nav-fill. Rimarku, ke la tuta horizontala spaco estas okupita, sed ne ĉiu nav-elemento havas la saman larĝon.

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>

Kiam vi uzas <nav>navigadon, vi povas sekure preterlasi .nav-itemkiel nur .nav-linknecesas por stilaj <a>elementoj.

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>

Por egallarĝaj elementoj, uzu .nav-justified. La tuta horizontala spaco estos okupita de nav-ligiloj, sed male al la .nav-fillsupre, ĉiu nav-elemento estos la sama larĝo.

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>

Simile al la .nav-fillekzemplo uzante <nav>-bazitan navigacion.

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>

Laborante kun fleksaj utilecoj

Se vi bezonas respondemajn nav-variojn, konsideru uzi serion de flexbox-ilaĵoj . Kvankam pli multvortaj, ĉi tiuj iloj ofertas pli grandan personigon tra respondemaj rompopunktoj. En la malsupra ekzemplo, nia navigacio estos stakigita sur la plej malalta rompopunkto, tiam adaptiĝos al horizontala aranĝo, kiu plenigas la disponeblan larĝon ekde la malgranda rompopunkto.

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>

Pri alirebleco

Se vi uzas navs por provizi navigadbreton, nepre aldonu role="navigation"al la plej logika gepatra ujo de la <ul>, aŭ envolvu <nav>elementon ĉirkaŭ la tuta navigado. Ne aldonu la rolon al la <ul>mem, ĉar tio malhelpus ĝin esti anoncita kiel reala listo de helpaj teknologioj.

Notu, ke navigadbretoj, eĉ se vide stilitaj kiel langetoj kun la .nav-tabsklaso, ne devus esti donitaj role="tablist", role="tab"aŭ role="tabpanel"atributoj. Ĉi tiuj taŭgas nur por dinamikaj langetaj interfacoj, kiel priskribite en la ŝablono de langetoj de ARIA Authoring Practices Guide . Vidu JavaScript-konduton por dinamikaj langetaj interfacoj en ĉi tiu sekcio por ekzemplo. La aria-currentatributo ne estas necesa ĉe dinamikaj langetaj interfacoj ĉar nia JavaScript pritraktas la elektitan staton aldonante aria-selected="true"la aktivan langeton.

Uzante falmenuojn

Aldonu falmenuojn kun iom kroma HTML kaj la falmenuojn JavaScript kromaĵo .

Langetoj kun falmenuoj

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>

Piloloj kun falmenuoj

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

Variabloj

Aldonita en v5.2.0

Kiel parto de la aliro de evoluantaj CSS-variabloj de Bootstrap, nav-oj nun uzas lokajn CSS-variablojn sur .nav, .nav-tabs, kaj .nav-pillspor plibonigita realtempa personigo. Valoroj por la CSS-variabloj estas fiksitaj per Sass, do ankaŭ Sass-adaptigo ankoraŭ estas subtenata.

Sur la .navbaza klaso:

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

Sur la .nav-tabsmodifklaso:

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

Sur la .nav-pillsmodifklaso:

  --#{$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-variabloj

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

Uzu la langeton JavaScript-kromaĵon—inkludu ĝin individue aŭ per la kompilita bootstrap.jsdosiero—por etendi niajn navigaciajn langetojn kaj pilolojn por krei tabeleblajn fenestrojn de loka enhavo.

Ĉi tio estas iu lokokupilo enhavo de la Hejma langeto asociita enhavo. Alklakante alian langeton malŝaltos la videblecon de ĉi tiu por la sekva. La langeto JavaScript interŝanĝas klasojn por kontroli la enhavvideblon kaj stilon. Vi povas uzi ĝin per langetoj, piloloj kaj ajna alia .navnavigado.

Ĉi tio estas iu lokokupilo enhavo la rilata enhavo de la langeto Profilo . Alklakante alian langeton malŝaltos la videblecon de ĉi tiu por la sekva. La langeto JavaScript interŝanĝas klasojn por kontroli la enhavvideblon kaj stilon. Vi povas uzi ĝin per langetoj, piloloj kaj ajna alia .navnavigado.

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>

Por helpi adapti viajn bezonojn, ĉi tio funkcias kun <ul>-bazita markado, kiel montrite supre, aŭ kun ajna arbitra "ruli vian propran" markadon. Notu, ke se vi uzas <nav>, vi ne aldonu role="tablist"rekte al ĝi, ĉar ĉi tio superregus la denaskan rolon de la elemento kiel navigada orientilo. Anstataŭe, ŝanĝu al alternativa elemento (en la malsupra ekzemplo, simpla <div>) kaj envolvu <nav>ĝin ĉirkaŭ ĝi.

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>

La tabs kromaĵo ankaŭ funkcias kun piloloj.

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>

Kaj kun vertikalaj piloloj. Ideale, por vertikalaj langetoj, vi ankaŭ devus aldoni aria-orientation="vertical"al la klapeta listo ujo.

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>

Alirebleco

Dinamikaj klapetinterfacoj, kiel priskribite en la ARIA Authoring Practices Guide tabs-ŝablono , postulas role="tablist", role="tab", role="tabpanel", kaj kromajn aria-atributojn por transdoni sian strukturon, funkciecon, kaj nunan staton al uzantoj de helpaj teknologioj (kiel ekzemple ekranlegiloj). Kiel plej bona praktiko, ni rekomendas uzi <button>elementojn por la langetoj, ĉar ĉi tiuj estas kontroloj kiuj ekigas dinamikan ŝanĝon, prefere ol ligiloj kiuj navigas al nova paĝo aŭ loko.

Konforme al la ŝablono ARIA Authoring Practices, nur la aktuale aktiva langeto ricevas klavaran fokuson. Kiam la JavaScript-kromaĵo estas pravaligita, ĝi instalos tabindex="-1"ĉiujn neaktivajn langetajn kontrolojn. Post kiam la aktuale aktiva langeto havas fokuson, la kursorklavoj aktivigas la antaŭan/sekvan langeton, kun la kromaĵo ŝanĝas la vagadontabindex laŭe. Tamen, notu, ke la JavaScript-kromaĵo ne distingas inter horizontalaj kaj vertikalaj langetoj se temas pri kursorklavaj interagoj: sendepende de la orientiĝo de la langeto listo, kaj la supre kaj maldekstra kursoro iras al la antaŭa langeto, kaj malsupren kaj dekstra kursoro iras al . la sekva langeto.

Ĝenerale, por faciligi klavarnavigadon, oni rekomendas fari la langetajn panelojn mem enfokuseblaj ankaŭ, krom se la unua elemento enhavanta signifoplenan enhavon ene de la langeto panelo jam estas enfokusebla. La JavaScript-kromaĵo ne provas pritrakti ĉi tiun aspekton—se konvene, vi devos eksplicite igi viajn langetajn panelojn enfokuseblaj aldonante tabindex="0"vian markadon.

La langeta JavaScript-kromaĵo ne subtenas langetajn interfacojn, kiuj enhavas falmenuojn, ĉar ĉi tiuj kaŭzas problemojn pri uzeblo kaj alirebleco. De uzeblo-perspektivo, la fakto, ke la ellasilelemento de la aktuale montrita langeto ne estas tuj videbla (ĉar ĝi estas ene de la fermita falmenuo) povas kaŭzi konfuzon. De alirebleco vidpunkto, ekzistas nuntempe neniu prudenta maniero mapi ĉi tiun specon de konstrukcio al norma WAI ARIA-ŝablono, signifante ke ĝi ne povas esti facile komprenebla por uzantoj de helpaj teknologioj.

Uzante datumajn atributojn

Vi povas aktivigi langeton aŭ pilolan navigadon sen skribi JavaScript per simple specifi data-bs-toggle="tab"aŭ data-bs-toggle="pill"sur elemento. Uzu ĉi tiujn datumajn atributojn sur .nav-tabsaŭ .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>

Per JavaScript

Ebligu tabulajn langetojn per JavaScript (ĉiu langeto devas esti aktivigita individue):

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

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

Vi povas aktivigi individuajn langetojn en pluraj manieroj:

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 efiko

Por ke klapetoj fadiĝu, aldonu .fadeal ĉiu .tab-pane. La unua klapeta panelo ankaŭ devas .showvidigi la komencan enhavon.

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

Metodoj

Nesinkronaj metodoj kaj transiroj

Ĉiuj API-metodoj estas nesinkronaj kaj komencas transiron . Ili revenas al la alvokanto tuj kiam la transiro estas komencita sed antaŭ ol ĝi finiĝas . Krome, metodovoko sur transira komponento estos ignorita .

Vidu nian JavaScript-dokumentaron por pliaj informoj .

Aktivigas vian enhavon kiel tabula elemento.

Vi povas krei langeton per la konstrukciisto, ekzemple:

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

Metodo	Priskribo
`dispose`	Detruas la langeton de elemento.
`getInstance`	Senmova metodo, kiu ebligas al vi akiri la langeton-instancon asociitan kun DOM-elemento, vi povas uzi ĝin jene: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Senmova metodo kiu resendas langeto-okazaĵon asociitan al DOM-elemento aŭ kreas novan se ĝi ne estis pravigita. Vi povas uzi ĝin tiel: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Elektas la donitan langeton kaj montras ĝian rilatan panelon. Ajna alia langeto, kiu estis antaŭe elektita, fariĝas neelektita kaj ĝia rilata panelo estas kaŝita. Revenas al la alvokanto antaŭ ol la langeto-fenestro efektive estis montrita (te antaŭ ol la `shown.bs.tab`evento okazas).

Eventoj

Kiam oni montras novan langeton, la eventoj ekfunkciigas en la sekva sinsekvo:

hide.bs.tab(en la nuna aktiva langeto)
show.bs.tab(en la montrota langeto)
hidden.bs.tab(sur la antaŭa aktiva langeto, la sama kiel por la hide.bs.tabevento)
shown.bs.tab(en la lastatempe aktiva ĵus montrita langeto, la sama kiel por la show.bs.tabevento)

Se neniu langeto jam estis aktiva, tiam la eventoj hide.bs.tabkaj hidden.bs.tabne estos pafitaj.

Eventa tipo	Priskribo
`hide.bs.tab`	Ĉi tiu evento pafas kiam nova langeto estas montrata (kaj tiel la antaŭa aktiva langeto estas kaŝota). Uzu `event.target`kaj `event.relatedTarget`por celi la nunan aktivan langeton kaj la novan baldaŭ aktivan langeton, respektive.
`hidden.bs.tab`	Ĉi tiu evento ekfunkcias post kiam nova langeto estas montrita (kaj tiel la antaŭa aktiva langeto estas kaŝita). Uzu `event.target`kaj `event.relatedTarget`por celi la antaŭan aktivan langeton kaj la novan aktivan langeton, respektive.
`show.bs.tab`	Ĉi tiu evento ekfunkciigas sur langeto, sed antaŭ ol la nova langeto estis montrita. Uzu `event.target`kaj `event.relatedTarget`por celi la aktivan langeton kaj la antaŭan aktivan langeton (se disponeblaj) respektive.
`shown.bs.tab`	Ĉi tiu evento ekfunkciigas sur langeto-spektaklo post kiam langeto estis montrita. Uzu `event.target`kaj `event.relatedTarget`por celi la aktivan langeton kaj la antaŭan aktivan langeton (se disponeblaj) respektive.

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