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.

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>

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.

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>

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:

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>

Blok katuhu jeung .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>

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

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>

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

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>

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 .

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>

Pél

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

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>

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.

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>

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

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>

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.

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>

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

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>

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.

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>

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 pola tab Guide Praktek Ngarang 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

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>

Pél kalawan dropdowns

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

Variabel

Ditambahkeun dina v5.2.0

Salaku bagian tina pendekatan variabel CSS Bootstrap anu ngembang, navs ayeuna nganggo variabel CSS lokal dina .nav, .nav-tabs, sareng .nav-pillspikeun kustomisasi sacara real-time anu ditingkatkeun. Nilai pikeun variabel CSS diatur via Sass, jadi kustomisasi Sass masih dirojong, teuing.

Dina .navkelas dasar:

  --#{$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};

Dina .nav-tabskelas 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};

Dina .nav-pillskelas 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};

variabel Sass

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

kabiasaan JavaScript

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

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.

Ieu sababaraha eusi placeholder eusi pakait tab Profil urang . 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 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>

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.

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>

Plugin tab ogé tiasa dianggo sareng pil.

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>

Sareng sareng pil nangtung. Ideally, pikeun tab nangtung, Anjeun ogé kudu ditambahkeun aria-orientation="vertical"kana wadahna daptar 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>

Aksesibilitas

Antarmuka tab dinamis, sakumaha anu dijelaskeun dina pola tab Panduan Praktek Pangarang ARIA , merlukeun role="tablist", role="tab", role="tabpanel", jeung aria-atribut tambahan pikeun nepikeun strukturna, pungsionalitasna, jeung kaayaan ayeuna ka pamaké téknologi asisten (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.

Luyu sareng pola Praktek Ngarang ARIA, ngan tab anu ayeuna aktip anu nampi fokus keyboard. Nalika plugin JavaScript diinisialisasi, éta bakal disetél tabindex="-1"dina sadaya kadali tab anu teu aktip. Sakali tab ayeuna aktip geus fokus, kenop kursor ngaktipkeun tab saméméhna / salajengna, kalawan plugin nu ngarobah rovingtabindex sasuai. Nanging, perhatikeun yén plugin JavaScript henteu ngabédakeun daptar tab horisontal sareng vertikal dina interaksi konci kursor: henteu paduli orientasi daptar tab, kursor ka luhur sareng kénca angkat ka tab sateuacana, sareng kursor ka handap sareng katuhu angkat ka tab salajengna.

Sacara umum, pikeun ngagampangkeun navigasi keyboard, disarankeun pikeun ngajantenkeun panel tab sorangan ogé tiasa difokuskeun, kecuali unsur munggaran anu ngandung eusi anu bermakna di jero panel tab parantos tiasa difokuskeun. Plugin JavaScript henteu nyobian nanganan aspék ieu - upami cocog, anjeun kedah sacara eksplisit ngajantenkeun panel tab anjeun tiasa fokus ku nambihan tabindex="0"markup anjeun.

Tab JavaScript plugin teu ngarojong interfaces tabbed nu ngandung menu dropdown, sabab ieu ngabalukarkeun duanana isu usability jeung diakses. 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.

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

Ngaliwatan JavaScript

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

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

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

Anjeun tiasa ngaktipkeun tab individu ku sababaraha cara:

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

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

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 .

Aktipkeun eusi anjeun salaku unsur tab.

Anjeun tiasa nyiptakeun conto tab sareng konstruktor, contona:

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

Métode	Katerangan
`dispose`	Ngancurkeun tab unsur.
`getInstance`	Metodeu statik anu ngamungkinkeun anjeun kéngingkeun conto tab anu aya hubunganana sareng unsur DOM, anjeun tiasa nganggo sapertos kieu: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Métode statik anu ngabalikeun conto tab anu aya hubunganana sareng unsur DOM atanapi ngadamel anu énggal upami henteu diinisialisasi. Anjeun tiasa nganggo sapertos kieu: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	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.tab`acara lumangsung).

Kajadian

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

hide.bs.tab(dina tab aktip ayeuna)
show.bs.tab(dina tab anu bakal dipidangkeun)
hidden.bs.tab(dina tab aktip saméméhna, sarua jeung pikeun hide.bs.tabacara)
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
`hide.bs.tab`	Kajadian ieu hurung nalika tab anyar bakal ditingalikeun (sahingga tab aktip saméméhna bakal disumputkeun). Anggo `event.target`sareng `event.relatedTarget`nargé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.target`sareng `event.relatedTarget`nargétkeun tab aktip sateuacana sareng tab aktip énggal, masing-masing.
`show.bs.tab`	Kajadian ieu hurung dina acara tab, tapi sateuacan tab anyar ditingalikeun. Anggo `event.target`sareng `event.relatedTarget`nargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi).
`shown.bs.tab`	Kajadian ieu hurung dina acara tab saatos tab dipintonkeun. Anggo `event.target`sareng `event.relatedTarget`nargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi).

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