Navs lan tab

Dokumentasi lan conto carane nggunakake komponen navigasi sing kalebu Bootstrap.

Ing kaca iki

Pangkalan nav

Navigasi kasedhiya ing Bootstrap nuduhake markup lan gaya umum, saka .navkelas dhasar menyang negara aktif lan dipatèni. Ganti kelas modifier kanggo ngalih ing antarane saben gaya.

Komponen dhasar .navdibangun nganggo flexbox lan nyedhiyakake dhasar sing kuat kanggo mbangun kabeh jinis komponen navigasi. Iku kalebu sawetara gaya overrides (kanggo nggarap dhaptar), sawetara link padding kanggo wilayah hit luwih gedhe, lan dhasar styling dipatèni.

Komponen dhasar .navora kalebu .activenegara apa wae. Conto ing ngisor iki kalebu kelas, utamané kanggo nduduhake yen kelas tartamtu iki ora micu sembarang noto khusus.

Kanggo ngirim status aktif menyang teknologi assistive, gunakake aria-currentatribut - nggunakake pagenilai kanggo kaca saiki, utawa truekanggo item saiki ing 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>

Kelas digunakake ing saindhenging, supaya markup sampeyan bisa super fleksibel. Gunakake <ul>s kaya ndhuwur, <ol>yen urutan item penting, utawa muter dhewe karo <nav>unsur. Amarga .navnggunakake display: flex, pranala nav tumindak padha karo item nav, nanging tanpa markup ekstra.

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 kasedhiya

Ngganti gaya .navkomponen s karo modifiers lan keperluan. Nyampur lan cocog yen perlu, utawa gawe dhewe.

Alignment horisontal

Ngganti keselarasan horisontal saka nav karo keperluan flexbox . Kanthi gawan, navs kiwa-selaras, nanging sampeyan bisa kanthi gampang ngganti menyang tengah utawa tengen didadekake siji.

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

Sejajar tengen karo .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>

Vertikal

Tumpukan pandhu arah kanthi ngganti arah item fleksibel karo .flex-columnsarana. Perlu tumpukan ing sawetara viewports nanging ora liyane? Gunakake versi responsif (contone, .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>

Minangka tansah, pandhu arah vertikal bisa tanpa <ul>s, banget.

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

Njupuk nav dhasar saka ndhuwur lan nambah .nav-tabskelas kanggo generate antarmuka tab. Gunakake kanggo nggawe wilayah tabable nganggo plugin JavaScript tab .

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>

Pil

Njupuk HTML sing padha, nanging gunakake .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>

Isi lan mbenerake

Meksa .navkonten sampeyan kanggo ngluwihi jembar sing kasedhiya ing salah siji saka rong kelas modifier. Kanggo ngisi kabeh spasi sing kasedhiya kanthi proporsional karo .nav-items sampeyan, gunakake .nav-fill. Kabar sing kabeh spasi horisontal dikuwasani, nanging ora saben item nav jembaré padha.

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>

Nalika nggunakake <nav>navigasi adhedhasar, sampeyan bisa ngilangi .nav-itemkanthi aman amarga mung .nav-linkdibutuhake kanggo unsur gaya <a>.

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>

Kanggo unsur sing padha karo jembaré, gunakake .nav-justified. Kabeh spasi horisontal bakal dikuwasani dening pranala nav, nanging ora kaya .nav-fillndhuwur, saben item nav bakal padha jembaré.

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>

Kaya .nav-fillconto nggunakake <nav>pandhu arah basis.

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>

Nggarap utilitas fleksibel

Yen sampeyan mbutuhake variasi nav responsif, nimbang nggunakake seri saka keperluan flexbox . Nalika luwih wicaksana, utilitas iki nawakake kustomisasi sing luwih gedhe ing breakpoints responsif. Ing conto ing ngisor iki, nav kita bakal dibandhingke ing breakpoint paling, banjur ngganti menyang tata horisontal sing ngiseni jembaré kasedhiya miwiti saka breakpoint cilik.

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>

Babagan aksesibilitas

Yen sampeyan nggunakake navs kanggo nyedhiyani garis pandhu arah, dadi manawa kanggo nambah role="navigation"menyang wadhah induk paling logis saka <ul>, utawa Lebokake <nav>unsur sak pandhu arah kabeh. Aja nambahake peran kasebut ing <ul>awake dhewe, amarga iki bakal nyegah supaya ora diumumake minangka dhaptar nyata dening teknologi bantu.

Elinga yen garis navigasi, sanajan ditata kanthi visual minangka tab karo .nav-tabskelas, ora kudu diwenehi role="tablist", role="tab"utawa role="tabpanel"atribut. Iki mung cocok kanggo antarmuka tab dinamis, kaya sing diterangake ing pola tab ARIA Authoring Practices Guide . Deleng prilaku JavaScript kanggo antarmuka tab dinamis ing bagean iki kanggo conto. Atribut aria-currentkasebut ora perlu ing antarmuka tab dinamis amarga JavaScript kita nangani negara sing dipilih kanthi nambahake aria-selected="true"ing tab aktif.

Nggunakake dropdowns

Tambah menu gulung mudhun kanthi HTML ekstra lan plugin JavaScript gulung mudhun .

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

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

Ditambahake ing v5.2.0

Minangka bagéan saka pendekatan variabel CSS Bootstrap sing berkembang, nav saiki nggunakake variabel CSS lokal ing .nav, .nav-tabs, lan .nav-pillskanggo kustomisasi wektu nyata sing ditingkatake. Nilai kanggo variabel CSS disetel liwat Sass, supaya kustomisasi Sass isih didhukung.

Ing .navkelas dhasar:

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

Ing .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};

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

