in English

Navs

Dokumentasie en voorbeelde vir hoe om Bootstrap se ingeslote navigasiekomponente te gebruik.

Basis nav

Navigasie beskikbaar in Bootstrap deel algemene opmaak en style, van die basisklas .navtot die aktiewe en gedeaktiveerde state. Ruil wysigerklasse om tussen elke styl te wissel.

Die basis .navkomponent is gebou met flexbox en bied 'n sterk basis vir die bou van alle soorte navigasie komponente. Dit bevat 'n paar styl-oorskrywings (vir werk met lyste), 'n paar skakelopvulling vir groter trefareas, en basiese gestremde stilering.

Die basiskomponent .navsluit geen .activestaat in nie. Die volgende voorbeelde sluit die klas in, hoofsaaklik om te demonstreer dat hierdie spesifieke klas geen spesiale stilering veroorsaak nie. 
<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>

Klasse word deurgaans gebruik, so jou opmaak kan baie buigsaam wees. Gebruik <ul>s soos hierbo, <ol>as die volgorde van jou items belangrik is, of rol jou eie met 'n <nav>element. Omdat die .navgebruike display: flex, tree die nav-skakels dieselfde op as nav-items, maar sonder die ekstra opmaak.

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

Beskikbare style

Verander die styl van .navs-komponent met wysigers en nutsprogramme. Meng en pas soos nodig, of bou jou eie.

Horisontale belyning

Verander die horisontale belyning van jou nav met flexbox nutsprogramme . By verstek is navs linksbelyn, maar jy kan dit maklik verander na middel- of regsbelyn.

Gesentreer met .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>

Regsbelyn met .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>

Vertikaal

