in English

Navs

Dokumentation och exempel för hur du använder Bootstraps medföljande navigationskomponenter.

Basnav

Navigering tillgänglig i Bootstrap delar generell uppmärkning och stilar, från basklassen .navtill aktiva och inaktiverade tillstånd. Byt modifieringsklasser för att växla mellan varje stil.

Baskomponenten .navär byggd med flexbox och ger en stark grund för att bygga alla typer av navigationskomponenter. Den innehåller vissa stilöverstyrningar (för att arbeta med listor), en del länkutfyllnad för större träffområden och grundläggande funktionshindrade styling.

Baskomponenten .navinkluderar inte något .activetillstånd. Följande exempel inkluderar klassen, främst för att visa att just denna klass inte utlöser någon speciell styling. 
<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>

Klasser används genomgående, så din uppmärkning kan vara superflexibel. Använd <ul>s som ovan, <ol>om ordningen på dina föremål är viktig, eller rulla din egen med ett <nav>element. Eftersom de .navanvänder display: flex, fungerar nav-länkarna på samma sätt som nav-objekt, men utan extra uppmärkning.

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

Tillgängliga stilar

Ändra stilen på .navs-komponenten med modifierare och verktyg. Mixa och matcha efter behov, eller bygg din egen.

Horisontell linjering

Ändra den horisontella justeringen av din nav med flexbox-verktyg . Som standard är nav vänsterjusterade, men du kan enkelt ändra dem till mitt- eller högerjusterade.

Centrerad med .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>

Högerjusterad med .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>

Vertikal

