in English

Navs

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

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. 
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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.

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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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>

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.

Dacă construiți JavaScript din sursă, este nevoieutil.js de .

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 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ă pluginul JavaScript pentru filă nu acceptă interfețe cu file care conțin meniuri drop-down, 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ță.

Conținutul substituent pentru panoul cu file. Acesta se referă la fila de pornire. Te duce la kilometri sus, atât de sus, pentru că are acel zâmbet internațional. E un străin în patul meu, se bate în capul meu. Oh nu. Într-o altă viață te-aș face să stai. Pentru că eu, sunt capabil de orice. Pregătindu-mă pentru bătălia mea de încoronare. Obișnuiai să furi băutura alcoolică a părinților tăi și să te urci pe acoperiș. Ton, bronzat și gata, ridică-l pentru că devine greu. Dragostea ei este ca un drog. Presupun că am uitat că am de ales.

Conținutul substituent pentru panoul cu file. Acesta se referă la fila profil. Ai cea mai bună arhitectură. Ştampile de paşapoarte, e cosmopolită. Bine, proaspăt, înverșunat, l-am blocat. N-am plănuit niciodată că într-o zi te voi pierde. Ea îți mănâncă inima. Sărutul tău este cosmic, fiecare mișcare este magică. Mă refer la cei, adică ca și cum ea ar fi aceea. Salutări, dragi, haideți să facem o călătorie. Doar dețineți noaptea ca cea de 4 iulie! Dar ai prefera să fii irosit.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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.

Conținutul substituent pentru panoul cu file. Acesta se referă la fila de pornire. Te duce la kilometri sus, atât de sus, pentru că are acel zâmbet internațional. E un străin în patul meu, se bate în capul meu. Oh nu. Într-o altă viață te-aș face să stai. Pentru că eu, sunt capabil de orice. Pregătindu-mă pentru bătălia mea de încoronare. Obișnuiai să furi băutura alcoolică a părinților tăi și să te urci pe acoperiș. Ton, bronzat și gata, ridică-l pentru că devine greu. Dragostea ei este ca un drog. Presupun că am uitat că am de ales.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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.

Conținutul substituent pentru panoul cu file. Acesta se referă la fila de pornire. Te-am văzut în centrul orașului cântând Blues. Urmărește-te că încercuiești canalul. De ce nu mă lași să trec pe aici? Greu este capul care poartă coroana. Da, îi facem pe îngeri să plângă, plouând de sus pe pământ. Vrei să vezi spectacolul în 3D, un film. Te-ai simțit vreodată atât de subțire de hârtie. Este un da sau nu, poate nu.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <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>
</div>

Utilizarea atributelor de date

Puteți activa o filă sau o navigare prin pilule fără a scrie JavaScript, prin simpla specificare data-toggle="tab"sau data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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):

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

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

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third 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 .

$().tab

Activează un element de filă și un container de conținut. Tab ar trebui să aibă fie un atribut, fie data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('arată')

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

$('#someTab').tab('show')

.tab('aruncă')

Distruge fila unui element.

Evenimente

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

  1. hide.bs.tab(în fila activă curentă)
  2. show.bs.tab(în fila de afișat)
  3. hidden.bs.tab(pe fila activă anterioară, aceeași ca pentru hide.bs.tabeveniment)
  4. 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
arată.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.relatedTargetpentru a viza fila activă și, respectiv, fila activă anterioară (dacă este disponibilă).
afișat.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.relatedTargetpentru a viza fila activă și, respectiv, fila activă anterioară (dacă este disponibilă).
ascunde.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.relatedTargetpentru a viza fila activă curentă și, respectiv, noua filă care va fi activă în curând.
ascuns.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.relatedTargetpentru a viza fila activă anterioară și, respectiv, noua filă activă. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})