Navs dan tab
Dokumentasi dan contoh cara menggunakan komponen navigasi yang disertakan Bootstrap.
Nav
Navigasi tersedia dalam Bootstrap berkongsi markup dan gaya umum, daripada .nav
kelas asas kepada keadaan aktif dan dilumpuhkan. Tukar kelas pengubah suai untuk bertukar antara setiap gaya.
Komponen asas .nav
dibina dengan flexbox dan menyediakan asas yang kukuh untuk membina semua jenis komponen navigasi. Ia termasuk beberapa penggantian gaya (untuk bekerja dengan senarai), beberapa padding pautan untuk kawasan hit yang lebih besar dan penggayaan asas yang dilumpuhkan.
Komponen asas .nav
tidak termasuk mana-mana .active
keadaan. Contoh berikut termasuk kelas, terutamanya untuk menunjukkan bahawa kelas tertentu ini tidak mencetuskan sebarang penggayaan khas.
Untuk menyampaikan keadaan aktif kepada teknologi bantuan, gunakan aria-current
atribut — menggunakan page
nilai untuk halaman semasa atau true
untuk item semasa dalam 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 digunakan sepanjang masa, jadi markup anda boleh menjadi sangat fleksibel. Gunakan <ul>
s seperti di atas, <ol>
jika susunan item anda penting, atau gulung sendiri dengan <nav>
elemen. Kerana .nav
kegunaan display: flex
, pautan nav berkelakuan sama seperti item nav, tetapi tanpa penanda 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 yang tersedia
Tukar gaya .nav
komponen s dengan pengubah suai dan utiliti. Campurkan dan padankan mengikut keperluan, atau bina sendiri.
Penjajaran mendatar
Tukar penjajaran mendatar navigasi anda dengan utiliti flexbox . Secara lalai, nav dijajar ke kiri, tetapi anda boleh menukarnya dengan mudah ke dijajar tengah atau kanan.
Berpusat dengan .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>
Dijajarkan ke kanan dengan .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>
Menegak
Susun navigasi anda dengan menukar arah item flex dengan .flex-column
utiliti. Perlu menyusunnya pada beberapa port pandangan tetapi tidak pada yang lain? Gunakan versi responsif (cth, .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>
Seperti biasa, navigasi menegak boleh dilakukan tanpa <ul>
s juga.
<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
Mengambil nav asas dari atas dan menambah .nav-tabs
kelas untuk menjana antara muka tab. Gunakannya untuk mencipta kawasan boleh tab dengan pemalam 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>
Pil
Ambil HTML yang sama, tetapi gunakan .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 dan justifikasikan
Paksa .nav
kandungan anda untuk memanjangkan lebar penuh tersedia satu daripada dua kelas pengubah suai. Untuk mengisi semua ruang yang ada secara berkadar dengan .nav-item
s anda, gunakan .nav-fill
. Perhatikan bahawa semua ruang mendatar diduduki, tetapi tidak setiap item nav mempunyai lebar yang sama.
<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>
Apabila menggunakan <nav>
navigasi berasaskan, anda boleh meninggalkan dengan selamat .nav-item
kerana hanya .nav-link
diperlukan untuk <a>
elemen penggayaan.
<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>
Untuk elemen yang sama lebar, gunakan .nav-justified
. Semua ruang mendatar akan diduduki oleh pautan navigasi, tetapi tidak seperti di .nav-fill
atas, setiap item navigasi akan mempunyai lebar yang sama.
<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>
Sama seperti .nav-fill
contoh menggunakan <nav>
navigasi berasaskan.
<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>
Bekerja dengan utiliti fleksibel
Jika anda memerlukan variasi navigasi responsif, pertimbangkan untuk menggunakan satu siri utiliti flexbox . Walaupun lebih bertele-tele, utiliti ini menawarkan penyesuaian yang lebih besar merentas titik putus responsif. Dalam contoh di bawah, nav kami akan disusun pada titik putus terendah, kemudian menyesuaikan diri dengan susun atur mendatar yang mengisi lebar yang tersedia bermula dari titik putus kecil.
<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>
Berkenaan kebolehcapaian
Jika anda menggunakan navs untuk menyediakan bar navigasi, pastikan anda menambahkan a role="navigation"
pada bekas induk yang paling logik bagi <ul>
, atau balut <nav>
elemen di sekeliling keseluruhan navigasi. Jangan tambah peranan pada <ul>
dirinya sendiri, kerana ini akan menghalangnya daripada diumumkan sebagai senarai sebenar oleh teknologi bantuan.
Ambil perhatian bahawa bar navigasi, walaupun digayakan secara visual sebagai tab dengan .nav-tabs
kelas, tidak boleh diberikan role="tablist"
, role="tab"
atau role="tabpanel"
atribut. Ini hanya sesuai untuk antara muka tab dinamik, seperti yang diterangkan dalam Amalan Pengarangan WAI ARIA . Lihat tingkah laku JavaScript untuk antara muka tab dinamik dalam bahagian ini sebagai contoh. Atribut aria-current
tidak diperlukan pada antara muka tab dinamik kerana JavaScript kami mengendalikan keadaan yang dipilih dengan menambah aria-selected="true"
pada tab aktif.
Menggunakan dropdown
Tambahkan menu lungsur turun dengan sedikit HTML tambahan dan pemalam JavaScript lungsur turun .
Tab dengan lungsur turun
<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 dengan dropdown
<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
Pembolehubah
$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;
Tingkah laku JavaScript
Gunakan pemalam JavaScript tab—masukkannya secara individu atau melalui bootstrap.js
fail yang disusun—untuk memanjangkan tab dan pil navigasi kami untuk mencipta anak tetingkap boleh tab bagi kandungan tempatan.
Antara muka tab dinamik, seperti yang diterangkan dalam Amalan Pengarangan WAI ARIA , memerlukan role="tablist"
, role="tab"
, role="tabpanel"
, dan aria-
atribut tambahan untuk menyampaikan struktur, fungsi dan keadaan semasanya kepada pengguna teknologi bantuan (seperti pembaca skrin). Sebagai amalan terbaik, kami mengesyorkan menggunakan <button>
elemen untuk tab, kerana ini adalah kawalan yang mencetuskan perubahan dinamik, dan bukannya pautan yang menavigasi ke halaman atau lokasi baharu.
Ambil perhatian bahawa antara muka tab dinamik tidak seharusnya mengandungi menu lungsur, kerana ini menyebabkan masalah kebolehgunaan dan kebolehaksesan. Dari perspektif kebolehgunaan, fakta bahawa elemen pencetus tab yang dipaparkan pada masa ini tidak kelihatan serta-merta (kerana ia berada di dalam menu lungsur turun tertutup) boleh menyebabkan kekeliruan. Dari sudut kebolehaksesan, pada masa ini tiada cara yang munasabah untuk memetakan konstruk jenis ini kepada corak WAI ARIA standard, bermakna ia tidak boleh difahami dengan mudah oleh pengguna teknologi bantuan.
Ini ialah beberapa kandungan pemegang tempat kandungan berkaitan tab Laman Utama. Mengklik tab lain akan menogol keterlihatan tab ini untuk yang seterusnya. Tab JavaScript menukar kelas untuk mengawal keterlihatan kandungan dan gaya. Anda boleh menggunakannya dengan tab, pil dan mana-mana .nav
navigasi berkuasa lain.
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>
Untuk membantu memenuhi keperluan anda, ini berfungsi dengan <ul>
penanda berasaskan, seperti yang ditunjukkan di atas, atau dengan sebarang penanda "gulungkan anda sendiri" sewenang-wenangnya. Ambil perhatian bahawa jika anda menggunakan <nav>
, anda tidak seharusnya menambahnya role="tablist"
secara langsung, kerana ini akan mengatasi peranan asli elemen sebagai tanda tempat navigasi. Sebaliknya, tukar kepada elemen alternatif (dalam contoh di bawah, mudah <div>
) dan bungkus di <nav>
sekelilingnya.
<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>
Pemalam tab juga berfungsi dengan pil.
Ini ialah beberapa kandungan pemegang tempat kandungan berkaitan tab Laman Utama. Mengklik tab lain akan menogol keterlihatan tab ini untuk yang seterusnya. Tab JavaScript menukar kelas untuk mengawal keterlihatan kandungan dan gaya. Anda boleh menggunakannya dengan tab, pil dan mana-mana .nav
navigasi berkuasa lain.
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>
Dan dengan pil menegak.
Ini ialah beberapa kandungan pemegang tempat kandungan berkaitan tab Laman Utama. Mengklik tab lain akan menogol keterlihatan tab ini untuk yang seterusnya. Tab JavaScript menukar kelas untuk mengawal keterlihatan kandungan dan gaya. Anda boleh menggunakannya dengan tab, pil dan mana-mana .nav
navigasi berkuasa lain.
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>
Menggunakan atribut data
Anda boleh mengaktifkan navigasi tab atau pil tanpa menulis sebarang JavaScript dengan hanya menyatakan data-bs-toggle="tab"
atau data-bs-toggle="pill"
pada elemen. Gunakan atribut data ini pada .nav-tabs
atau .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>
Melalui JavaScript
Dayakan tab boleh tab melalui JavaScript (setiap tab perlu diaktifkan secara 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()
})
})
Anda boleh mengaktifkan tab individu dalam beberapa 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
Kesan pudar
Untuk membuat tab pudar, tambahkan .fade
pada setiap .tab-pane
. Anak tetingkap tab pertama juga mesti perlu .show
membuat kandungan awal kelihatan.
<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>
Kaedah
Kaedah dan peralihan tak segerak
Semua kaedah API adalah tak segerak dan mulakan peralihan . Mereka kembali kepada pemanggil sebaik sahaja peralihan dimulakan tetapi sebelum ia tamat . Selain itu, panggilan kaedah pada komponen peralihan akan diabaikan .
Lihat dokumentasi JavaScript kami untuk mendapatkan maklumat lanjut .
constructor
Mengaktifkan elemen tab dan bekas kandungan. Tab harus mempunyai sama ada data-bs-target
atau, jika menggunakan pautan, href
atribut, menyasarkan nod bekas dalam 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>
tunjuk
Memilih tab yang diberikan dan menunjukkan anak tetingkap yang berkaitan. Mana-mana tab lain yang sebelum ini dipilih menjadi tidak dipilih dan anak tetingkap berkaitannya disembunyikan. Kembali kepada pemanggil sebelum anak tetingkap tab sebenarnya telah ditunjukkan (iaitu sebelum shown.bs.tab
peristiwa berlaku).
var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()
buang
Memusnahkan tab elemen.
getInstance
Kaedah statik yang membolehkan anda mendapatkan contoh tab yang dikaitkan dengan elemen DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Kaedah statik yang membolehkan anda mendapatkan contoh tab yang dikaitkan dengan elemen DOM atau mencipta yang baharu sekiranya ia tidak dimulakan
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Peristiwa
Apabila menunjukkan tab baharu, peristiwa berlaku dalam susunan berikut:
hide.bs.tab
(pada tab aktif semasa)show.bs.tab
(pada tab yang akan ditunjukkan)hidden.bs.tab
(pada tab aktif sebelumnya, sama seperti untukhide.bs.tab
acara)shown.bs.tab
(pada tab yang baru aktif ditunjukkan, sama seperti untukshow.bs.tab
acara itu)
Jika tiada tab sudah aktif, maka acara hide.bs.tab
dan hidden.bs.tab
tidak akan dicetuskan.
Jenis acara | Penerangan |
---|---|
show.bs.tab |
Peristiwa ini berlaku pada rancangan tab, tetapi sebelum tab baharu dipaparkan. Gunakan event.target dan event.relatedTarget untuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing. |
shown.bs.tab |
Peristiwa ini berlaku pada rancangan tab selepas tab ditunjukkan. Gunakan event.target dan event.relatedTarget untuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing. |
hide.bs.tab |
Peristiwa ini berlaku apabila tab baharu hendak ditunjukkan (dan oleh itu tab aktif sebelumnya akan disembunyikan). Gunakan event.target dan event.relatedTarget untuk menyasarkan tab aktif semasa dan tab baru yang akan aktif, masing-masing. |
hidden.bs.tab |
Peristiwa ini berlaku selepas tab baharu ditunjukkan (dan dengan itu tab aktif sebelumnya disembunyikan). Gunakan event.target dan event.relatedTarget untuk menyasarkan tab aktif sebelumnya dan tab aktif baharu, 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
})