Krmarjenje in zavihki

Dokumentacija in primeri uporabe vključenih navigacijskih komponent Bootstrapa.

Na tej strani

Base nav

Navigacija, ki je na voljo v Bootstrapu, ima skupno oznako in sloge, od osnovnega .navrazreda do aktivnih in onemogočenih stanj. Zamenjajte razrede modifikatorjev za preklapljanje med posameznimi slogi.

Osnovna .navkomponenta je zgrajena s flexboxom in zagotavlja trdne temelje za izdelavo vseh vrst navigacijskih komponent. Vključuje nekaj preglasitev sloga (za delo s seznami), nekaj oblazinjenja povezav za večja območja zadetkov in osnovno onemogočeno oblikovanje.

Osnovna .navkomponenta ne vključuje nobenega .activestanja. Naslednji primeri vključujejo razred, predvsem zato, da pokažejo, da ta določen razred ne sproži nobenega posebnega sloga.

Za posredovanje aktivnega stanja podpornim tehnologijam uporabite aria-currentatribut — z uporabo pagevrednosti za trenutno stran ali trueza trenutni element v nizu.

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

Razredi se uporabljajo povsod, zato je lahko vaša oznaka izjemno prilagodljiva. Uporabite <ul>s kot zgoraj, <ol>če je vrstni red vaših predmetov pomemben, ali zavrtite svojega z <nav>elementom. Zaradi .navuporabe display: flexse navigacijske povezave obnašajo enako kot navigacijski elementi, vendar brez dodatnih oznak.

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

Razpoložljivi slogi

Spremenite slog .navkomponente s z modifikatorji in pripomočki. Mešajte in kombinirajte po potrebi ali sestavite svojega.

Vodoravna poravnava

Spremenite vodoravno poravnavo vaše navigacije s pripomočki flexbox . Krmarjenja so privzeto poravnana levo, vendar jih lahko preprosto spremenite tako, da so poravnana na sredino ali desno.

Na sredini z .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>

Desno poravnano z .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>

Navpično

