Luncat ka eusi utama Luncat ka navigasi docs
in English

Navs jeung tab

Dokuméntasi sareng conto kumaha cara ngagunakeun komponén navigasi anu kalebet Bootstrap.

Dina kaca ieu

Dasar nav

Napigasi sadia dina Bootstrap babagi markup umum jeung gaya, ti .navkelas dasar ka nagara aktip tur ditumpurkeun. Swap kelas modifier pikeun pindah antara unggal gaya.

Komponén dasarna .navdiwangun ku flexbox sareng nyayogikeun pondasi anu kuat pikeun ngawangun sadaya jinis komponén navigasi. Ieu ngawengku sababaraha overrides gaya (pikeun gawé bareng béréndélan), sababaraha padding link pikeun wewengkon hit nu leuwih gede, sarta styling ditumpurkeun dasar.

Komponén dasar .navhenteu kalebet kaayaan naon waé .active. Conto di handap ieu kalebet kelas, utamina pikeun nunjukkeun yén kelas khusus ieu henteu micu gaya khusus.

Pikeun nepikeun kaayaan aktip ka téknologi assistive, make aria-currentatribut — ngagunakeun pagenilai pikeun kaca ayeuna, atawa truepikeun item ayeuna dina susunan.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Kelas dianggo sapanjang, janten markup anjeun tiasa super fleksibel. Paké <ul>s kawas di luhur, <ol>lamun urutan item anjeun penting, atawa gulung sorangan kalawan <nav>unsur. Kusabab .navkagunaan display: flex, Tumbu nav kalakuanana sarua jeung item nav ngalakukeunana, tapi tanpa markup tambahan.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

gaya sadia

Ngarobah gaya .navkomponén s kalawan modifiers na Utiliti. Campur jeung cocog sakumaha diperlukeun, atawa ngawangun sorangan.

alignment horizontal

Ngarobah alignment horizontal nav anjeun kalawan flexbox utiliti . Sacara standar, navs téh kénca-Blok, tapi anjeun bisa kalayan gampang ngarobahna kana puseur atawa katuhu Blok.

Dipuseurkeun ku .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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Blok katuhu jeung .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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Nangtung

