Navigatoriai ir skirtukai

Dokumentacija ir pavyzdžiai, kaip naudoti „Bootstrap“ įtrauktus naršymo komponentus.

Šiame puslapyje

Bazinė navigacija

„Bootstrap“ pasiekiama navigacija turi bendrus žymėjimus ir stilius – nuo pagrindinės .navklasės iki aktyvios ir išjungtos būsenos. Sukeiskite modifikatorių klases, kad perjungtumėte kiekvieną stilių.

Bazinis .navkomponentas pagamintas naudojant „flexbox“ ir suteikia tvirtą pagrindą visų tipų navigacijos komponentams kurti. Tai apima tam tikrus stiliaus nepaisymus (dirbant su sąrašais), kai kuriuos nuorodų užpildymą didesnėms sritims ir pagrindinį išjungtą stilių.

Pagrindinis .navkomponentas neapima jokios .activebūsenos. Toliau pateikti pavyzdžiai apima klasę, daugiausia siekiant parodyti, kad ši konkreti klasė nesukelia jokio specialaus stiliaus.

Norėdami perteikti aktyvią būseną pagalbinėms technologijoms, naudokite aria-currentatributą – naudodami pagedabartinio puslapio arba truedabartinio rinkinio elemento reikšmę.

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>

Klasės naudojamos visur, todėl jūsų žymėjimas gali būti itin lankstus. Jei elementų tvarka svarbi, naudokite <ul>kaip nurodyta aukščiau , arba sukite elementą. Kadangi naudoja , naršymo nuorodos veikia taip pat, kaip ir navigacijos elementai, bet be papildomo žymėjimo.<ol><nav>.navdisplay: flex

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>

Galimi stiliai

Pakeiskite s komponento stilių .navnaudodami modifikatorius ir priemones. Maišykite ir suderinkite pagal poreikį arba sukurkite savo.

Horizontalus lygiavimas

Pakeiskite horizontalų navigacijos sistemos išlygiavimą naudodami „ flexbox“ priemones . Pagal numatytuosius nustatymus naršymo juostos yra sulygiuotos kairėje, bet galite lengvai jas pakeisti į centre arba dešinėje.

Centruota su .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>

Sulygiuotas dešinėje su .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>

Vertikalus