.flex-columnZložite svojo navigacijo tako, da s pripomočkom spremenite smer fleksibilnega elementa . Jih morate zložiti na nekatera vidna okna, na druga pa ne? Uporabite odzivne različice (npr. .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>

Kot vedno je navpična navigacija možna <ul>tudi brez 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>

Zavihki

Vzame osnovno krmarjenje od zgoraj in doda .nav-tabsrazred za ustvarjanje vmesnika z zavihki. Uporabite jih za ustvarjanje regij, ki jih je mogoče zavihati, z našim vtičnikom za zavihke JavaScript .

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

Tablete

Vzemite isti HTML, vendar .nav-pillsnamesto tega uporabite:

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

Izpolnite in utemeljite

Prisilite svojo .navvsebino, da razširi celotno razpoložljivo širino enega od dveh razredov modifikatorjev. Če želite sorazmerno zapolniti ves razpoložljivi prostor s svojim .nav-items, uporabite .nav-fill. Upoštevajte, da je ves vodoravni prostor zaseden, vendar nima vsak navigacijski element enake širine.

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

Pri uporabi <nav>navigacije, ki temelji na -, lahko varno izpustite .nav-item, saj .nav-linkje to potrebno samo za <a>elemente sloga.

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

Za elemente enake širine uporabite .nav-justified. Ves vodoravni prostor bodo zasedle povezave za krmarjenje, vendar bo za razliko od .nav-fillzgoraj navedenega vsak element krmarjenja enake širine.

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

Podobno kot v .nav-fillprimeru uporabe <nav>navigacije na osnovi.

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

Delo s pripomočki flex

Če potrebujete različice odzivne navigacije, razmislite o uporabi niza pripomočkov flexbox . Čeprav so bolj podrobni, ti pripomočki ponujajo večjo prilagoditev med odzivnimi prekinitvenimi točkami. V spodnjem primeru bo naše krmarjenje zloženo na najnižjo prelomno točko, nato pa se bo prilagodilo vodoravni postavitvi, ki zapolni razpoložljivo širino, začenši z majhno prelomno točko.

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

Glede dostopnosti

Če uporabljate navs za zagotavljanje navigacijske vrstice, ne pozabite dodati role="navigation"v najbolj logičen nadrejeni vsebnik <ul>ali ovijte <nav>element okoli celotne navigacije. Ne dodajajte vloge <ul>samemu, saj bi to preprečilo, da bi jo podporne tehnologije objavile kot dejanski seznam.

Upoštevajte, da navigacijskim vrsticam, tudi če so vizualno oblikovane kot zavihki z .nav-tabsrazredom, ne smete dodeliti atributov ali . Ti so primerni le za dinamične vmesnike z zavihki, kot je opisano v avtorskih praksah WAI ARIA . Za primer si oglejte obnašanje JavaScripta za dinamične vmesnike z zavihki v tem razdelku. Atribut ni potreben na dinamičnih vmesnikih z zavihki, saj naš JavaScript obravnava izbrano stanje z dodajanjem na aktivni zavihek.role="tablist"role="tab"role="tabpanel" aria-currentaria-selected="true"

Uporaba spustnih menijev

Dodajte spustne menije z malo dodatnega HTML-ja in spustnega vtičnika JavaScript .

Zavihki s spustnimi meniji

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

Tablete s spustnimi listi

<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

Spremenljivke

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

obnašanje JavaScripta

Uporabite vtičnik JavaScript za zavihke – vključite ga posamezno ali prek prevedene bootstrap.jsdatoteke – za razširitev naših navigacijskih zavihkov in pilule za ustvarjanje podokna z zavihki lokalne vsebine.

Dinamični vmesniki z zavihki, kot je opisano v avtorskih praksah WAI ARIA , zahtevajo role="tablist", role="tab", role="tabpanel", in dodatne aria-atribute, da svojo strukturo, funkcionalnost in trenutno stanje posredujejo uporabnikom podpornih tehnologij (kot so bralniki zaslona). Kot najboljšo prakso priporočamo uporabo <button>elementov za zavihke, saj so to kontrolniki, ki sprožijo dinamično spremembo, namesto povezav, ki vodijo do nove strani ali lokacije.

Upoštevajte, da vmesniki z dinamičnimi zavihki ne smejo vsebovati spustnih menijev, saj to povzroča težave z uporabnostjo in dostopnostjo. Z vidika uporabnosti lahko dejstvo, da sprožilni element trenutno prikazanega zavihka ni takoj viden (saj je znotraj zaprtega spustnega menija), lahko povzroči zmedo. Z vidika dostopnosti trenutno ni nobenega razumnega načina za preslikavo te vrste konstrukta v standardni vzorec WAI ARIA, kar pomeni, da ga ni mogoče enostavno narediti razumljivega uporabnikom podpornih tehnologij.

To je nekaj nadomestne vsebine, povezane z vsebino zavihka Domov. Če kliknete drug zavihek, boste preklopili vidnost tega za naslednjega. Zavihek JavaScript zamenja razrede za nadzor vidnosti in sloga vsebine. Uporabljate ga lahko z zavihki, tabletami in katero koli drugo .navnavigacijo.

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>

Da bi ustrezal vašim potrebam, to deluje z <ul>oznako, ki temelji na osnovi, kot je prikazano zgoraj, ali s katero koli poljubno oznako »razvijte svoje«. Upoštevajte, da če uporabljate <nav>, mu ne smete dodajati role="tablist"neposredno, saj bi to preglasilo izvorno vlogo elementa kot navigacijskega orientacijskega znaka. Namesto tega preklopite na alternativni element (v spodnjem primeru preprost <div>) in ovijte <nav>okoli njega.

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

Vtičnik tabs deluje tudi s tabletami.

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

In z navpičnimi tabletami.

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>

Uporaba podatkovnih atributov

Navigacijo po zavihku ali tabletki lahko aktivirate, ne da bi pisali JavaScript, tako da preprosto določite data-bs-toggle="tab"ali data-bs-toggle="pill"na elementu. Uporabite te atribute podatkov na .nav-tabsali .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>

Prek JavaScripta

Omogoči zavihke z možnostjo zavihkov prek JavaScripta (vsak zavihek je treba aktivirati posebej):

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

Posamezne zavihke lahko aktivirate na več načinov:

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

Učinek bledenja

Če želite, da zavihki zbledijo, dodajte .fadevsakemu .tab-pane. V prvem podoknu z zavihki mora biti .showvidna tudi začetna vsebina.

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

Metode

Asinhrone metode in prehodi

Vse metode API so asinhrone in začnejo prehod . K klicatelju se vrnejo takoj, ko se prehod začne, vendar preden se konča . Poleg tega bo prezrt klic metode prehodne komponente .

Za več informacij si oglejte našo dokumentacijo JavaScript .

constructor

Aktivira element zavihka in vsebnik vsebine. Zavihek mora imeti atribut data-bs-targetali, če uporabljate povezavo, hrefatribut, ki cilja na vozlišče vsebnika v 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>

pokazati

Izbere dani zavihek in prikaže povezano podokno. Kateri koli drug zavihek, ki je bil prej izbran, postane neizbran in njegovo povezano podokno je skrito. Vrne se klicatelju, preden je podokno z zavihki dejansko prikazano (tj. preden shown.bs.tabpride do dogodka).

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

  tab.show()

odstraniti

Uniči zavihek elementa.

getInstance

Statična metoda, ki vam omogoča pridobitev primerka zavihka, povezanega z elementom DOM

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

getOrCreateInstance

Statična metoda, ki vam omogoča pridobitev primerka zavihka, povezanega z elementom DOM, ali ustvarjanje novega, če ni bil inicializiran

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

Dogodki

Pri prikazu novega zavihka se dogodki sprožijo v naslednjem vrstnem redu:

hide.bs.tab(na trenutno aktivnem zavihku)
show.bs.tab(na zavihku za prikaz)
hidden.bs.tab(na prejšnjem aktivnem zavihku, enak kot za hide.bs.tabdogodek)
shown.bs.tab(na novoaktivnem pravkar prikazanem zavihku, isti kot za show.bs.tabdogodek)

Če noben zavihek še ni bil aktiven, se dogodki hide.bs.tabin hidden.bs.tabne bodo sprožili.

Vrsta dogodka	Opis
`show.bs.tab`	Ta dogodek se sproži ob prikazu zavihka, vendar preden je prikazan nov zavihek. Uporabite `event.target`in `event.relatedTarget`za ciljanje na aktivni zavihek oziroma prejšnji aktivni zavihek (če je na voljo).
`shown.bs.tab`	Ta dogodek se sproži na prikazu zavihkov po prikazu zavihka. Uporabite `event.target`in `event.relatedTarget`za ciljanje na aktivni zavihek oziroma prejšnji aktivni zavihek (če je na voljo).
`hide.bs.tab`	Ta dogodek se sproži, ko je treba prikazati nov zavihek (in tako naj bi bil prejšnji aktivni zavihek skrit). Uporabite `event.target`in `event.relatedTarget`za ciljanje na trenutni aktivni zavihek oziroma novi zavihek, ki bo kmalu aktiven.
`hidden.bs.tab`	Ta dogodek se sproži, ko je prikazan nov zavihek (in tako je prejšnji aktivni zavihek skrit). Uporabite `event.target`in `event.relatedTarget`za ciljanje prejšnjega aktivnega zavihka oziroma novega aktivnega zavihka.

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