Stapel jou navigasie deur die rigting van die buigitem met die .flex-columnhulpprogram te verander. Moet u dit op sommige uitkykpoorte stapel, maar nie op ander nie? Gebruik die responsiewe weergawes (bv. .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>

Soos altyd is vertikale navigasie ook moontlik sonder <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>

Oortjies

Neem die basiese navigasie van bo af en voeg die .nav-tabsklas by om 'n oortjie-koppelvlak te genereer. Gebruik hulle om oortjies te skep met ons oortjie JavaScript-inprop .

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

Pille

Neem dieselfde HTML, maar gebruik .nav-pillseerder:

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

Vul en regverdig

Dwing jou .navse inhoud om die volle beskikbare breedte een van twee wysigerklasse uit te brei. Om alle beskikbare spasie proporsioneel met jou .nav-items te vul, gebruik .nav-fill. Let daarop dat alle horisontale spasie beset is, maar nie elke navigasie-item het dieselfde breedte nie.

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

As u 'n <nav>-gebaseerde navigasie gebruik, kan u dit veilig weglaat .nav-item, aangesien dit slegs .nav-linkbenodig word vir stileringselemente <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>

Vir gelyke breedte elemente, gebruik .nav-justified. Alle horisontale spasie sal deur navigasieskakels in beslag geneem word, maar anders as .nav-fillbogenoemde, sal elke navigasie-item dieselfde breedte hê.

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

Soortgelyk aan die .nav-fillvoorbeeld wat 'n <nav>-gebaseerde navigasie gebruik.

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

Werk met flex utilities

As jy responsiewe navigasie-variasies benodig, oorweeg dit om 'n reeks flexbox-nutsprogramme te gebruik . Alhoewel dit meer breedvoerig is, bied hierdie nutsprogramme groter aanpassing oor responsiewe breekpunte. In die voorbeeld hieronder sal ons nav op die laagste breekpunt gestapel word, en dan aanpas by 'n horisontale uitleg wat die beskikbare breedte vul vanaf die klein breekpunt.

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

Met betrekking tot toeganklikheid

As jy navs gebruik om 'n navigasiebalk te verskaf, maak seker dat jy 'n role="navigation"by die mees logiese ouerhouer van die <ul>, voeg, of 'n <nav>element om die hele navigasie draai. Moenie die rol by die <ul>self voeg nie, aangesien dit sal verhoed dat dit as 'n werklike lys deur ondersteunende tegnologieë aangekondig word.

Let daarop dat navigasiestawe, selfs al is dit visueel as oortjies saam met die .nav-tabsklas gestileer, nierole="tablist" , role="tab"of role="tabpanel"kenmerke gegee moet word nie. Dit is slegs geskik vir dinamiese oortjies-koppelvlakke, soos beskryf in die ARIA Authoring Practices Guide-oortjiespatroon . Sien JavaScript-gedrag vir dinamiese oortjies-koppelvlakke in hierdie afdeling vir 'n voorbeeld.

Gebruik aftreklys

Voeg aftrekkieslyste by met 'n bietjie ekstra HTML en die aftreklys JavaScript-inprop .

Oortjies met aftreklys

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

Pille met 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 gedrag

Gebruik die oortjie JavaScript-inprop—sluit dit individueel in of deur die saamgestelde bootstrap.jslêer—om ons navigasie-oortjies en -pille uit te brei om oortjies van plaaslike inhoud te skep.

As jy ons JavaScript vanaf die bron bou, vereisutil.js dit .

Dinamiese oortjies-koppelvlakke, soos beskryf in die ARIA Authoring Practices Guide-oortjiespatroon , vereis role="tablist", role="tab", role="tabpanel", en bykomende aria-eienskappe om hul struktuur, funksionaliteit en huidige toestand aan gebruikers van ondersteunende tegnologieë (soos skermlesers) oor te dra. As 'n beste praktyk beveel ons aan om <button>elemente vir die oortjies te gebruik, aangesien dit kontroles is wat 'n dinamiese verandering veroorsaak, eerder as skakels wat na 'n nuwe bladsy of ligging navigeer.

Let daarop dat die oortjie JavaScript-inprop nie koppelvlakke met oortjies ondersteun wat aftrekkieslyste bevat nie, aangesien dit beide bruikbaarheids- en toeganklikheidkwessies veroorsaak. Vanuit 'n bruikbaarheidsperspektief kan die feit dat die oortjie wat tans vertoon word se snellerelement nie onmiddellik sigbaar is nie (soos dit binne die geslote aftreklys is) verwarring veroorsaak. Vanuit 'n toeganklikheidsoogpunt is daar tans geen sinvolle manier om hierdie soort konstruksie na 'n standaard WAI ARIA-patroon te karteer nie, wat beteken dat dit nie maklik verstaanbaar gemaak kan word vir gebruikers van ondersteunende tegnologieë nie.

Plekhouer-inhoud vir die oortjiepaneel. Hierdie een hou verband met die tuisoortjie. Neem jou kilometers hoog, so hoog, want sy het daardie een internasionale glimlag. Daar is 'n vreemdeling in my bed, daar is 'n dreuning in my kop. O, nee. In 'n ander lewe sou ek jou laat bly. Want ek, ek is tot enigiets in staat. Geskik vir my kroonstryd. Word gebruik om jou ouers se drank te steel en op die dak te klim. Toon, bruin fiks en gereed, draai dit op want dit word swaar. Haar liefde is soos 'n dwelm. Ek dink ek het vergeet ek het 'n keuse.

Plekhouer-inhoud vir die oortjiepaneel. Hierdie een hou verband met die profiel-oortjie. Jy het die beste argitektuur. Paspoortstempels, sy is kosmopolities. Goed, vars, fel, ons het dit op slot gekry. Nooit beplan dat ek jou eendag sal verloor nie. Sy eet jou hart uit. Jou soen is kosmies, elke beweging is magie. Ek bedoel die ene, ek bedoel asof sy die een is. Groete geliefdes kom ons neem 'n reis. Besit net die nag soos die 4de Julie! Maar jy sal eerder vermors word.

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>

Om te help om aan jou behoeftes te voldoen, werk dit met <ul>-gebaseerde opmaak, soos hierbo getoon, of met enige arbitrêre "rol jou eie" opmaak. Let daarop dat as jy gebruik <nav>, jy nie role="tablist"direk daarby moet byvoeg nie, aangesien dit die element se inheemse rol as 'n navigasielandmerk sal ignoreer. Skakel eerder oor na 'n alternatiewe element (in die voorbeeld hieronder, 'n eenvoudige <div>) en draai die <nav>om dit.

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

Die tabs-inprop werk ook met pille.

Plekhouer-inhoud vir die oortjiepaneel. Hierdie een hou verband met die tuisoortjie. Neem jou kilometers hoog, so hoog, want sy het daardie een internasionale glimlag. Daar is 'n vreemdeling in my bed, daar is 'n dreuning in my kop. O, nee. In 'n ander lewe sou ek jou laat bly. Want ek, ek is tot enigiets in staat. Geskik vir my kroonstryd. Word gebruik om jou ouers se drank te steel en op die dak te klim. Toon, bruin fiks en gereed, draai dit op want dit word swaar. Haar liefde is soos 'n dwelm. Ek dink ek het vergeet ek het 'n keuse.

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>

En met vertikale pille.

Plekhouer-inhoud vir die oortjiepaneel. Hierdie een hou verband met die tuisoortjie. Het jou in die middestad gesien waar jy die Blues sing. Kyk hoe jy die drein sirkel. Hoekom laat jy my nie stop nie? Swaar is die kop wat die kroon dra. Ja, ons laat engele huil, wat van bo af op die aarde reën. Wil die program in 3D sien, 'n fliek. Voel jy ooit, voel so papierdun. Dit is 'n ja of nee, miskien nee.

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>

Die gebruik van data-kenmerke

Jy kan 'n oortjie- of pilnavigasie aktiveer sonder om enige JavaScript te skryf deur bloot 'n element te spesifiseer data-toggle="tab"of data-toggle="pill"op 'n element. Gebruik hierdie data-kenmerke op .nav-tabsof .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

Aktiveer tabbare oortjies via JavaScript (elke oortjie moet individueel geaktiveer word):

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

Jy kan individuele oortjies op verskeie maniere aktiveer:

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

Vervaag effek

Om oortjies te laat vervaag, voeg .fadeby elke .tab-pane. Die eerste oortjie-venster moet ook .showdie aanvanklike inhoud sigbaar maak.

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

Metodes

Asinchroniese metodes en oorgange

Alle API-metodes is asynchronies en begin 'n oorgang . Hulle keer terug na die oproeper sodra die oorgang begin is, maar voordat dit eindig . Daarbenewens sal 'n metode-oproep op 'n oorgangskomponent geïgnoreer word .

Sien ons JavaScript-dokumentasie vir meer inligting .

$().tab

Aktiveer 'n oortjie-element en inhoudhouer. Tab moet óf 'n data-targetóf, indien 'n skakel gebruik, 'n hrefkenmerk hê wat 'n houernodus in die DOM teiken.

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

Kies die gegewe oortjie en wys die gepaardgaande paneel. Enige ander oortjie wat voorheen gekies is, word ongeselekteer en die gepaardgaande paneel word versteek. Keer terug na die beller voordat die oortjie-venster werklik gewys is (dws voor die shown.bs.tabgebeurtenis plaasvind).

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

.tab('dispose')

Vernietig 'n element se oortjie.

Gebeurtenisse

Wanneer 'n nuwe oortjie gewys word, begin die gebeure in die volgende volgorde:

  1. hide.bs.tab(op die huidige aktiewe oortjie)
  2. show.bs.tab(op die om te wys-oortjie)
  3. hidden.bs.tab(op die vorige aktiewe oortjie, dieselfde een as vir die hide.bs.tabgeleentheid)
  4. shown.bs.tab(op die nuut-aktiewe oortjie wat pas gewys is, dieselfde een as vir die show.bs.tabgeleentheid)

As geen oortjie reeds aktief was nie, sal die hide.bs.taben hidden.bs.tabgebeure nie geaktiveer word nie.

Soort gebeurtenis Beskrywing
show.bs.tab Hierdie gebeurtenis begin op oortjievertoning, maar voordat die nuwe oortjie gewys is. Gebruik event.targeten event.relatedTargetom onderskeidelik die aktiewe oortjie en die vorige aktiewe oortjie (indien beskikbaar) te teiken.
getoon.bs.tab Hierdie gebeurtenis begin op oortjievertoning nadat 'n oortjie gewys is. Gebruik event.targeten event.relatedTargetom onderskeidelik die aktiewe oortjie en die vorige aktiewe oortjie (indien beskikbaar) te teiken.
versteek.bs.tab Hierdie gebeurtenis begin wanneer 'n nuwe oortjie gewys moet word (en dus moet die vorige aktiewe oortjie versteek word). Gebruik event.targeten event.relatedTargetom onderskeidelik die huidige aktiewe oortjie en die nuwe wat binnekort aktief sal wees, te teiken.
verborge.bs.oortjie Hierdie gebeurtenis begin nadat 'n nuwe oortjie gewys is (en dus word die vorige aktiewe oortjie versteek). Gebruik event.targeten event.relatedTargetom onderskeidelik die vorige aktiewe oortjie en die nuwe aktiewe oortjie te teiken. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})