Navs en oortjies

Dokumentasie en voorbeelde vir hoe om Bootstrap se ingeslote navigasiekomponente te gebruik.

Op hierdie bladsy

Basis nav

Navigasie beskikbaar in Bootstrap deel algemene opmaak en style, van die basisklas .navtot die aktiewe en gedeaktiveerde state. Ruil wysigerklasse om tussen elke styl te wissel.

Die basis .navkomponent is gebou met flexbox en bied 'n sterk basis vir die bou van alle soorte navigasie komponente. Dit bevat 'n paar styl-oorskrywings (vir werk met lyste), 'n paar skakelopvulling vir groter trefareas, en basiese gestremde stilering.

Die basiskomponent .navsluit geen .activestaat in nie. Die volgende voorbeelde sluit die klas in, hoofsaaklik om te demonstreer dat hierdie spesifieke klas geen spesiale stilering veroorsaak nie.

Om die aktiewe toestand aan ondersteunende tegnologieë oor te dra, gebruik die aria-currentkenmerk — gebruik die pagewaarde vir huidige bladsy, of truevir die huidige item in 'n stel.

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>

Klasse word deurgaans gebruik, so jou opmaak kan baie buigsaam wees. Gebruik <ul>s soos hierbo, <ol>as die volgorde van jou items belangrik is, of rol jou eie met 'n <nav>element. Omdat die .navgebruike display: flex, tree die nav-skakels dieselfde op as nav-items, maar sonder die ekstra opmaak.

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>

Beskikbare style

Verander die styl van .navs-komponent met wysigers en nutsprogramme. Meng en pas soos nodig, of bou jou eie.

Horisontale belyning

Verander die horisontale belyning van jou nav met flexbox nutsprogramme . By verstek is navs linksbelyn, maar jy kan dit maklik verander na middel- of regsbelyn.

Gesentreer met .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>

Regsbelyn met .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>

Vertikaal

