Navs

Dokumentáció és példák a Bootstrap mellékelt navigációs összetevőinek használatához.

Base nav

A Bootstrapban elérhető navigáció megosztja az általános jelöléseket és stílusokat, az alaposztálytól .navaz aktív és letiltott állapotig. Cserélje fel a módosító osztályokat az egyes stílusok közötti váltáshoz.

Az alapelem .navflexbox-szal készült, és erős alapot biztosít minden típusú navigációs alkatrész felépítéséhez. Tartalmaz néhány stílusfelülírást (a listákkal való munkához), néhány hivatkozáskitöltést a nagyobb találati területekhez, és az alapvető letiltott stílust.

Az alapkomponens .navnem tartalmaz semmilyen .activeállapotot. A következő példák az osztályt tartalmazzák, főleg annak bemutatására, hogy ez az osztály nem vált ki semmilyen különleges stílust.

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

Az osztályokat mindenhol használják, így a jelölés rendkívül rugalmas lehet. Használja <ul>a fentiekhez hasonlókat, <ol>ha fontos a tételek sorrendje, vagy dobja a sajátját egy <nav>elemmel. Mivel a .navfelhasználások display: flex, a navigációs hivatkozások ugyanúgy viselkednek, mint a navigációs elemek, de extra jelölés nélkül.

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

Elérhető stílusok

Módosítókkal és segédprogramokkal módosítsa az .navs komponens stílusát. Szükség szerint keverje össze, vagy készítse el a sajátját.

Vízszintes igazítás

Módosítsa a navigációs készülék vízszintes beállítását a flexbox segédprogramokkal . Alapértelmezés szerint a navigációs helyek balra vannak igazítva, de egyszerűen módosíthatja őket középre vagy jobbra igazítva.

Középre a .justify-content-centerkövetkezővel:

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

Jobbra igazítva ezzel .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>

Függőleges

