Nav

Dokumentasyon ug mga pananglitan kon unsaon paggamit ang mga bahin sa nabigasyon sa Bootstrap.

Base nav

Ang nabigasyon nga anaa sa Bootstrap nagbahin sa kinatibuk-ang marka ug mga estilo, gikan sa base .navnga klase ngadto sa aktibo ug baldado nga mga estado. Ibaylo ang mga klase sa modifier aron mabalhin sa matag istilo.

Ang base .navnga sangkap gitukod gamit ang flexbox ug naghatag usa ka lig-on nga pundasyon alang sa pagtukod sa tanan nga mga lahi sa mga sangkap sa nabigasyon. Naglakip kini sa pipila ka mga override sa estilo (alang sa pagtrabaho uban sa mga lista), pipila ka link padding alang sa mas dagkong mga lugar nga naigo, ug batakang disabled nga estilo.

Ang sukaranan .navnga sangkap wala maglakip sa bisan unsang .activeestado. Ang mosunod nga mga pananglitan naglakip sa klase, nag-una aron ipakita nga kining partikular nga klase wala magpahinabog bisan unsang espesyal nga estilo.

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

Ang mga klase gigamit sa tibuuk, aron ang imong markup mahimong labi ka dali. Gamita <ul>ang s sama sa ibabaw, <ol>kung ang han-ay sa imong mga butang importante, o i-roll ang imong kaugalingon gamit ang usa ka <nav>elemento. Tungod kay ang mga .navgamit display: flex, ang nav links molihok sama sa nav item, apan walay dugang nga marka.

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

Anaa nga mga estilo

Usba ang estilo sa .navs component nga adunay mga modifier ug mga utilities. Pagsagol ug pagpares kung gikinahanglan, o paghimo og imong kaugalingon.

Horizontal nga pag-align

Usba ang horizontal alignment sa imong nav gamit ang flexbox utilities . Sa kasagaran, ang mga nav kay left-aligned, pero dali ra nimo kining usbon sa center o right aligned.

Nakasentro sa .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>

Nahiangay sa tuo sa .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>

Bertikal

