Navs și file

Documentație și exemple pentru utilizarea componentelor de navigare incluse în Bootstrap.

Pe aceasta pagina

Nav. de bază

Navigarea disponibilă în Bootstrap partajează markup și stiluri generale, de la .navclasa de bază până la stările active și dezactivate. Schimbați clasele modificatoare pentru a comuta între fiecare stil.

Componenta de bază .naveste construită cu flexbox și oferă o bază solidă pentru construirea tuturor tipurilor de componente de navigație. Include unele înlocuiri de stil (pentru lucrul cu liste), câteva link-up padding pentru zone mai mari de accesare și stil de bază dezactivat.

Componenta de bază .navnu include nicio .activestare. Următoarele exemple includ clasa, în principal pentru a demonstra că această clasă particulară nu declanșează niciun stil special.

Pentru a transmite starea activă tehnologiilor de asistență, utilizați aria-currentatributul — folosind pagevaloarea pentru pagina curentă sau truepentru elementul curent dintr-un set.

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

Clasele sunt folosite pe tot parcursul, astfel încât marcajul poate fi foarte flexibil. Folosiți <ul>s ca mai sus, <ol>dacă ordinea articolelor dvs. este importantă, sau rulați-vă propria cu un <nav>element. Deoarece .navfolosește display: flex, linkurile de navigare se comportă la fel ca elementele de navigare, dar fără markup suplimentar.

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

Stiluri disponibile

Schimbați stilul .navcomponentei s cu modificatori și utilitare. Amestecați și potriviți după cum este necesar sau construiți-vă propriul dvs.

Aliniere orizontala

Schimbați alinierea orizontală a navigației dvs. cu utilitarele Flexbox . În mod implicit, navigațiile sunt aliniate la stânga, dar le puteți schimba cu ușurință la centru sau la dreapta.

Centrat cu .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">Disabled</a>
  </li>
</ul>

Aliniat la dreapta cu .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">Disabled</a>
  </li>
</ul>

Vertical