Prilaku JavaScript

Gunakake plugin JavaScript tab-kalebu dhewe utawa liwat bootstrap.jsfile sing dikompilasi-kanggo ngluwihi tab navigasi lan pil kanggo nggawe panel tabable isi lokal.

Iki minangka sawetara isi placeholder sing ana gandhengane karo tab Ngarep . Ngeklik tab liyane bakal ngowahi visibilitas iki kanggo sabanjure. Tab JavaScript ngganti kelas kanggo ngontrol visibilitas lan gaya konten. Sampeyan bisa nggunakake karo tab, pil, lan .navpandhu arah liyane -powered.

Iki minangka sawetara isi placeholder sing ana gandhengane karo tab Profil . Ngeklik tab liyane bakal ngowahi visibilitas iki kanggo sabanjure. Tab JavaScript ngganti kelas kanggo ngontrol visibilitas lan gaya konten. Sampeyan bisa nggunakake karo tab, pil, lan .navpandhu arah liyane -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>

Kanggo nyukupi kabutuhan sampeyan, iki bisa digunakake karo <ul>markup adhedhasar, kaya sing dituduhake ing ndhuwur, utawa nganggo markup "muter dhewe" sing kasepakatan. Elinga yen sampeyan nggunakake <nav>, sampeyan ora kudu nambah role="tablist"langsung, amarga iki bakal ngganti peran asli unsur minangka landmark navigasi. Nanging, ngalih menyang unsur alternatif (ing conto ing ngisor iki, prasaja <div>) lan mbungkus <nav>watara.

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 uga bisa digunakake karo 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>

Lan karo pil vertikal. Saenipun, kanggo tab vertikal, sampeyan uga kudu nambah aria-orientation="vertical"menyang wadhah dhaptar 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, kaya sing diterangake ing pola tab Pandhuan Praktik Penulisan ARIA , mbutuhake role="tablist", role="tab", role="tabpanel", lan atribut tambahan aria-supaya bisa ngirim struktur, fungsi, lan kahanan saiki marang pangguna teknologi bantu (kayata pembaca layar). Minangka praktik paling apik, disaranake nggunakake <button>unsur kanggo tab, amarga iki minangka kontrol sing nyebabake owah-owahan dinamis, tinimbang pranala sing navigasi menyang kaca utawa lokasi anyar.

Selaras karo pola Praktek Penulisan ARIA, mung tab sing lagi aktif nampa fokus keyboard. Nalika plugin JavaScript diwiwiti, bakal disetel tabindex="-1"ing kabeh kontrol tab sing ora aktif. Sawise tab sing saiki aktif fokus, tombol kursor ngaktifake tab sadurunge/sabanjure, kanthi plugin ngganti roving kasebuttabindex . Nanging, elinga yen plugin JavaScript ora mbedakake antarane dhaptar tab horisontal lan vertikal nalika nerangake interaksi tombol kursor: preduli saka orientasi dhaptar tab, loro kursor munggah lan kiwa pindhah menyang tab sadurunge, lan kursor mudhun lan tengen pindhah menyang tab sabanjure.

