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.

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

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

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

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

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

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

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

<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

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

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

Pil

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

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.

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

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

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

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

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

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

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

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.

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

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 Praktek Penulisan WAI ARIA . 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

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

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

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.

Antarmuka tab dinamis, kaya sing diterangake ing Praktek Penulisan WAI ARIA , mbutuhake role="tablist", role="tab", role="tabpanel", lan atribut tambahan aria-kanggo ngirim struktur, fungsi lan kahanan saiki marang pangguna teknologi pitulung (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.

Elinga yen antarmuka tab dinamis ngirim ora 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.

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.

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>

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.

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

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

Lan karo pil vertikal.

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>

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

Liwat JavaScript

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

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

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

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

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 .

constructor

Ngaktifake unsur tab lan wadhah konten. Tab kudu duwe data-bs-targetutawa, yen nggunakake pranala, hrefatribut, ngarahake simpul wadhah ing 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>

nuduhake

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

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

  tab.show()

mbuwang

Numpes tab unsur.

getInstance

Cara statis sing ngidini sampeyan entuk conto tab sing digandhengake karo unsur DOM

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

getOrCreateInstance

Cara statis sing ngidini sampeyan entuk conto tab sing digandhengake karo unsur DOM, utawa nggawe sing anyar yen ora diwiwiti.

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

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

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