I-stack ang imong nabigasyon pinaagi sa pagbag-o sa direksyon sa flex item gamit ang .flex-columnutility. Kinahanglan nga i-stack kini sa pipila ka mga viewports apan dili sa uban? Gamita ang responsive nga mga bersyon (pananglitan, .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>

Sama sa kanunay, ang bertikal nabigasyon posible nga walay <ul>s, usab.

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

Mga tab

Gikuha ang batakang nav gikan sa ibabaw ug gidugang ang .nav-tabsklase aron makamugna og tabbed interface. Gamita kini sa paghimo og tabbable nga mga rehiyon gamit ang among tab nga JavaScript plugin .

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

Pills

Kuhaa kanang parehas nga HTML, apan gamita .nav-pillshinuon:

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

Pun-a ug tarong

Pugsa ang imong .navsulod sa pagpalapad sa bug-os nga magamit nga gilapdon usa sa duha ka klase sa modifier. Aron mapun-an ang tanang magamit nga luna sa imong .nav-items, gamita ang .nav-fill. Matikdi nga ang tanan nga pinahigda nga luna giokupahan, apan dili ang matag nav item adunay parehas nga gilapdon.

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

Kung mogamit usa ka <nav>nabigasyon nga nakabase, mahimo nimong luwas nga laktawan .nav-itemingon .nav-linknga gikinahanglan lamang alang sa mga <a>elemento sa pag-istilo.

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

Alang sa managsama nga gilapdon nga mga elemento, gamita ang .nav-justified. Ang tanan nga pinahigda nga luna maokupar sa mga link sa nav, apan dili sama sa .nav-fillibabaw, ang matag butang sa nav parehas ang gilapdon.

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

Susama sa .nav-fillpananglitan gamit ang usa ka <nav>-based navigation.

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

Pagtrabaho uban sa flex utilities

Kung kinahanglan nimo ang responsive nav variation, ikonsiderar ang paggamit sa sunod-sunod nga flexbox utilities . Samtang mas daghang pulong, kini nga mga utility nagtanyag labi ka labi nga pag-customize sa mga responsive breakpoints. Sa pananglitan sa ubos, ang among nav i-stack sa pinakaubos nga breakpoint, unya ipahiangay sa pinahigda nga layout nga mopuno sa magamit nga gilapdon sugod sa gamay nga breakpoint.

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

Mahitungod sa accessibility

Kung naggamit ka ug navs para maghatag ug navigation bar, siguruha nga magdugang ug usa role="navigation"sa labing lohikal nga sudlanan sa ginikanan sa <ul>, o ibutang ang usa ka <nav>elemento sa tibuok nabigasyon. Ayaw idugang ang papel sa <ul>iyang kaugalingon, tungod kay kini makapugong niini nga ipahibalo ingon usa ka aktwal nga lista sa mga teknolohiya nga makatabang.

Timan-i nga ang mga navigation bar, bisan kung biswal nga gi-istilo ingon mga tab nga adunay .nav-tabsklase, dili kinahanglan hatagan role="tablist", role="tab"o role="tabpanel"mga hiyas. Angayan lang kini alang sa dinamikong tabbed nga mga interface, sama sa gihulagway sa ARIA Authoring Practices Guide tabs pattern . Tan-awa ang pamatasan sa JavaScript alang sa mga dinamikong tabbed nga mga interface sa kini nga seksyon alang sa usa ka pananglitan.

Paggamit sa mga dropdown

Idugang ang mga dropdown menu nga adunay gamay nga ekstra nga HTML ug ang dropdown JavaScript plugin .

Mga tab nga adunay mga dropdown

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

Mga pildoras nga adunay mga dropdown

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

Panggawi sa JavaScript

Gamita ang tab nga JavaScript nga plugin—ilakip kini sa tagsa-tagsa o pinaagi sa gihugpong bootstrap.jsnga file—aron i-extend ang among navigational tabs ug pills aron makahimo og tabable pane sa lokal nga content.

Kung nagtukod ka sa among JavaScript gikan sa gigikanan, kinahanglan kiniutil.js .

Dynamic tabbed interfaces, sama sa gihulagway sa ARIA Authoring Practices Guide tabs pattern , nanginahanglan role="tablist", role="tab", role="tabpanel", ug dugang aria-nga mga hiyas aron ipaabot ang ilang gambalay, gamit ug kasamtangan nga kahimtang ngadto sa mga tiggamit sa assistive nga mga teknolohiya (sama sa screen readers). Isip usa ka labing maayo nga praktis, among girekomendar ang paggamit sa <button>mga elemento alang sa mga tab, tungod kay kini ang mga kontrol nga nagpalihok sa usa ka dinamikong pagbag-o, kay sa mga link nga nag-navigate sa usa ka bag-ong panid o lokasyon.

Timan-i nga ang tab nga JavaScript plugin wala nagsuporta sa tabbed nga mga interface nga adunay mga dropdown menu, tungod kay kini ang hinungdan sa mga isyu sa usability ug accessibility. Gikan sa usa ka usability perspective, ang kamatuoran nga ang gipakita karon nga elemento sa trigger sa tab dili dayon makita (tungod kay naa sa sulod sa closed dropdown menu) mahimong hinungdan sa kalibog. Gikan sa usa ka accessibility nga punto sa panglantaw, sa pagkakaron walay makatarunganon nga paagi sa pagmapa niini nga matang sa pagtukod ngadto sa usa ka standard WAI ARIA pattern, nga nagpasabot nga kini dili sayon nga masabtan sa mga tiggamit sa assistive nga mga teknolohiya.

Ang sulod sa placeholder alang sa tab panel. Kini may kalabutan sa tab sa balay. Nagdala kanimo mga milya nga taas, taas kaayo, tungod kay aduna siyay usa ka internasyonal nga pahiyom. Adunay usa ka estranghero sa akong higdaanan, adunay usa ka pagbunal sa akong ulo. Oh, dili. Sa laing kinabuhi ipabilin ko ikaw. Kay ako, kaya nako ang bisan unsa. Nahiangay alang sa akong korona nga away. Kaniadto mangawat og ilimnon sa imong ginikanan ug mosaka sa atop. Ang tono, tan nga angay ug andam, ipataas kini hinungdan nga mabug-at kini. Ang iyang gugma sama sa usa ka droga. Nalimot ko nga naa koy choice.

Ang sulod sa placeholder alang sa tab panel. Kini may kalabutan sa tab sa profile. Nakuha nimo ang labing kaayo nga arkitektura. Mga selyo sa pasaporte, cosmopolitan siya. Maayo, presko, mabangis, nakuha namo kini sa lock. Wala gyud ko nagplano nga usa ka adlaw mawala ka nako. Gikaon niya ang imong kasingkasing. Ang imong halok kay kosmiko, matag lihok kay magic. I mean the ones, I mean murag siya ra. Pagpangumusta mga minahal magbiyahe ta. Tag-iya lang ang gabii sama sa ika-4 sa Hulyo! Pero mas gusto nimo nga masayang.

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>

Aron makatabang sa pagpahaom sa imong mga panginahanglan, kini magamit sa <ul>-based markup, sama sa gipakita sa ibabaw, o sa bisan unsa nga arbitraryong "pag-roll sa imong kaugalingon" nga markup. Timan-i nga kung imong gigamit ang <nav>, dili ka kinahanglan nga direktang magdugang role="tablist"niini, tungod kay kini mag-override sa lumad nga tahas sa elemento isip usa ka timaan sa nabigasyon. Hinunoa, balhin sa usa ka alternatibo nga elemento (sa panig-ingnan sa ubos, usa ka yano <div>) ug ibutang ang <nav>palibot niini.

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>

Ang tab nga plugin nagtrabaho usab sa mga pildoras.

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

Ug sa mga bertikal nga pildoras.

Ang sulod sa placeholder alang sa tab panel. Kini may kalabutan sa tab sa balay. Nakita ka sa downtown nga nagkanta sa Blues. Tan-awa ang imong lingin sa kanal. Nganong dili man ko nimo pahunongon? Bug-at ang ulo nga nagsul-ob sa korona. Oo, gipahilak namo ang mga manulonda, nga nagpaulan sa yuta gikan sa itaas. Gusto tan-awon ang salida sa 3D, usa ka salida. Nabati ba nimo, gibati nga nipis kaayo ang papel. Kini usa ka oo o dili, dili tingali.

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>

Paggamit sa mga hiyas sa datos

Mahimo nimong i-aktibo ang usa ka tab o pildoras nga nabigasyon nga wala magsulat bisan unsang JavaScript pinaagi lamang sa pagpiho data-toggle="tab"o data-toggle="pill"sa usa ka elemento. Gamita kini nga mga hiyas sa datos sa .nav-tabso .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>

Pinaagi sa JavaScript

I-enable ang mga tab nga tab pinaagi sa JavaScript (matag tab kinahanglan nga i-activate sa tagsa-tagsa):

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

Mahimo nimong ma-aktibo ang indibidwal nga mga tab sa daghang mga paagi:

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

Malawos nga epekto

Aron mawala ang mga tab, idugang .fadeang matag usa .tab-pane. Ang una nga tab pane kinahanglan usab .shownga maghimo sa una nga sulud nga makita.

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

Pamaagi

Asynchronous nga mga pamaagi ug transisyon

Ang tanan nga mga pamaagi sa API kay asynchronous ug magsugod ug transisyon . Mibalik sila sa nanawag sa diha nga nagsugod ang transisyon apan sa wala pa kini matapos . Dugang pa, ang usa ka paagi sa pagtawag sa usa ka transisyon nga sangkap dili tagdon .

Tan-awa ang among JavaScript nga dokumentasyon para sa dugang nga impormasyon .

$().tab

Nag-aktibo sa usa ka elemento sa tab ug sulud sa sulud. Ang tab kinahanglan adunay usa data-targeto, kung naggamit usa ka link, usa ka hrefhiyas nga nagpunting sa usa ka sudlanan nga node sa 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('ipakita')

Gipili ang gihatag nga tab ug gipakita ang kauban nga pane niini. Ang bisan unsang lain nga tab nga gipili kaniadto mahimong dili mapili ug ang kauban nga pane niini gitago. Mibalik sa nagtawag sa wala pa ipakita ang tab pane (ie sa wala pa shown.bs.tabmahitabo ang panghitabo).

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

.tab('dispose')

Giguba ang tab sa usa ka elemento.

Mga panghitabo

Kung nagpakita ug bag-ong tab, ang mga panghitabo mobuto sa mosunod nga han-ay:

hide.bs.tab(sa kasamtangan nga aktibo nga tab)
show.bs.tab(sa tab nga ipakita)
hidden.bs.tab(sa miaging aktibo nga tab, parehas sa alang sa hide.bs.tabpanghitabo)
shown.bs.tab(sa bag-ong-aktibo nga bag-o lang gipakita nga tab, parehas sa alang sa show.bs.tabpanghitabo)

Kung walay tab nga aktibo na, ang hide.bs.tabug ang hidden.bs.tabmga panghitabo dili ipabuto.

Uri sa Hitabo	Deskripsyon
show.bs.tab	Kini nga panghitabo nagdilaab sa tab show, apan sa wala pa ipakita ang bag-ong tab. Gamita `event.target`ug `event.relatedTarget`i-target ang aktibo nga tab ug ang miaging aktibo nga tab (kung naa) matag usa.
gipakita.bs.tab	Kini nga panghitabo nagdilaab sa tab show pagkahuman gipakita ang usa ka tab. Gamita `event.target`ug `event.relatedTarget`i-target ang aktibo nga tab ug ang miaging aktibo nga tab (kung naa) matag usa.
hide.bs.tab	Kini nga panghitabo mobuto kung ang usa ka bag-ong tab ipakita (ug sa ingon ang miaging aktibo nga tab kinahanglan itago). Gamita `event.target`ug `event.relatedTarget`i-target ang kasamtangan nga aktibo nga tab ug ang bag-o nga dili madugay nga mahimong aktibo nga tab, matag usa.
tago.bs.tab	Kini nga panghitabo nagdilaab human ang usa ka bag-ong tab gipakita (ug sa ingon ang miaging aktibo nga tab gitago). Gamita `event.target`ug `event.relatedTarget`i-target ang miaging aktibo nga tab ug ang bag-ong aktibo nga tab, matag usa.

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