Stapel jou navigasie deur die rigting van die buigitem met die .flex-columnhulpprogram te verander. Moet u dit op sommige uitkykpoorte stapel, maar nie op ander nie? Gebruik die responsiewe weergawes (bv. .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>

Soos altyd is vertikale navigasie ook moontlik sonder <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>

Oortjies

Neem die basiese navigasie van bo af en voeg die .nav-tabsklas by om 'n oortjie-koppelvlak te genereer. Gebruik hulle om oortjies te skep met ons oortjie JavaScript-inprop .

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>

Pille

Neem dieselfde HTML, maar gebruik .nav-pillseerder:

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>

Vul en regverdig

Dwing jou .navse inhoud om die volle beskikbare breedte een van twee wysigerklasse uit te brei. Om alle beskikbare spasie proporsioneel met jou .nav-items te vul, gebruik .nav-fill. Let daarop dat alle horisontale spasie beset is, maar nie elke navigasie-item het dieselfde breedte nie.

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>

As u 'n <nav>-gebaseerde navigasie gebruik, kan u dit veilig weglaat .nav-item, aangesien dit slegs .nav-linkbenodig word vir stileringselemente <a>.

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>

Vir gelyke-breedte elemente, gebruik .nav-justified. Alle horisontale spasie sal deur navigasieskakels in beslag geneem word, maar anders as .nav-fillbogenoemde, sal elke navigasie-item dieselfde breedte hê.

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>

Soortgelyk aan die .nav-fillvoorbeeld wat 'n <nav>-gebaseerde navigasie gebruik.

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>

Werk met flex utilities

As jy responsiewe nav-variasies benodig, oorweeg dit om 'n reeks flexbox-nutsprogramme te gebruik . Alhoewel dit meer breedvoerig is, bied hierdie nutsprogramme groter aanpassing oor responsiewe breekpunte. In die voorbeeld hieronder sal ons nav op die laagste breekpunt gestapel word, en dan aanpas by 'n horisontale uitleg wat die beskikbare breedte vul vanaf die klein breekpunt.

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>

Met betrekking tot toeganklikheid

As jy navs gebruik om 'n navigasiebalk te verskaf, maak seker dat jy 'n role="navigation"by die mees logiese ouerhouer van die <ul>, voeg, of 'n <nav>element om die hele navigasie draai. Moenie die rol by die <ul>self voeg nie, aangesien dit sal verhoed dat dit as 'n werklike lys deur ondersteunende tegnologieë aangekondig word.

Let daarop dat navigasiestawe, selfs al is dit visueel as oortjies saam met die .nav-tabsklas gestileer, nierole="tablist" , role="tab"of role="tabpanel"kenmerke gegee moet word nie. Dit is slegs geskik vir dinamiese oortjies-koppelvlakke, soos beskryf in die ARIA Authoring Practices Guide-oortjiespatroon . Sien JavaScript-gedrag vir dinamiese oortjies-koppelvlakke in hierdie afdeling vir 'n voorbeeld. Die aria-currentkenmerk is nie nodig op dinamiese oortjie-koppelvlakke nie, aangesien ons JavaScript die geselekteerde toestand hanteer deur aria-selected="true"op die aktiewe oortjie by te voeg.

Gebruik aftreklys

Voeg aftrekkieslyste by met 'n bietjie ekstra HTML en die aftreklys JavaScript-inprop .

Oortjies met aftreklys

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>

Pille met dropdowns

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

Veranderlikes

Bygevoeg in v5.2.0

As deel van Bootstrap se ontwikkelende CSS-veranderlikebenadering, gebruik navs nou plaaslike CSS-veranderlikes op .nav, .nav-tabs, en .nav-pillsvir verbeterde intydse aanpassing. Waardes vir die CSS-veranderlikes word via Sass ingestel, so Sass-aanpassing word ook steeds ondersteun.

Op die .navbasisklas:

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

Op die .nav-tabswysigerklas:

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

Op die .nav-pillswysigerklas:

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

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

Gebruik die oortjie JavaScript-inprop—sluit dit individueel in of deur die saamgestelde bootstrap.jslêer—om ons navigasie-oortjies en -pille uit te brei om oortjies van plaaslike inhoud te skep.

Dit is 'n paar plekhouer-inhoud van die Tuis-oortjie se geassosieerde inhoud. Deur op 'n ander oortjie te klik, sal die sigbaarheid van hierdie een vir die volgende verander. Die oortjie JavaScript ruil klasse om die inhoudsigbaarheid en stilering te beheer. Jy kan dit gebruik met oortjies, pille en enige ander .navaangedrewe navigasie.

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>

Om te help om aan jou behoeftes te voldoen, werk dit met <ul>-gebaseerde opmaak, soos hierbo getoon, of met enige arbitrêre "rol jou eie" opmaak. Let daarop dat as jy gebruik <nav>, jy nie role="tablist"direk daarby moet byvoeg nie, aangesien dit die element se inheemse rol as 'n navigasielandmerk sal ignoreer. Skakel eerder oor na 'n alternatiewe element (in die voorbeeld hieronder, 'n eenvoudige <div>) en draai die <nav>om dit.

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>

Die tabs-inprop werk ook met pille.

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>

En met vertikale pille. Ideaal gesproke, vir vertikale oortjies, moet jy ook by aria-orientation="vertical"die oortjielyshouer voeg.

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>

Toeganklikheid

Dinamiese koppelvlakke met oortjies, soos beskryf in die ARIA Authoring Practices Guide-oortjiespatroon , vereis role="tablist", role="tab", role="tabpanel", en bykomende aria-eienskappe om hul struktuur, funksionaliteit en huidige toestand aan gebruikers van ondersteunende tegnologieë (soos skermlesers) oor te dra. As 'n beste praktyk beveel ons aan om <button>elemente vir die oortjies te gebruik, aangesien dit kontroles is wat 'n dinamiese verandering veroorsaak, eerder as skakels wat na 'n nuwe bladsy of ligging navigeer.

In ooreenstemming met die ARIA Authoring Practices-patroon, ontvang slegs die tans aktiewe oortjie sleutelbordfokus. Wanneer die JavaScript-inprop geïnisieer word, sal dit tabindex="-1"op alle onaktiewe oortjiekontroles ingestel word. Sodra die tans aktiewe oortjie fokus het, aktiveer die wysersleutels die vorige/volgende oortjie, met die inprop wat die swerftogtabindex dienooreenkomstig verander. Let egter daarop dat die JavaScript-inprop nie tussen horisontale en vertikale oortjielyste onderskei wanneer dit by wysersleutelinteraksies kom nie: ongeag die oortjielys se oriëntasie, gaan beide die op- en linkerwyser na die vorige oortjie, en af en regs wyser na die volgende oortjie.

Oor die algemeen, om sleutelbordnavigasie te vergemaklik, word dit aanbeveel om die oortjiepanele self ook fokusbaar te maak, tensy die eerste element wat betekenisvolle inhoud binne die oortjiepaneel bevat, reeds fokusbaar is. Die JavaScript-inprop probeer nie om hierdie aspek te hanteer nie - waar toepaslik, moet jy jou oortjiepanele uitdruklik fokusbaar maak deur tabindex="0"jou opmaak by te voeg.

Die oortjie JavaScript-inprop ondersteun nie koppelvlakke met oortjies wat aftrekkieslys bevat nie, aangesien dit beide bruikbaarheids- en toeganklikheidkwessies veroorsaak. Vanuit 'n bruikbaarheidsperspektief kan die feit dat die oortjie wat tans vertoon word se snellerelement nie onmiddellik sigbaar is nie (soos dit binne die geslote aftreklys is) verwarring veroorsaak. Vanuit 'n toeganklikheidsoogpunt is daar tans geen sinvolle manier om hierdie soort konstruksie na 'n standaard WAI ARIA-patroon te karteer nie, wat beteken dat dit nie maklik verstaanbaar gemaak kan word vir gebruikers van ondersteunende tegnologieë nie.

Die gebruik van data-kenmerke

Jy kan 'n oortjie- of pilnavigasie aktiveer sonder om enige JavaScript te skryf deur bloot 'n element te spesifiseer data-bs-toggle="tab"of data-bs-toggle="pill"op 'n element. Gebruik hierdie data-kenmerke op .nav-tabsof .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>

Via JavaScript

Aktiveer tabbare oortjies via JavaScript (elke oortjie moet individueel geaktiveer word):

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

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

Jy kan individuele oortjies op verskeie maniere aktiveer:

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

Vervaag effek

Om oortjies te laat vervaag, voeg .fadeby elke .tab-pane. Die eerste oortjie-venster moet ook .showdie aanvanklike inhoud sigbaar maak.

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

Metodes

Asinchroniese metodes en oorgange

Alle API-metodes is asynchronies en begin 'n oorgang . Hulle keer terug na die oproeper sodra die oorgang begin is, maar voordat dit eindig . Daarbenewens sal 'n metode-oproep op 'n oorgangskomponent geïgnoreer word .

Sien ons JavaScript-dokumentasie vir meer inligting .

Aktiveer jou inhoud as 'n oortjie-element.

Jy kan 'n oortjie-instansie met die konstruktor skep, byvoorbeeld:

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

Metode	Beskrywing
`dispose`	Vernietig 'n element se oortjie.
`getInstance`	Statiese metode wat jou toelaat om die oortjie-instansie te kry wat met 'n DOM-element geassosieer word, jy kan dit so gebruik: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statiese metode wat 'n oortjie-instansie wat aan 'n DOM-element geassosieer word terugstuur of 'n nuwe een skep ingeval dit nie geïnisialiseer is nie. Jy kan dit so gebruik: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Kies die gegewe oortjie en wys die gepaardgaande paneel. Enige ander oortjie wat voorheen gekies is, word ongeselekteer en die gepaardgaande paneel word versteek. Keer terug na die beller voordat die oortjie-venster werklik gewys is (dws voor die `shown.bs.tab`gebeurtenis plaasvind).

Gebeurtenisse

Wanneer 'n nuwe oortjie gewys word, begin die gebeure in die volgende volgorde:

hide.bs.tab(op die huidige aktiewe oortjie)
show.bs.tab(op die om te wys-oortjie)
hidden.bs.tab(op die vorige aktiewe oortjie, dieselfde een as vir die hide.bs.tabgeleentheid)
shown.bs.tab(op die nuut-aktiewe oortjie wat pas gewys is, dieselfde een as vir die show.bs.tabgeleentheid)

As geen oortjie reeds aktief was nie, sal die hide.bs.taben hidden.bs.tabgebeure nie geaktiveer word nie.

Soort gebeurtenis	Beskrywing
`hide.bs.tab`	Hierdie gebeurtenis begin wanneer 'n nuwe oortjie gewys moet word (en dus moet die vorige aktiewe oortjie versteek word). Gebruik `event.target`en `event.relatedTarget`om onderskeidelik die huidige aktiewe oortjie en die nuwe wat binnekort aktief sal wees te teiken.
`hidden.bs.tab`	Hierdie gebeurtenis begin nadat 'n nuwe oortjie gewys is (en dus word die vorige aktiewe oortjie versteek). Gebruik `event.target`en `event.relatedTarget`om onderskeidelik die vorige aktiewe oortjie en die nuwe aktiewe oortjie te teiken.
`show.bs.tab`	Hierdie gebeurtenis begin op oortjievertoning, maar voordat die nuwe oortjie gewys is. Gebruik `event.target`en `event.relatedTarget`om onderskeidelik die aktiewe oortjie en die vorige aktiewe oortjie (indien beskikbaar) te teiken.
`shown.bs.tab`	Hierdie gebeurtenis begin op oortjievertoning nadat 'n oortjie gewys is. Gebruik `event.target`en `event.relatedTarget`om onderskeidelik die aktiewe oortjie en die vorige aktiewe oortjie (indien beskikbaar) te teiken.

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