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), unele link-up padding pentru zone de acces mai mari ș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.

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>

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.

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>

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:

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>

Aliniat la dreapta cu .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>

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

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>

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

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 .

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>

Pastile

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

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>

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.

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>

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.

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>

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.

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>

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

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>

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.

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>

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 dinamice cu file, așa cum este descris în modelul de file ARIA Authoring Practices Guide . 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

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>

Pastile cu meniuri derulante

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

Variabile

Adăugat în v5.2.0

Ca parte a abordării în evoluție a variabilelor CSS a Bootstrap, navs utilizează acum variabile CSS locale pe .nav, .nav-tabsși .nav-pillspentru personalizare îmbunătățită în timp real. Valorile pentru variabilele CSS sunt setate prin Sass, astfel încât personalizarea Sass este încă acceptată.

Pe .navclasa de bază:

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

Pe .nav-tabsclasa modificatoare:

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

Pe .nav-pillsclasa modificatoare:

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

Variabile Sass

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

Comportamentul JavaScript

Folosiț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 tabulabile de conținut local.

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.

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>

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.

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>

Pluginul tabs funcționează și cu pastile.

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>

Și cu pastile verticale. În mod ideal, pentru file verticale, ar trebui să adăugați aria-orientation="vertical"și la containerul listei de file.

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>

Accesibilitate

Interfețele dinamice cu file, așa cum sunt descrise în modelul de file ARIA Authoring Practices Guide , necesită role="tablist", role="tab", role="tabpanel", și aria-atribute suplimentare pentru a le transmite structura, funcționalitatea și starea curentă 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ă.

În conformitate cu modelul ARIA Authoring Practices, numai fila activă în prezent primește focus de la tastatură. Când pluginul JavaScript este inițializat, acesta va fi setat tabindex="-1"pe toate comenzile filelor inactive. Odată ce fila activă în prezent este focalizată, tastele cursor activează fila anterioară/următoare, pluginul modificând rovingtabindex în consecință. Cu toate acestea, rețineți că pluginul JavaScript nu face distincție între listele de file orizontale și verticale atunci când vine vorba de interacțiunile tastelor cursorului: indiferent de orientarea listei de file, atât cursorul sus, cât și cel din stânga merg la fila anterioară, iar cursorul jos și dreapta merg la fila următoare.

În general, pentru a facilita navigarea cu tastatura, se recomandă ca panourile cu file în sine să fie focalizate, de asemenea, cu excepția cazului în care primul element care conține conținut semnificativ în interiorul panoului cu file este deja focalizat. Pluginul JavaScript nu încearcă să se ocupe de acest aspect - acolo unde este cazul, va trebui să faceți în mod explicit panourile de file focalizate prin adăugarea tabindex="0"de markup.

Pluginul JavaScript pentru filă nu acceptă interfețe cu file care conțin meniuri derulante, deoarece acestea 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ță.

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

Prin JavaScript

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

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

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

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

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

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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Metode

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 .

Activează conținutul dvs. ca element de filă.

Puteți crea o instanță de filă cu constructorul, de exemplu:

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

Metodă	Descriere
`dispose`	Distruge fila unui element.
`getInstance`	Metodă statică care vă permite să obțineți instanța file asociată cu un element DOM, o puteți utiliza astfel: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Metodă statică care returnează o instanță de tab asociată unui element DOM sau creează una nouă în cazul în care nu a fost inițializată. Îl poți folosi astfel: `bootstrap.Tab.getOrCreateInstance(element)`.
`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.tab`evenimentului).

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(pe 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
`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ă.
`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ă).

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