Umumé, kanggo nggampangake pandhu arah keyboard, dianjurake supaya panel tab uga bisa fokus, kajaba unsur pisanan sing ngemot konten sing migunani ing panel tab wis bisa difokusake. Plugin JavaScript ora nyoba nangani aspek iki-yen cocog, sampeyan kudu kanthi jelas nggawe panel tab sampeyan bisa fokus kanthi nambahake tabindex="0"markup sampeyan.

Plugin JavaScript tab ora ndhukung antarmuka tab sing ngemot menu gulung mudhun, amarga iki nyebabake masalah kegunaan lan aksesibilitas. Saka perspektif kegunaan, kasunyatan manawa unsur pemicu tab sing saiki ditampilake ora langsung katon (amarga ana ing menu gulung mudhun sing ditutup) bisa nyebabake kebingungan. Saka sudut pandang aksesibilitas, saiki ora ana cara sing wicaksana kanggo nggawe peta konstruksi iki menyang pola WAI ARIA standar, tegese ora bisa dimangerteni kanthi gampang kanggo pangguna teknologi bantuan.

Nggunakake atribut data

Sampeyan bisa ngaktifake navigasi tab utawa pil tanpa nulis JavaScript kanthi mung nemtokake data-bs-toggle="tab"utawa data-bs-toggle="pill"ing unsur. Gunakake atribut data iki ing .nav-tabsutawa .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>

Liwat JavaScript

Aktifake tab sing bisa tab liwat JavaScript (saben tab kudu diaktifake kanthi individu):

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

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

Sampeyan bisa ngaktifake tab individu kanthi sawetara 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

Efek luntur

Kanggo nggawe tab ilang, tambahake .fademenyang saben .tab-pane. Panel tab pisanan uga kudu .shownggawe konten awal katon.

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

Metode

Cara lan transisi asinkron

Kabeh cara API ora sinkron lan miwiti transisi . Dheweke bali menyang panelpon sanalika transisi diwiwiti nanging sadurunge rampung . Kajaba iku, panggilan metode ing komponen transisi bakal diabaikan .

Deleng dokumentasi JavaScript kita kanggo informasi luwih lengkap .

Ngaktifake konten sampeyan minangka unsur tab.

Sampeyan bisa nggawe conto tab karo konstruktor, contone:

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

Metode	Katrangan
`dispose`	Numpes tab unsur.
`getInstance`	Cara statis sing ngidini sampeyan entuk conto tab sing digandhengake karo unsur DOM, sampeyan bisa nggunakake kaya iki: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Cara statis sing ngasilake conto tab sing digandhengake karo unsur DOM utawa nggawe sing anyar yen ora diwiwiti. Sampeyan bisa nggunakake kaya iki: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Milih tab sing diwenehake lan nuduhake panel sing gegandhengan. Tab liyane sing sadurunge dipilih dadi ora dipilih lan panel sing gegandhengan didhelikake. Bali menyang panelpon sadurunge panel tab bener-bener ditampilake (yaiku sadurunge `shown.bs.tab`kedadeyan kasebut).

Acara

Nalika nuduhake tab anyar, acara kasebut murub kanthi urutan ing ngisor iki:

hide.bs.tab(ing tab aktif saiki)
show.bs.tab(ing tab sing bakal ditampilake)
hidden.bs.tab(ing tab aktif sadurunge, padha karo hide.bs.tabacara kasebut)
shown.bs.tab(ing tab sing mentas aktif ditampilake, padha karo show.bs.tabacara kasebut)

Yen ora ana tab sing wis aktif, banjur acara hide.bs.tablan hidden.bs.tabora bakal dipecat.

Jenis acara	Katrangan
`hide.bs.tab`	Acara iki murub nalika tab anyar bakal ditampilake (lan kanthi mangkono tab aktif sadurunge bakal didhelikake). Gunakake `event.target`lan `event.relatedTarget`kanggo target tab aktif saiki lan tab anyar sing bakal aktif.
`hidden.bs.tab`	Acara iki murub sawise tab anyar ditampilake (lan kanthi mangkono tab aktif sadurunge didhelikake). Gunakake `event.target`lan `event.relatedTarget`kanggo target tab aktif sadurunge lan tab aktif anyar, mungguh.
`show.bs.tab`	Acara iki murub ing tab show, nanging sadurunge tab anyar wis ditampilake. Gunakake `event.target`lan `event.relatedTarget`kanggo target tab aktif lan tab aktif sadurunge (yen kasedhiya).
`shown.bs.tab`	Acara iki murub ing tab show sawise tab ditampilake. Gunakake `event.target`lan `event.relatedTarget`kanggo target tab aktif lan tab aktif sadurunge (yen kasedhiya).

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