Navs ug tabs

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

Niini nga panid

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.

Aron ipaabot ang aktibo nga kahimtang ngadto sa mga teknolohiya sa pagtabang, gamita ang aria-currenthiyas — gamit ang pagebili alang sa kasamtangan nga panid, o truealang sa kasamtangan nga butang sa usa ka set.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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 ug 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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. Kini angayan lamang alang sa dinamikong tabbed nga mga interface, sama sa gihulagway sa WAI ARIA Authoring Practices . Tan-awa ang pamatasan sa JavaScript alang sa mga dinamikong tabbed nga mga interface sa kini nga seksyon alang sa usa ka pananglitan. Ang aria-currenthiyas dili kinahanglan sa dinamikong tabbed nga mga interface tungod kay ang among JavaScript nagdumala sa pinili nga estado pinaagi sa pagdugangaria-selected="true" sa aktibo nga tab.

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

Sass

Mga variable

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

Panggawi sa JavaScript

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

Ang mga dinamikong tabbed nga mga interface, sama sa gihulagway sa WAI ARIA Authoring Practices , nanginahanglan role="tablist", role="tab", role="tabpanel", ug dugang aria-nga mga hiyas aron ipahayag ang ilang istruktura, gamit ug kasamtangan nga kahimtang sa mga tiggamit sa mga teknolohiya nga makatabang (sama sa mga tigbasa sa screen). 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 dinamikong tabbed nga mga interface kinahanglan dili maglangkob sa 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.

Kini mao ang pipila ka placeholder sulod sa Home tab nga nalangkit nga sulod. Ang pag-klik sa laing tab mag-toggle sa visibility niini alang sa sunod. Ang tab nga JavaScript nagbaylo sa mga klase aron makontrol ang makita sa sulud ug istilo. Mahimo nimo kini gamiton sa mga tab, pildoras, ug bisan unsang uban pa nga .navnabigasyon nga gipadagan.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

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

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

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

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-bs-toggle="tab"o data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

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

var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first 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 pamaagi sa pagtawag sa usa ka transisyon nga sangkap dili ibalewala .

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

constructor

Nag-aktibo sa usa ka elemento sa tab ug sulud sa sulud. Ang tab kinahanglan adunay usa data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>
  var firstTabEl = document.querySelector('#myTab li:last-child button')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

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 angshown.bs.tab mahitabo ang panghitabo).

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

ilabay

Giguba ang tab sa usa ka elemento.

getInstance

Static nga pamaagi nga nagtugot kanimo sa pagkuha sa tab nga pananglitan nga may kalabutan sa usa ka elemento sa DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Static nga pamaagi nga nagtugot kanimo sa pagkuha sa tab nga pananglitan nga may kalabutan sa usa ka elemento sa DOM, o paghimo og bag-o kung wala kini gisugdan.

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

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 panghitabo	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.
`shown.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.
`hidden.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.

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})