Halmozza fel a navigációt a rugalmas elem irányának a .flex-columnsegédprogrammal történő megváltoztatásával. Egyes nézetablakban kell őket egymásra helyezni, másokon nem? Használja a reszponzív verziókat (pl. .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>

Mint mindig, a függőleges navigáció <ul>s nélkül is lehetséges.

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

Tabs

Felülről veszi az alap navigációt, és hozzáadja az .nav-tabsosztályt egy füles felület létrehozásához. Használja őket lapozható régiók létrehozására a lap JavaScript beépülő moduljával .

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

Tabletták

Vegyük ugyanazt a HTML-kódot, de használjuk .nav-pillshelyette:

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

Töltse ki és indokolja

Kényszerítse a .navtartalmát, hogy kiterjesztse a teljes elérhető szélességet a két módosító osztály egyike. Ha az összes rendelkezésre álló helyet arányosan szeretné kitölteni az .nav-items-ekkel, használja a gombot .nav-fill. Figyelje meg, hogy az összes vízszintes terület foglalt, de nem minden navigációs elem azonos szélességű.

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

Ha egy <nav>-alapú navigációt használ, nyugodtan kihagyhatja .nav-item, mivel csak .nav-linka stíluselemekhez szükséges <a>.

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

Az egyenlő szélességű elemekhez használja a .nav-justified. A teljes vízszintes helyet a navigációs hivatkozások foglalják el, de a .nav-fillfentiekkel ellentétben minden navigációs elem azonos szélességű lesz.

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

Hasonlóan a -alapú navigációt .nav-fillhasználó példához .<nav>

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

Rugalmas segédprogramokkal való munka

Ha reszponzív navigációs változatokra van szüksége, fontolja meg egy sor flexbox segédprogram használatát . Noha ezek a segédprogramok bőbeszédűbbek, nagyobb testreszabást kínálnak az érzékeny töréspontok között. Az alábbi példában a navigátorunk a legalacsonyabb töréspontra kerül, majd alkalmazkodik egy vízszintes elrendezéshez, amely kitölti a rendelkezésre álló szélességet a kis törésponttól kezdve.

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

Az elérhetőséggel kapcsolatban

Ha navigációs sávot használ navigációs sáv létrehozásához, ügyeljen arra, role="navigation"hogy a leglogikusabb szülőtárolóhoz adjon egy elemet <ul>, vagy körbevesz egy <nav>elemet a teljes navigáció köré. Ne adja hozzá a szerepet <ul>magához, mert ezzel megakadályozhatja, hogy a kisegítő technológiák tényleges listának jelentsék.

.nav-tabsNe feledje, hogy a navigációs sávok, még akkor sem, ha vizuálisan az osztályhoz tartozó lapokként vannak kialakítva , nem tartalmazhatnak role="tablist", role="tab"vagy role="tabpanel"attribútumokat. Ezek csak a dinamikus füles felületekhez megfelelőek, az ARIA Authoring Practices Guide lapok mintájában leírtak szerint . Példaként tekintse meg a JavaScript viselkedését dinamikus füles felületekhez ebben a szakaszban.

Legördülő menük használata

Adjon hozzá legördülő menüket egy kis extra HTML-lel és a legördülő JavaScript beépülő modullal .

Lapok legördülő menükkel

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

Tabletták legördülő menükkel

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

JavaScript viselkedés

Használja a lap JavaScript beépülő modulját – külön-külön vagy a lefordított bootstrap.jsfájlon keresztül is elhelyezheti – navigációs lapjaink és tablettáink kiterjesztéséhez helyi tartalom lapozható ablaktábláinak létrehozásához.

Ha a JavaScriptet forrásból készíti, akkor ehhezutil.js .

Az ARIA Authoring Practices Guide lapok mintájában leírt dinamikus lapos felületekhez , , és további attribútumok szükségesek role="tablist", hogy szerkezetüket, funkcionalitásukat és jelenlegi állapotukat átadják a kisegítő technológiák (például képernyőolvasók) felhasználóinak. Bevált gyakorlatként azt javasoljuk, hogy elemeket használjon a lapokhoz, mivel ezek dinamikus változást indító vezérlők, nem pedig új oldalra vagy helyre navigáló hivatkozások.role="tab"role="tabpanel"aria-<button>

Vegye figyelembe, hogy a lap JavaScript beépülő modulja nem támogatja a legördülő menüket tartalmazó lapos felületeket, mivel ezek mind használhatósági, mind kisegítő lehetőségeket okoznak. A használhatóság szempontjából az a tény, hogy az aktuálisan megjelenített lap triggereleme nem látható azonnal (mivel a zárt legördülő menüben van), zavart okozhat. Hozzáférhetőségi szempontból jelenleg nincs ésszerű módja ennek a fajta konstrukciónak a szabványos WAI ARIA mintára való leképezésének, ami azt jelenti, hogy nem lehet könnyen érthetővé tenni a kisegítő technológiák felhasználói számára.

Helyőrző tartalom a lappanelhez. Ez a kezdőlapra vonatkozik. Mérföld magasra visz, olyan magasra, mert van egy nemzetközi mosolya. Egy idegen van az ágyamban, dübörög a fejemben. Óh ne. Egy másik életben arra késztetném, hogy maradj. Mert én bármire képes vagyok. Alkalmas a megkoronázó csatámra. A szülei italának ellopására és a tetőre mászására használták. Tónus, barna szabású és készen áll, emelje fel, mert elnehezül. A szerelme olyan, mint egy drog. Azt hiszem, elfelejtettem, hogy van választásom.

Helyőrző tartalom a lappanelhez. Ez a profil fülre vonatkozik. Neked van a legszebb építészeted. Útlevélbélyegzők, kozmopolita. Finom, friss, heves, zárra kaptuk. Soha nem terveztem, hogy egy napon elveszítelek. Kifalja a szívedet. A csókod kozmikus, minden mozdulat varázslatos. Mármint azok, úgy értem, mintha ő lenne az. Üdvözlet szeretteink, utazzunk. Csak a saját éjszakája, mint július 4-e! De inkább veszendőbe menne.

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>

Az Ön igényeinek kielégítése érdekében ez a <ul>fent bemutatott módon -alapú jelöléssel vagy bármilyen tetszőleges „saját” jelöléssel működik. Vegye figyelembe, hogy ha a t használja <nav>, ne role="tablist"közvetlenül adjon hozzá, mivel ez felülírná az elem natív szerepét a navigációs iránypontként. Ehelyett váltson egy alternatív elemre (az alábbi példában egy egyszerű <div>), és tekerje <nav>köré.

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.

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

A tabs plugin tablettákkal is működik.

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

És függőleges tablettákkal.

Helyőrző tartalom a lappanelhez. Ez a kezdőlapra vonatkozik. Láttalak a belvárosban a Bluest énekelni. Figyeld, ahogy körbejárod a lefolyót. Miért nem hagyod, hogy megálljak? Nehéz a fej, amely a koronát viseli. Igen, sírásra késztetjük az angyalokat, felülről záporozva a földre. 3D-ben szeretnéd látni a műsort, egy filmet. Érezted-e valaha, hogy olyan papírvékonynak érzed magad? Ez egy igen vagy nem, esetleg nem.

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>

Adatattribútumok használata

Aktiválhat egy fület vagy tabletta navigációt anélkül, hogy JavaScriptet írna, egyszerűen megadva data-toggle="tab"vagy data-toggle="pill"egy elemen. Használja ezeket az adatattribútumokat a .nav-tabsvagy oldalon .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>

JavaScripten keresztül

Lapozható lapok engedélyezése JavaScript segítségével (minden lapot külön kell aktiválni):

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

Az egyes lapokat többféleképpen is aktiválhatja:

$('#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

Fade hatás

A lapok elhalványulásához adja hozzá .fademindegyikhez a .tab-pane. Az első lappanelnek is .showláthatóvá kell tennie a kezdeti tartalmat.

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

Mód

Aszinkron módszerek és átmenetek

Minden API metódus aszinkron , és átmenetet indít . Visszatérnek a hívóhoz, amint az átmenet elkezdődik, de még azelőtt, hogy az véget érne . Ezenkívül a rendszer figyelmen kívül hagyja az átmeneti komponens metódushívásait .

További információért tekintse meg JavaScript dokumentációnkat .

$().tab

Aktivál egy tabulátor elemet és tartalomtárolót. A lapnak rendelkeznie kell egy data-targetvagy – hivatkozás használata esetén – egy hrefattribútummal, amely a DOM tárolócsomópontját célozza meg.

<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('show')

Kijelöli az adott lapot, és megjeleníti a hozzá tartozó panelt. Minden más korábban kiválasztott lap kijelölése megszűnik, és a hozzájuk tartozó panel elrejtődik. Visszatér a hívóhoz, mielőtt a lappanel ténylegesen megjelenne (azaz az shown.bs.tabesemény bekövetkezte előtt).

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

.tab('dispose')

Megsemmisíti egy elem lapját.

Események

Új lap megjelenítésekor az események a következő sorrendben aktiválódnak:

hide.bs.tab(az aktuális aktív lapon)
show.bs.tab(a megjelenítendő lapon)
hidden.bs.tab(az előző aktív lapon ugyanaz, mint az hide.bs.tabeseménynél)
shown.bs.tab(az újonnan aktív, most megjelenő lapon ugyanaz, mint az show.bs.tabeseménynél)

Ha még nem volt aktív lap, akkor a hide.bs.tabés hidden.bs.tabesemények nem aktiválódnak.

Esemény típus	Leírás
show.bs.tab	Ez az esemény a lap megjelenítésekor aktiválódik, de az új lap megjelenítése előtt. Használja a `event.target`és `event.relatedTarget`az aktív lapot, illetve az előző aktív lapot (ha elérhető) célozza meg.
show.bs.tab	Ez az esemény lapmegjelenítéskor aktiválódik, miután egy lap megjelenik. Használja a `event.target`és `event.relatedTarget`az aktív lapot, illetve az előző aktív lapot (ha elérhető) célozza meg.
hide.bs.tab	Ez az esemény akkor aktiválódik, amikor új lapot kell megjeleníteni (és így az előző aktív lapot el kell rejteni). Használja a `event.target`és `event.relatedTarget`az aktuális aktív lapot, illetve a hamarosan aktívvá váló új lapot.
rejtett.bs.tab	Ez az esemény egy új lap megjelenítése után aktiválódik (és így az előző aktív lap el van rejtve). Használja a `event.target`és `event.relatedTarget`az előző aktív lapot, illetve az új aktív lapot.

$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})