Stivuiți-vă navigarea schimbând direcția elementului flexibil cu .flex-columnutilitarul. Trebuie să le stivuiți pe unele ferestre, dar nu pe altele? Utilizați versiunile receptive (de exemplu, .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">Disabled</a>
  </li>
</ul>

Ca întotdeauna, navigarea verticală este posibilă și fără <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">Disabled</a>
</nav>

Filele

Preia navigarea de bază de sus și adaugă .nav-tabsclasa pentru a genera o interfață cu file. Folosiți-le pentru a crea regiuni tabulabile cu pluginul nostru JavaScript pentru fila .

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

Pastile

Luați același HTML, dar folosiți .nav-pillsîn schimb:

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

Completați și justificați

Forțați .navconținutul dvs. să extindă întreaga lățime disponibilă una dintre cele două clase de modificatori. Pentru a umple proporțional tot spațiul disponibil cu .nav-iteme-urile dvs., utilizați .nav-fill. Observați că tot spațiul orizontal este ocupat, dar nu fiecare element de navigare are aceeași lățime.

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

Când utilizați o <nav>navigare bazată pe -, puteți omite în siguranță .nav-item, deoarece .nav-linkeste necesar doar pentru <a>elementele de stil.

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

Pentru elemente de lățime egală, utilizați .nav-justified. Tot spațiul orizontal va fi ocupat de legături de navigare, dar spre deosebire de cele de .nav-fillmai sus, fiecare element de navigare va avea aceeași lățime.

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

Similar cu .nav-fillexemplul folosind o <nav>navigare bazată pe -.

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

Lucrul cu utilități flexibile

Dacă aveți nevoie de variații de navigare receptive, luați în considerare utilizarea unei serii de utilitare flexbox . Deși sunt mai detaliate, aceste utilitare oferă o personalizare mai mare în punctele de întrerupere receptive. În exemplul de mai jos, navigația noastră va fi stivuită pe cel mai jos punct de întrerupere, apoi se va adapta la un aspect orizontal care umple lățimea disponibilă începând de la punctul mic de întrerupere.

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

Referitor la accesibilitate

Dacă utilizați navs pentru a oferi o bară de navigare, asigurați-vă că adăugați o role="navigation"la cel mai logic container părinte al <ul>fișierului , sau includeți un <nav>element în întreaga navigare. Nu adăugați rolul în <ul>sine, deoarece acest lucru ar împiedica să fie anunțat ca o listă reală de către tehnologiile de asistență.

Rețineți că barele de navigare, chiar dacă sunt stilate vizual ca file cu .nav-tabsclasa, nu ar trebui să aibă role="tablist", role="tab"sau role="tabpanel"atribute. Acestea sunt adecvate numai pentru interfețele cu file dinamice, așa cum este descris în Practicile de creație WAI ARIA . Consultați comportamentul JavaScript pentru interfețele dinamice cu file în această secțiune pentru un exemplu. Atributul aria-currentnu este necesar pe interfețele cu file dinamice, deoarece JavaScript-ul nostru gestionează starea selectată adăugând aria-selected="true"pe fila activă.

Folosind meniuri derulante

Adăugați meniuri derulante cu puțin HTML suplimentar și pluginul JavaScript pentru meniuri derulante .

File cu meniuri derulante

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

Pastile cu meniuri derulante

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

Sass

Variabile

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

Comportamentul JavaScript

Utilizați pluginul JavaScript pentru filă - includeți-l individual sau prin bootstrap.jsfișierul compilat - pentru a extinde filele și pastilele noastre de navigare pentru a crea panouri de conținut local cu tabele.

Interfețele dinamice cu file, așa cum sunt descrise în Practicile de creație WAI ARIA , necesită atribute role="tablist", role="tab", role="tabpanel", și suplimentare aria-pentru a le transmite structura, funcționalitatea și starea actuală utilizatorilor tehnologiilor de asistență (cum ar fi cititoarele de ecran). Ca cea mai bună practică, vă recomandăm să folosiți <button>elemente pentru file, deoarece acestea sunt controale care declanșează o schimbare dinamică, mai degrabă decât linkuri care navighează către o pagină sau o locație nouă.

Rețineți că interfețele cu file dinamice nu ar trebui să conțină meniuri drop-down, deoarece acest lucru cauzează atât probleme de utilizare, cât și de accesibilitate. Din punct de vedere al utilizării, faptul că elementul de declanșare al filei afișate în prezent nu este vizibil imediat (deoarece se află în meniul derulant închis) poate provoca confuzie. Din punct de vedere al accesibilității, în prezent nu există o modalitate sensibilă de a mapa acest tip de construct la un model WAI ARIA standard, ceea ce înseamnă că nu poate fi ușor de înțeles pentru utilizatorii tehnologiilor de asistență.

Acesta este conținutul substituent al filei Acasă. Făcând clic pe altă filă, se va comuta vizibilitatea acesteia pentru următoarea. Fila JavaScript schimbă clase pentru a controla vizibilitatea conținutului și stilul. Îl puteți folosi cu tab-uri, pastile și orice altă .navnavigație alimentată.

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>

Pentru a vă potrivi nevoilor, acesta funcționează cu <ul>marcajul bazat pe -, așa cum se arată mai sus, sau cu orice marcaj arbitrar „roll your own”. Rețineți că, dacă utilizați <nav>, nu ar trebui să adăugați role="tablist"direct la acesta, deoarece aceasta ar înlocui rolul nativ al elementului ca reper de navigare. În schimb, treceți la un element alternativ (în exemplul de mai jos, un simplu <div>) și înfășurați-l în <nav>jurul acestuia.

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

Pluginul tabs funcționează și cu pastile.

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

Și cu pastile verticale.

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>

Utilizarea atributelor de date

Puteți activa o filă sau o navigare prin pilule fără a scrie JavaScript, prin simpla specificare data-bs-toggle="tab"sau data-bs-toggle="pill"pe un element. Utilizați aceste atribute de date pe .nav-tabssau .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>

Prin JavaScript

Activați filele tabulabile prin JavaScript (fiecare filă trebuie activată individual):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

Puteți activa file individuale în mai multe moduri:

var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Efect de estompare

Pentru ca filele să dispară, adăugați .fadela fiecare .tab-pane. De asemenea, primul panou de file trebuie .showsă facă vizibil conținutul inițial.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Metode

Metode și tranziții asincrone

Toate metodele API sunt asincrone și încep o tranziție . Ei revin la apelant imediat ce tranziția este începută, dar înainte ca aceasta să se încheie . În plus, un apel de metodă pentru o componentă de tranziție va fi ignorat .

Consultați documentația noastră JavaScript pentru mai multe informații .

constructor

Activează un element de filă și un container de conținut. Tab ar trebui să aibă fie un atribut, fie data-bs-target, dacă se utilizează un link, un hrefatribut, care vizează un nod container din DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child button')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

show

Selectează fila dată și arată panoul asociat. Orice altă filă care a fost selectată anterior devine neselectată, iar panoul asociat este ascuns. Revine la apelant înainte ca panoul de file să fie afișat efectiv (adică înainte de apariția shown.bs.tabevenimentului).

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

  tab.show()

dispose

Distruge fila unui element.

getInstance

Metodă statică care vă permite să obțineți instanța file asociată cu un element DOM

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

getOrCreateInstance

Metodă statică care vă permite să obțineți instanța file asociată cu un element DOM sau să creați una nouă în cazul în care nu a fost inițializată

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

Evenimente

Când se afișează o filă nouă, evenimentele se declanșează în următoarea ordine:

hide.bs.tab(în fila activă curentă)
show.bs.tab(în fila de afișat)
hidden.bs.tab(pe fila activă anterioară, aceeași ca pentru hide.bs.tabeveniment)
shown.bs.tab(în fila nou-activă tocmai afișată, aceeași ca și pentru show.bs.tabeveniment)

Dacă nicio filă nu era deja activă, atunci evenimentele hide.bs.tabși hidden.bs.tabnu vor fi declanșate.

Tip de eveniment	Descriere
`show.bs.tab`	Acest eveniment se declanșează în afișarea filelor, dar înainte ca noua filă să fie afișată. Utilizați `event.target`și `event.relatedTarget`pentru a viza fila activă și, respectiv, fila activă anterioară (dacă este disponibilă).
`shown.bs.tab`	Acest eveniment se declanșează în afișarea filelor după ce a fost afișată o filă. Utilizați `event.target`și `event.relatedTarget`pentru a viza fila activă și, respectiv, fila activă anterioară (dacă este disponibilă).
`hide.bs.tab`	Acest eveniment se declanșează atunci când trebuie afișată o filă nouă (și astfel fila activă anterioară trebuie să fie ascunsă). Utilizați `event.target`și `event.relatedTarget`pentru a viza fila activă curentă și, respectiv, noua filă care va fi activă în curând.
`hidden.bs.tab`	Acest eveniment se declanșează după ce este afișată o nouă filă (și astfel fila activă anterioară este ascunsă). Utilizați `event.target`și `event.relatedTarget`pentru a viza fila activă anterioară și, respectiv, noua filă activă.

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