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 listahan), 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 aktibong kahimtang ngadto sa mga teknolohiyang makatabang, gamita ang aria-currenthiyas — gamit ang pagebili alang sa kasamtangan nga panid, o truealang sa kasamtangang butang sa usa ka set.

html

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

html

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

html

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

html

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

html

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

html

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

html

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

html

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

html

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

html

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

html

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

html

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

html

<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. 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. Ang aria-currenthiyas dili kinahanglan sa dinamikong tabbed nga mga interface tungod kay ang among JavaScript nagdumala sa pinili nga estado pinaagi sa pagdugang aria-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

html

<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

html

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

CSS

Mga variable

Gidugang sa v5.2.0

Isip kabahin sa nag-uswag nga CSS variables approach sa Bootstrap, ang navs karon naggamit sa lokal nga CSS variables sa .nav, .nav-tabs, ug .nav-pillspara sa gipalambo nga real-time nga customization. Ang mga kantidad alang sa mga variable sa CSS gitakda pinaagi sa Sass, busa ang pag-customize sa Sass gisuportahan usab.

Sa .navbase nga klase:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

Sa .nav-tabsklase sa modifier:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

Sa .nav-pillsklase sa modifier:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Sass variables

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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 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.

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.

Kini mao ang pipila ka placeholder sulod sa Profile 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 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.

This is some placeholder content the Disabled tab's associated content.

<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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

Aron makatabang sa pagpahaom sa imong mga panginahanglan, kini magamit sa <ul>-based nga markup, sama sa gipakita sa ibabaw, o sa bisan unsang 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.

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 Disabled tab's associated content.

<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>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

Ang tab nga plugin nagtrabaho usab sa mga pildoras.

This is some placeholder content the Disabled tab's associated content.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

Ug sa mga bertikal nga pildoras. Sa tinuud, alang sa mga bertikal nga tab, kinahanglan nimo nga idugang ang sulud aria-orientation="vertical"sa lista sa tab.

This is some placeholder content the Disabled tab's associated content.

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-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Accessibility

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 mga assistive nga 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.

Subay sa pattern sa ARIA Authoring Practices, ang kasamtangang aktibo nga tab lang ang makadawat sa focus sa keyboard. Sa diha nga ang JavaScript plugin gisugdan, kini ibutang tabindex="-1"sa tanan nga dili aktibo nga mga kontrol sa tab. Sa higayon nga ang kasamtangan nga aktibo nga tab adunay focus, ang mga yawe sa cursor mag-aktibo sa miaging / sunod nga tab, uban sa plugin nga mag-usab sa rovingtabindex sumala niana. Bisan pa, timan-i nga ang plugin sa JavaScript wala mag-ila tali sa pinahigda ug bertikal nga mga lista sa tab kung bahin sa mga hinungdan nga interaksyon sa cursor: bisan unsa pa ang oryentasyon sa lista sa tab, ang pataas ug wala nga cursor moadto sa miaging tab, ug ang paubos ug tuo nga cursor moadto sa sunod nga tab.

Sa kinatibuk-an, aron mapadali ang pag-navigate sa keyboard, girekomenda nga himuon usab ang mga panel sa tab nga mapokus usab, gawas kung ang una nga elemento nga adunay makahuluganon nga sulud sa sulod sa tab panel mahimo nang mapunting. Ang plugin sa JavaScript dili mosulay sa pagdumala niini nga aspeto-kon angay, kinahanglan nimo nga klaro nga himoon ang imong mga tab panel nga mapokus pinaagi sa pagdugang tabindex="0"sa imong markup.

Ang tab nga JavaScript plugin wala nagsuporta sa mga tabbed 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.

Paggamit sa mga hiyas sa datos

Mahimo nimong i-aktibo ang usa ka tab o pildoras nga nabigasyon nga wala’y pagsulat sa 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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Pinaagi sa JavaScript

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

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

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

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

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Pagkawala 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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</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 .

Gi-aktibo ang imong sulud ingon usa ka elemento sa tab.

Makahimo ka og usa ka pananglitan sa tab uban sa constructor, pananglitan:

const bsTab = new bootstrap.Tab('#myTab')

Pamaagi	Deskripsyon
`dispose`	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, mahimo nimo kining gamiton sama niini: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Static nga pamaagi nga nagbalik sa usa ka tab nga pananglitan nga nalambigit sa usa ka elemento sa DOM o paghimo og bag-o kung wala kini gisugdan. Mahimo nimo kini gamiton sama niini: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	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.tab`mahitabo ang panghitabo).

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

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