Sudėkite navigaciją, naudodami paslaugų programą pakeisdami lankstaus elemento kryptį .flex-column. Reikia juos sudėti į kai kurias peržiūros sritis, bet ne į kitas? Naudokite interaktyvias versijas (pvz., .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>

Kaip visada, vertikali navigacija galima ir be <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>

Skirtukai

Paima pagrindinę navigaciją iš viršaus ir prideda .nav-tabsklasę, kad sukurtų sąsają su skirtukais. Naudokite juos norėdami sukurti skirtukų sritis naudodami skirtuko JavaScript papildinį .

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>

Tabletes

Paimkite tą patį HTML, bet .nav-pillsvietoj jo naudokite:

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>

Užpildykite ir pagrįskite

Priverskite savo .navturinį išplėsti visą galimą plotį viena iš dviejų modifikavimo klasių. Norėdami proporcingai užpildyti visą turimą erdvę savo .nav-items, naudokite .nav-fill. Atkreipkite dėmesį, kad visa horizontali erdvė yra užimta, bet ne kiekvienas navigacijos elementas yra vienodo pločio.

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>

Naudodami <nav>navigaciją galite saugiai praleisti .nav-item, nes .nav-linktai reikalinga tik stiliaus <a>elementams.

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>

Vienodo pločio elementams naudokite .nav-justified. Visą horizontalią erdvę užims navigacijos nuorodos, tačiau skirtingai nei .nav-fillaukščiau, kiekvienas navigacijos elementas bus tokio pat pločio.

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>

Panašiai kaip .nav-fillpavyzdyje naudojant <nav>navigaciją.

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>

Darbas su lanksčiomis komunalinėmis paslaugomis

Jei jums reikia interaktyvių navigacijos variantų, apsvarstykite galimybę naudoti keletą „ flexbox“ paslaugų . Nors šios komunalinės paslaugos yra išsamesnės, jas galima geriau pritaikyti reaguojant į pertraukos taškus. Toliau pateiktame pavyzdyje mūsų navigacija bus sukrauta žemiausiame lūžio taške, tada prisitaikys prie horizontalaus išdėstymo, kuris užpildo galimą plotį, pradedant nuo mažos pertraukos taš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>

Kalbant apie prieinamumą

Jei naudojate naršymo juostą, kad pateiktumėte naršymo juostą, būtinai pridėkite role="navigation"prie logiškiausio pirminio sudėtinio rodinio <ul>arba apvyniokite <nav>elementą aplink visą naršymą. Nepridėkite vaidmens prie <ul>paties vaidmens, nes tai neleis jo paskelbti kaip tikrojo pagalbinių technologijų sąrašo.

Atminkite, kad naršymo juostose, net jei jos vizualiai sukurtos kaip skirtukai su .nav-tabsklase, neturėtų būti pateikiamos role="tablist", role="tab"arba role="tabpanel"atributai. Jie tinka tik dinaminėms sąsajoms su skirtukais, kaip aprašyta ARIA kūrimo praktikos vadovo skirtukų šablone . Pavyzdį rasite šiame skyriuje „ JavaScript“ elgsena dinaminėms sąsajoms su skirtukais. aria-currentAtributas nėra būtinas dinaminėse sąsajose su skirtukais, nes mūsų „JavaScript“ apdoroja pasirinktą būseną pridėdama aktyvų aria-selected="true"skirtuką.

Naudojant išskleidžiamuosius meniu

Pridėkite išskleidžiamųjų meniu naudodami šiek tiek papildomo HTML ir išskleidžiamąjį JavaScript papildinį .

Skirtukai su išskleidžiamaisiais meniu

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>

Tabletės su išskleidžiamaisiais meniu

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

Kintamieji

Pridėta 5.2.0 versijoje

Kaip „Bootstrap“ besivystančio CSS kintamųjų metodo dalis, navigacinės sistemos dabar naudoja vietinius CSS kintamuosius .nav, .nav-tabs, ir .nav-pillspatobulintam tinkinimui realiuoju laiku. CSS kintamųjų reikšmės nustatomos naudojant Sass, todėl Sass tinkinimas vis dar palaikomas.

Pagrindinėje .navklasėje:

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

.nav-tabsModifikatoriaus klasėje :

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

.nav-pillsModifikatoriaus klasėje :

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

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

Naudokite skirtuko „JavaScript“ papildinį (įtraukite jį atskirai arba per sudarytą bootstrap.jsfailą), kad išplėstumėte naršymo skirtukus ir tabletes, kad sukurtumėte vietinio turinio skirtukus.

Tai tam tikras rezervuotos vietos turinys, susietas su skirtuko Pagrindinis turinys. Spustelėjus kitą skirtuką, šio skirtuko matomumas bus perjungtas į kitą. Skirtuke „JavaScript“ sukeičiamos klasės, kad būtų galima valdyti turinio matomumą ir stilių. Galite naudoti jį su skirtukais, tabletėmis ir bet kokia kita .navnavigacija.

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.

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>

Kad atitiktų jūsų poreikius, tai veikia naudojant <ul>žymėjimą, pagrįstą, kaip parodyta aukščiau, arba su bet kokiu savavališku „savo“ žymėjimu. Atminkite, kad jei naudojate <nav>, neturėtumėte role="tablist"tiesiogiai prie jo pridėti, nes tai pakeistų elemento, kaip naršymo orientyro, savąjį vaidmenį. Vietoj to pereikite prie alternatyvaus elemento (toliau pateiktame pavyzdyje paprastas <div>) ir apvyniokite jį <nav>aplink jį.

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>

Skirtukų papildinys taip pat veikia su tabletėmis.

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>

Ir su vertikaliomis tabletėmis. Idealiu atveju, jei norite naudoti vertikalius skirtukus, taip pat turėtumėte įtraukti aria-orientation="vertical"į skirtukų sąrašo konteinerį.

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>

Prieinamumas

Dinaminėms sąsajoms su skirtukais, kaip aprašyta ARIA kūrimo praktikos vadovo skirtukų šablone , reikia role="tablist", role="tab", role="tabpanel"ir papildomų aria-atributų, kad pagalbinių technologijų (pvz., ekrano skaitytuvų) naudotojams būtų perteikta jų struktūra, funkcionalumas ir dabartinė būsena. Kaip geriausią praktiką rekomenduojame naudoti <button>skirtukų elementus, nes tai yra valdikliai, suaktyvinantys dinaminį pakeitimą, o ne nuorodos, nukreipiančios į naują puslapį ar vietą.

Pagal ARIA kūrimo praktikos šabloną tik šiuo metu aktyvus skirtukas sufokusuojamas klaviatūra. Kai „JavaScript“ papildinys bus inicijuotas, jis bus nustatytas tabindex="-1"visuose neaktyviuose skirtukų valdikliuose. Kai šiuo metu aktyvus skirtukas yra sufokusuotas, žymeklio klavišai suaktyvina ankstesnį / kitą skirtuką, o įskiepis atitinkamai pakeičia judėjimątabindex . Tačiau atminkite, kad „JavaScript“ papildinys neskiria horizontalių ir vertikalių skirtukų sąrašų, kai kalbama apie žymeklio klavišų sąveiką: nepaisant skirtukų sąrašo orientacijos, žymeklis aukštyn ir kairėje pereina į ankstesnį skirtuką, o žemyn ir dešinėn – į kitą skirtuką.

Apskritai, norint palengvinti naršymą klaviatūra, rekomenduojama fokusuoti ir pačius skirtukų skydelius, nebent pirmasis elementas, kuriame yra reikšmingo turinio skirtukų skydelyje, jau yra fokusuojamas. „JavaScript“ papildinys nesistengia tvarkyti šio aspekto – jei reikia, turėsite aiškiai nustatyti skirtukų skydelius, kad būtų galima fokusuoti, pridėdami tabindex="0"žymėjimą.

Skirtuko „JavaScript“ papildinys nepalaiko skirtukų sąsajų, kuriose yra išskleidžiamųjų meniu, nes dėl to kyla ir naudojimo, ir pasiekiamumo problemų. Naudojimo požiūriu tai, kad šiuo metu rodomo skirtuko paleidimo elementas nėra matomas iš karto (nes jis yra uždarame išskleidžiamajame meniu), gali sukelti painiavą. Prieinamumo požiūriu šiuo metu nėra jokio protingo būdo susieti tokio tipo konstrukciją su standartiniu WAI ARIA modeliu, o tai reiškia, kad pagalbinių technologijų naudotojams jis negali būti lengvai suprantamas.

Duomenų atributų naudojimas

Galite suaktyvinti skirtuką arba piliulės naršymą neįrašydami jokio „JavaScript“, tiesiog nurodydami data-bs-toggle="tab"arba data-bs-toggle="pill"ant elemento. Naudokite šiuos duomenų atributus .nav-tabsarba .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

Įgalinti skirtukų skirtukus naudodami „JavaScript“ (kiekvieną skirtuką reikia suaktyvinti atskirai):

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

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

Atskirus skirtukus galite suaktyvinti keliais būdais:

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

Išblukimo efektas

Jei norite, kad skirtukai išnyktų, pridėkite .fadeprie kiekvieno .tab-pane. Pirmojo skirtuko srityje taip pat turi būti .showmatomas pradinis turinys.

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

Metodai

Asinchroniniai metodai ir perėjimai

Visi API metodai yra asinchroniniai ir pradeda perėjimą . Jie grįžta pas skambinantįjį, kai tik prasideda perėjimas, bet jam nepasibaigus . Be to, pereinamojo komponento metodo iškvietimas bus ignoruojamas .

Daugiau informacijos rasite mūsų JavaScript dokumentacijoje .

Suaktyvina turinį kaip skirtuko elementą.

Galite sukurti skirtuko egzempliorių naudodami konstruktorių, pavyzdžiui:

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

Metodas	apibūdinimas
`dispose`	Sunaikina elemento skirtuką.
`getInstance`	Statinis metodas, leidžiantis gauti skirtuko egzempliorių, susietą su DOM elementu, galite jį naudoti taip: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statinis metodas, kuris grąžina skirtuko egzempliorių, susietą su DOM elementu, arba sukuria naują, jei jis nebuvo inicijuotas. Galite naudoti taip: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Parenka nurodytą skirtuką ir parodo su juo susijusią sritį. Bet kuris kitas anksčiau pasirinktas skirtukas bus nepažymėtas ir su juo susijusi sritis paslėpta. Grįžta į skambinantįjį, kol skirtuko sritis iš tikrųjų nebuvo parodyta (ty prieš `shown.bs.tab`įvykį).

Renginiai

Kai rodomas naujas skirtukas, įvykiai suaktyvinami tokia tvarka:

hide.bs.tab(dabartiniame aktyviame skirtuke)
show.bs.tab(skirtuke, kurį reikia rodyti)
hidden.bs.tab(ankstesniame aktyviame skirtuke tas pats, kaip ir hide.bs.tabįvykio)
shown.bs.tab(naujai suaktyvintame, ką tik parodytame skirtuke, tas pats kaip ir show.bs.tabįvykio)

Jei joks skirtukas dar nebuvo aktyvus, hide.bs.tabir hidden.bs.tabįvykiai nebus suaktyvinti.

Renginio tipas	apibūdinimas
`hide.bs.tab`	Šis įvykis suaktyvinamas, kai turi būti rodomas naujas skirtukas (taigi, ankstesnis aktyvus skirtukas turi būti paslėptas). Naudokite `event.target`ir `event.relatedTarget`, kad nukreiptumėte atitinkamai į dabartinį aktyvų skirtuką ir į naują, kuris netrukus bus aktyvus.
`hidden.bs.tab`	Šis įvykis suaktyvinamas, kai parodomas naujas skirtukas (taigi ankstesnis aktyvus skirtukas yra paslėptas). Naudokite `event.target`ir `event.relatedTarget`, kad nukreiptumėte atitinkamai į ankstesnį aktyvų skirtuką ir naują aktyvų skirtuką.
`show.bs.tab`	Šis įvykis suaktyvinamas rodant skirtuką, bet anksčiau nei rodomas naujas skirtukas. Naudokite `event.target`ir `event.relatedTarget`, kad nukreiptumėte atitinkamai į aktyvų skirtuką ir ankstesnį aktyvų skirtuką (jei yra).
`shown.bs.tab`	Šis įvykis suaktyvinamas rodant skirtuką, kai rodomas skirtukas. Naudokite `event.target`ir `event.relatedTarget`, kad nukreiptumėte atitinkamai į aktyvų skirtuką ir ankstesnį aktyvų skirtuką (jei yra).

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