Navs kaj langetoj

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

Sur ĉi tiu paĝo

Base nav

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.

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

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.

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

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:

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

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

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

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

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

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

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 .

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

Piloloj

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

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

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.

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

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

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

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.

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

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

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

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.

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

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 klapetaj interfacoj, kiel priskribite en la Praktikoj pri Aŭtorado de WAI ARIA . 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

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

Piloloj kun falmenuoj

<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

Variabloj

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

Dinamikaj klapetinterfacoj, kiel priskribite en la WAI ARIA Aŭtorado-Praktikoj , postulas role="tablist", role="tab", role="tabpanel", kaj kromajn aria-atributojn por peri 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.

Notu, ke dinamikaj klapetaj interfacoj ne devus enhavi falmenuojn, ĉar tio 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.

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

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>

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.

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

La tabs kromaĵo ankaŭ funkcias kun piloloj.

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

Kaj kun vertikalaj piloloj.

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>

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

Per JavaScript

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

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

Vi povas aktivigi individuajn langetojn en pluraj manieroj:

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

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 .

constructor

Aktivigas langeto-elementon kaj enhavujon. Tab devus havi data-bs-targetaŭ, se vi uzas ligilon, hrefatributon, celante ujo-nodon en la 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>

montri

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

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

  tab.show()

disponi

Detruas la langeton de elemento.

getInstance

Senmova metodo, kiu ebligas al vi akiri la langeton-instancon asociitan kun DOM-elemento

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

getOrCreateInstance

Senmova metodo, kiu ebligas al vi akiri la langeton-instancon asociitan kun DOM-elemento, aŭ krei novan se ĝi ne estis pravigita.

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

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

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