Stapla din navigering genom att ändra flexobjektets riktning med .flex-columnverktyget. Behöver du stapla dem på vissa visningsportar men inte andra? Använd de responsiva versionerna (t.ex. .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>

Som alltid är vertikal navigering <ul>också möjlig utan 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>

Flikar

Tar den grundläggande navigeringen ovanifrån och lägger till .nav-tabsklassen för att skapa ett flikgränssnitt. Använd dem för att skapa flikområden med vårt JavaScript-plugin för flikar .

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

Biljard

Ta samma HTML, men använd .nav-pillsistället:

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

Fyll och motivera

Tvinga ditt .navinnehåll att utöka den fulla tillgängliga bredden en av två modifieringsklasser. För att proportionellt fylla allt tillgängligt utrymme med dina .nav-items, använd .nav-fill. Lägg märke till att allt horisontellt utrymme är upptaget, men inte alla navigeringsobjekt har samma bredd.

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

När du använder en <nav>-baserad navigering kan du säkert utelämna .nav-itemeftersom endast .nav-linkkrävs för stylingelement <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>

För element med lika bredd, använd .nav-justified. Allt horisontellt utrymme kommer att upptas av nav-länkar, men till skillnad från .nav-fillovanstående kommer varje nav-objekt att ha samma bredd.

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

Liknar .nav-fillexemplet med en <nav>-baserad navigering.

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

Arbeta med flexverktyg

Om du behöver responsiva nav-varianter kan du överväga att använda en serie flexbox-verktyg . Även om de är mer omfattande erbjuder dessa verktyg större anpassning över responsiva brytpunkter. I exemplet nedan kommer vår nav att staplas på den lägsta brytpunkten och sedan anpassas till en horisontell layout som fyller den tillgängliga bredden från den lilla brytpunkten.

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

Angående tillgänglighet

Om du använder navigeringsverktyg för att tillhandahålla ett navigeringsfält, se till att lägga till en role="navigation"i den mest logiska överordnade behållaren för <ul>, eller linda ett <nav>element runt hela navigeringen. Lägg inte till rollen till sig <ul>själv, eftersom detta skulle förhindra att den annonseras som en faktisk lista av hjälpmedel.

Observera att navigeringsfält, även om de är visuellt utformade som flikar med .nav-tabsklassen, inte ska ges role="tablist", role="tab"eller role="tabpanel"attribut. Dessa är endast lämpliga för dynamiska flikar, som beskrivs i ARIA Authoring Practices Guide-flikmönster . Se JavaScript-beteende för dynamiska flikar i det här avsnittet för ett exempel.

Använder rullgardinsmenyn

Lägg till rullgardinsmenyer med lite extra HTML och rullgardinsmenyn JavaScript-plugin .

Flikar med rullgardinsmenyer

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

Piller med dropdowns

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

Använd fliken JavaScript-plugin – inkludera den individuellt eller genom den kompilerade bootstrap.jsfilen – för att utöka våra navigeringsflikar och piller för att skapa flikar med lokalt innehåll.

Om du bygger vårt JavaScript från källan kräverutil.js det .

Dynamiska gränssnitt med flikar, som beskrivs i ARIA Authoring Practices Guide-flikmönster , kräver role="tablist", role="tab", role="tabpanel", och ytterligare aria-attribut för att förmedla deras struktur, funktionalitet och nuvarande tillstånd till användare av hjälpmedelstekniker (som skärmläsare). Som en bästa praxis rekommenderar vi att du använder <button>element för flikarna, eftersom dessa är kontroller som utlöser en dynamisk förändring, snarare än länkar som navigerar till en ny sida eller plats.

Observera att flik JavaScript-plugin inte stöder flikar som innehåller rullgardinsmenyer, eftersom dessa orsakar både användbarhets- och tillgänglighetsproblem. Ur ett användbarhetsperspektiv kan det faktum att den aktuella visade flikens triggerelement inte är omedelbart synligt (eftersom det finns i den stängda rullgardinsmenyn) orsaka förvirring. Ur tillgänglighetssynpunkt finns det för närvarande inget vettigt sätt att kartlägga denna typ av konstruktion till ett standard WAI ARIA-mönster, vilket innebär att det inte lätt kan göras begripligt för användare av hjälpmedelsteknik.

Platshållarinnehåll för flikpanelen. Den här hänför sig till fliken Hem. Tar dig mil högt, så högt, för hon har det där internationella leendet. Det ligger en främling i min säng, det bultar i mitt huvud. Å nej. I ett annat liv skulle jag få dig att stanna. För jag är kapabel till vad som helst. Passar för min krona strid. Används för att stjäla dina föräldrars sprit och klättra upp på taket. Ton, solbränd passform och klar, vrid upp den för den blir tung. Hennes kärlek är som en drog. Jag antar att jag glömde att jag hade ett val.

Platshållarinnehåll för flikpanelen. Den här hänför sig till profilfliken. Du har den finaste arkitekturen. Passstämplar, hon är kosmopolitisk. Fint, fräscht, häftigt, vi fick det på lås. Har aldrig planerat att jag en dag skulle förlora dig. Hon äter upp ditt hjärta. Din kyss är kosmisk, varje rörelse är magi. Jag menar de, jag menar som om hon är den. Hälsningar nära och kära låt oss ta en resa. Bara äga natten som den 4 juli! Men du vill hellre bli bortkastad.

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>

För att passa dina behov fungerar detta med <ul>-baserad uppmärkning, som visas ovan, eller med valfri "rulla din egen" uppmärkning. Observera att om du använder <nav>, bör du inte lägga role="tablist"till direkt i den, eftersom detta skulle åsidosätta elementets ursprungliga roll som navigeringslandmärke. Byt istället till ett alternativt element (i exemplet nedan, en enkel <div>) och linda <nav>runt det.

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

Tabs-pluginet fungerar också med piller.

Platshållarinnehåll för flikpanelen. Den här hänför sig till fliken Hem. Tar dig mil högt, så högt, för hon har det där internationella leendet. Det ligger en främling i min säng, det bultar i mitt huvud. Å nej. I ett annat liv skulle jag få dig att stanna. För jag är kapabel till vad som helst. Passar för min krona strid. Används för att stjäla dina föräldrars sprit och klättra upp på taket. Ton, solbränd passform och klar, vrid upp den för den blir tung. Hennes kärlek är som en drog. Jag antar att jag glömde att jag hade ett val.

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>

Och med vertikala piller.

Platshållarinnehåll för flikpanelen. Den här hänför sig till fliken Hem. Såg dig i centrum sjunga Blues. Se dig cirkla runt avloppet. Varför låter du mig inte stanna förbi? Tungt är huvudet som bär kronan. Ja, vi får änglar att gråta och regnar ner på jorden uppifrån. Vill se programmet i 3D, en film. Känner du dig någonsin så papperstunt. Det är ett ja eller nej, nej kanske.

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>

Använda dataattribut

Du kan aktivera en navigering med flikar eller piller utan att skriva något JavaScript genom att helt enkelt ange data-toggle="tab"eller data-toggle="pill"på ett element. Använd dessa dataattribut på .nav-tabseller .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>

Via JavaScript

Aktivera flikar via JavaScript (varje flik måste aktiveras individuellt):

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

Du kan aktivera enskilda flikar på flera sätt:

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

Tona effekt

För att få flikar att tona in, lägg .fadetill varje .tab-pane. Den första flikrutan måste också .showgöra det ursprungliga innehållet synligt.

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

Metoder

Asynkrona metoder och övergångar

Alla API - metoder är asynkrona och startar en övergång . De återvänder till den som ringer så snart övergången har påbörjats men innan den slutar . Dessutom kommer ett metodanrop på en övergångskomponent att ignoreras .

Se vår JavaScript-dokumentation för mer information .

$().tab

Aktiverar ett flikelement och innehållsbehållare. Tab ska ha antingen ett data-targeteller, om du använder en länk, ett hrefattribut som är inriktat på en containernod i 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('show')

Väljer den givna fliken och visar dess tillhörande ruta. Alla andra flikar som tidigare valts avmarkeras och dess tillhörande ruta döljs. Återgår till den som ringer innan flikrutan faktiskt har visats (dvs innan shown.bs.tabhändelsen inträffar).

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

.tab('dispose')

Förstör ett elements flik.

evenemang

När en ny flik visas aktiveras händelserna i följande ordning:

  1. hide.bs.tab(på den aktuella aktiva fliken)
  2. show.bs.tab(på fliken som ska visas)
  3. hidden.bs.tab(på föregående aktiva flik, samma som för hide.bs.tabhändelsen)
  4. shown.bs.tab(på den nyligen aktiva fliken som just visades, samma som för show.bs.tabevenemanget)

Om ingen flik redan var aktiv kommer händelserna hide.bs.taboch hidden.bs.tabinte att aktiveras.

Event typ Beskrivning
visa.bs.tab Den här händelsen aktiveras vid flikvisning, men innan den nya fliken har visats. Använd event.targetoch event.relatedTargetför att rikta in den aktiva fliken respektive den föregående aktiva fliken (om tillgänglig).
visad.bs.tab Den här händelsen aktiveras vid flikvisning efter att en flik har visats. Använd event.targetoch event.relatedTargetför att rikta in den aktiva fliken respektive den föregående aktiva fliken (om tillgänglig).
hide.bs.tab Den här händelsen aktiveras när en ny flik ska visas (och därmed den tidigare aktiva fliken ska döljas). Använd event.targetoch event.relatedTargetför att rikta in den aktuella aktiva fliken respektive den nya snart-aktiva fliken.
hidden.bs.tab Den här händelsen aktiveras efter att en ny flik har visats (och den tidigare aktiva fliken döljs därför). Använd event.targetoch event.relatedTargetför att rikta in den tidigare aktiva fliken respektive den nya aktiva fliken. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})