Krmarjenje in zavihki

Dokumentacija in primeri uporabe vključenih navigacijskih komponent Bootstrapa.

Na tej strani

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

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>

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.

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>

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:

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>

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

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

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>

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

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 .

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>

Tablete

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

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>

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.

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>

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

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>

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.

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>

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

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>

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.

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>

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 vmesnike z dinamičnimi zavihki, kot je opisano v vzorcu zavihkov Vodnika po postopkih avtoringa 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

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>

Tablete s spustnimi listi

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

Spremenljivke

Dodano v v5.2.0

Kot del Bootstrapovega razvijajočega se pristopa spremenljivk CSS navigacije zdaj uporabljajo lokalne spremenljivke CSS na .nav, .nav-tabsin .nav-pillsza izboljšano prilagajanje v realnem času. Vrednosti za spremenljivke CSS so nastavljene prek Sass, tako da je še vedno podprto tudi prilagajanje Sass.

Na .navosnovnem razredu:

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

V .nav-tabsrazredu modifikatorja:

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

V .nav-pillsrazredu modifikatorja:

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

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

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.

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.

To je nekaj nadomestne vsebine , povezane z vsebino zavihka Profil . Č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 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>

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.

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>

Vtičnik tabs deluje tudi s tabletami.

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>

In z navpičnimi tabletami. V idealnem primeru bi morali za navpične zavihke dodati tudi aria-orientation="vertical"vsebnik seznama zavihkov.

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>

Dostopnost

Vmesniki z dinamičnimi zavihki, kot je opisano v vzorcu zavihkov Vodnika po avtorskih praksah ARIA , zahtevajo role="tablist", role="tab", role="tabpanel"in dodatne aria-atribute, da posredujejo svojo strukturo, funkcionalnost in trenutno stanje 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.

V skladu z vzorcem ARIA Authoring Practices je samo trenutno aktiven zavihek izpostavljen tipkovnici. Ko je vtičnik JavaScript inicializiran, se bo nastavil tabindex="-1"na vse neaktivne kontrolnike zavihkov. Ko je trenutno aktivni zavihek v fokusu, smerne tipke aktivirajo prejšnji/naslednji zavihek, pri čemer vtičnik ustrezno spremeni premikanjetabindex . Vendar upoštevajte, da vtičnik JavaScript ne razlikuje med vodoravnimi in navpičnimi seznami zavihkov, ko gre za interakcijo s kazalnimi tipkami: ne glede na orientacijo seznama zavihkov gresta gor in levi kazalec na prejšnji zavihek, dol in desni kazalec pa na naslednji zavihek.

Na splošno je za lažjo navigacijo s tipkovnico priporočljivo, da se tudi plošče z zavihki same izostrijo, razen če je prvi element, ki vsebuje smiselno vsebino znotraj plošče z zavihki, že osredotočen. Vtičnik JavaScript ne poskuša obvladati tega vidika – kjer je to primerno, boste morali izrecno omogočiti, da se plošče z zavihki izostrijo, tako da dodate tabindex="0"svoje oznake.

Vtičnik JavaScript za zavihke ne podpira vmesnikov z zavihki, ki vsebujejo spustne menije, saj ti povzročajo 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.

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

Prek JavaScripta

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

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

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

Posamezne zavihke lahko aktivirate na več načinov:

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

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

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 .

Aktivira vašo vsebino kot element zavihka.

Primerek zavihka lahko ustvarite s konstruktorjem, na primer:

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

Metoda	Opis
`dispose`	Uniči zavihek elementa.
`getInstance`	Statično metodo, ki vam omogoča pridobitev primerka zavihka, povezanega z elementom DOM, lahko uporabite takole: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statična metoda, ki vrne primerek zavihka, povezanega z elementom DOM, ali ustvari novega, če ni bil inicializiran. Uporabite ga lahko takole: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	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.tab`pride do dogodka).

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

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