Navs en oortjies

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

Op hierdie bladsy

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

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

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.

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

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:

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

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

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

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

Soos altyd is vertikale navigasie ook moontlik sonder <ul>s.

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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 .

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

Pille

Neem dieselfde HTML, maar gebruik .nav-pillseerder:

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

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.

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

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

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

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

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

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

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

Werk met flex utilities

As jy responsiewe navigasie-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.

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

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 WAI ARIA -outeurpraktyke . 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

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

Pille met dropdowns

<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

Veranderlikes

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

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

Dinamiese koppelvlakke met oortjies, soos beskryf in die WAI ARIA Authoring Practices , 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.

Let daarop dat dinamiese oortjies-koppelvlakke nie aftrekkieslyste moet 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.

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.

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

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.

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

Die tabs-inprop werk ook met pille.

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

En met vertikale pille.

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>

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

Via JavaScript

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

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

Jy kan individuele oortjies op verskeie maniere aktiveer:

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

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

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 .

constructor

Aktiveer 'n oortjie-element en inhoudhouer. Tab moet óf 'n data-bs-targetóf, indien 'n skakel gebruik, 'n hrefkenmerk hê, wat 'n houernodus in die DOM teiken.

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

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

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

  tab.show()

dispose

Vernietig 'n element se oortjie.

getInstance

Statiese metode waarmee u die oortjie-instansie kan kry wat met 'n DOM-element geassosieer word

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

getOrCreateInstance

Statiese metode wat jou toelaat om die oortjie-instansie te kry wat met 'n DOM-element geassosieer word, of 'n nuwe een te skep ingeval dit nie geïnisialiseer is nie

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

Events

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

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