Tumpukan navigasi anjeun ku cara ngarobah arah item fleksibel sareng .flex-columnutilitas. Kudu tumpukan aranjeunna dina sababaraha viewports tapi teu batur? Paké versi responsif (misalna, .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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Sakumaha biasa, navigasi nangtung mungkin tanpa <ul>s, teuing.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Tab

Nyokot nav dasar ti luhur tur nambahkeun .nav-tabskelas pikeun ngahasilkeun panganteur tabbed. Anggo aranjeunna pikeun nyiptakeun daérah tabable sareng plugin JavaScript tab kami .

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Pél

Candak HTML anu sami, tapi nganggo .nav-pills:

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Eusian jeung menerkeun

Maksakeun .naveusi Anjeun pikeun manjangkeun lebar sadia pinuh salah sahiji dua kelas modifier. Pikeun saimbang ngeusian sakabeh spasi sadia kalawan .nav-items anjeun, make .nav-fill. Perhatikeun yén sakabéh spasi horizontal nempatan, tapi teu unggal item nav boga lebar sarua.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Lamun ngagunakeun <nav>navigasi -based, anjeun aman bisa ngaleungitkeun .nav-itemsakumaha ngan .nav-linkdiperlukeun pikeun <a>elemen styling.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Pikeun elemen sarua-lebar, make .nav-justified. Kabéh spasi horizontal bakal dikawasaan ku Tumbu nav, tapi teu saperti di .nav-fillluhur, unggal item nav bakal lebar sarua.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Sarupa jeung .nav-fillconto ngagunakeun <nav>navigasi -based.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Gawe sareng Utiliti flex

Lamun perlu variasi nav responsif, mertimbangkeun ngagunakeun runtuyan flexbox Utiliti . Sanaos langkung verbose, utilitas ieu nawiskeun kustomisasi anu langkung ageung dina titik putus responsif. Dina conto di handap, nav kami bakal tumpuk dina breakpoint panghandapna, lajeng adaptasi jeung perenah horizontal nu ngeusi lebar sadia mimitian ti breakpoint leutik.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Ngeunaan diakses

Upami Anjeun keur make navs nyadiakeun bar navigasi, pastikeun pikeun nambahkeun a role="navigation"kana wadahna indungna paling logis tina <ul>, atawa mungkus <nav>unsur sabudeureun sakabéh navigasi. Entong nambihan peran ka <ul>dirina, sabab ieu bakal nyegah diumumkeun salaku daptar aktual ku téknologi anu ngabantosan.

Catet yén bar navigasi, sanajan sacara visual ditataan salaku tab jeung .nav-tabskelas, teu kudu dibikeun role="tablist", role="tab"atawa role="tabpanel"atribut. Ieu ngan cocog pikeun panganteur tab dinamis, sakumaha dijelaskeun dina Praktek Pangarang WAI ARIA . Tingali paripolah JavaScript pikeun panganteur tab dinamis dina bagian ieu pikeun conto. Atribut aria-currenthenteu diperlukeun dina panganteur tab dinamis saprak urang JavaScript handles kaayaan dipilih ku nambahkeun aria-selected="true"dina tab aktip.

Ngagunakeun dropdowns

Tambihkeun ménu lungsur sareng HTML tambahan sakedik sareng plugin JavaScript dropdowns .

Tab kalawan dropdowns

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Pél kalawan dropdowns

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Sass

Variabel

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

kabiasaan JavaScript

Anggo plugin tab JavaScript-kalebetkeun éta nyalira atanapi ngalangkungan bootstrap.jsfile anu disusun-pikeun manjangkeun tab sareng pil navigasi kami pikeun nyiptakeun panel tabable tina eusi lokal.

Antarmuka tab dinamis, sakumaha anu dijelaskeun dina Praktek Ngarang WAI ARIA , ngabutuhkeun role="tablist", role="tab", role="tabpanel", sareng aria-atribut tambahan pikeun nepikeun strukturna, fungsionalitas sareng kaayaan ayeuna ka pangguna téknologi anu ngabantosan (sapertos pamiarsa layar). Salaku prakték pangsaéna, kami nyarankeun ngagunakeun <button>elemen pikeun tab, sabab ieu mangrupikeun kadali anu nyababkeun parobahan dinamis, tinimbang tautan anu napigasi ka halaman atanapi lokasi énggal.

Catet yén panganteur tab dinamis teu kedah ngandung ménu lungsur, sabab ieu nyababkeun masalah usability sareng aksésibilitas. Tina sudut pandang usability, kanyataan yén unsur pemicu tab anu ayeuna ditampilkeun henteu langsung katingali (sabab aya di jero menu dropdown anu ditutup) tiasa nyababkeun kabingungan. Tina sudut pandang aksésibilitas, ayeuna teu aya cara anu wijaksana pikeun memetakan konstruksi sapertos kieu kana pola WAI ARIA standar, hartosna éta henteu tiasa gampang kaharti ku pangguna téknologi anu ngabantosan.

Ieu sababaraha eusi placeholder eusi pakait tab Home. Ngaklik tab anu sanés bakal ngagentos visibilitas ieu pikeun anu salajengna. Tab JavaScript swap kelas pikeun ngadalikeun pisibilitas eusi na styling. Anjeun tiasa nganggo éta sareng tab, pil, sareng .navnavigasi anu sanés -powered.

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>

Pikeun mantuan nyocogkeun ka kabutuhan Anjeun, ieu jalan kalawan <ul>-based markup, sakumaha ditémbongkeun di luhur, atawa kalayan sagala wenang "gulungkeun sorangan" markup. Catet yén upami anjeun nganggo <nav>, anjeun henteu kedah nambihan role="tablist"langsung kana éta, sabab ieu bakal ngaleungitkeun peran asli unsur éta salaku landmark navigasi. Gantina, pindah ka unsur alternatif (dina conto di handap, a basajan <div>) jeung bungkus <nav>sabudeureun eta.

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

Plugin tab ogé tiasa dianggo sareng pil.

Ieu sababaraha eusi placeholder eusi pakait tab Home. Ngaklik tab anu sanés bakal ngagentos visibilitas ieu pikeun anu salajengna. Tab JavaScript swap kelas pikeun ngadalikeun pisibilitas eusi na styling. Anjeun tiasa nganggo éta sareng tab, pil, sareng .navnavigasi anu sanés -powered.

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

Sareng sareng pil nangtung.

Ieu sababaraha eusi placeholder eusi pakait tab Home. Ngaklik tab anu sanés bakal ngagentos visibilitas ieu pikeun anu salajengna. Tab JavaScript swap kelas pikeun ngadalikeun pisibilitas eusi na styling. Anjeun tiasa nganggo éta sareng tab, pil, sareng .navnavigasi anu sanés -powered.

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

Ngagunakeun atribut data

Anjeun tiasa ngaktipkeun navigasi tab atanapi pil tanpa nyerat JavaScript ku ngan saukur nangtukeun data-bs-toggle="tab"atanapi data-bs-toggle="pill"dina unsur. Paké atribut data ieu dina .nav-tabsatawa .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>

Ngaliwatan JavaScript

Aktipkeun tab tabable via JavaScript (unggal tab kudu diaktipkeun individual):

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

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

Anjeun tiasa ngaktipkeun tab individu ku sababaraha cara:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

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

Pangaruh luntur

Pikeun nyieun tab luntur, tambahkeun .fadeka unggal .tab-pane. Panel tab munggaran ogé kedah .showngajantenkeun eusi awal katingali.

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

Métode

Métode Asynchronous sareng transisi

Sadaya metode API henteu sinkron sareng ngamimitian transisi . Aranjeunna balik deui ka panelepon pas transisi dimimitian tapi saméméh éta ends . Sajaba ti éta, panggero métode dina komponén transisi bakal dipaliré .

Tempo dokuméntasi JavaScript kami pikeun inpo nu leuwih lengkep .

constructor

Aktipkeun unsur tab sareng wadah eusi. Tab kedah gaduh boh data-bs-targetatanapi, upami nganggo tautan, hrefatribut, nargétkeun titik wadahna dina 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 a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

nempokeun

Milih tab anu dipasihkeun sareng nunjukkeun jandela anu aya hubunganana. Tab sanésna anu saacanna dipilih janten teu dipilih sareng jandela anu aya hubunganana disumputkeun. Mulih ka panelepon saméméh panel tab sabenerna geus ditémbongkeun (ie saméméh shown.bs.tabacara lumangsung).

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

  tab.show()

miceun

Ngancurkeun tab unsur.

getInstance

Metodeu statik anu ngamungkinkeun anjeun kéngingkeun conto tab anu aya hubunganana sareng unsur DOM

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

getOrCreateInstance

Métode statik anu ngamungkinkeun anjeun kéngingkeun conto tab anu aya hubunganana sareng unsur DOM, atanapi ngadamel anu énggal upami henteu diinisialisasi.

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

Kajadian

Nalika ningalikeun tab anyar, kajadian-kajadian hurung dina urutan ieu:

  1. hide.bs.tab(dina tab aktip ayeuna)
  2. show.bs.tab(dina tab anu bakal dipidangkeun)
  3. hidden.bs.tab(dina tab aktip saméméhna, sarua jeung pikeun hide.bs.tabacara)
  4. shown.bs.tab(dina tab anu nembé ditingalikeun, sami sareng show.bs.tabacara)

Upami teu aya tab anu parantos aktip, maka acara hide.bs.tabsareng hidden.bs.tabmoal dipecat.

Jenis acara Katerangan
show.bs.tab Kajadian ieu hurung dina acara tab, tapi sateuacan tab anyar ditingalikeun. Anggo event.targetsareng event.relatedTargetnargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi).
shown.bs.tab Kajadian ieu hurung dina acara tab saatos tab dipintonkeun. Anggo event.targetsareng event.relatedTargetnargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi).
hide.bs.tab Kajadian ieu hurung nalika tab anyar bakal ditingalikeun (sahingga tab aktip saméméhna bakal disumputkeun). Anggo event.targetsareng event.relatedTargetnargétkeun tab aktip anu ayeuna sareng tab anu énggal-énggal aktip, masing-masing.
hidden.bs.tab Kajadian ieu hurung saatos tab énggal ditampilkeun (sahingga tab aktip sateuacana disumputkeun). Anggo event.targetsareng event.relatedTargetnargétkeun tab aktip sateuacana sareng tab aktip énggal, masing-masing. 
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
})