Source

Navs

Dokumentasi dan contoh cara menggunakan komponen navigasi yang disertakan Bootstrap.

Nav

Navigasi tersedia dalam Bootstrap berkongsi markup dan gaya umum, daripada .navkelas asas kepada keadaan aktif dan dilumpuhkan. Tukar kelas pengubah suai untuk bertukar antara setiap gaya.

Komponen asas .navdibina 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 .navtidak termasuk mana-mana .activekeadaan. Contoh berikut termasuk kelas, terutamanya untuk menunjukkan bahawa kelas tertentu ini tidak mencetuskan sebarang penggayaan khas.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" 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 .navkegunaan display: flex, pautan nav berkelakuan sama seperti item nav, tetapi tanpa penanda tambahan.

<nav class="nav">
  <a class="nav-link active" 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 .navkomponen 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" 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" 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-columnutiliti. 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" 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" 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-tabskelas 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" 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" 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 .navkandungan anda untuk memanjangkan lebar penuh tersedia satu daripada dua kelas pengubah suai. Untuk mengisi semua ruang yang ada secara berkadar dengan .nav-items 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" 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, pastikan anda memasukkan .nav-itempada sauh.

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item 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-fillatas, setiap item navigasi akan mempunyai lebar yang sama.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" 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-fillcontoh menggunakan <nav>navigasi berasaskan, pastikan anda memasukkan .nav-itempada sauh.

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item 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" 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-tabskelas, 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.

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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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>

Tingkah laku JavaScript

Gunakan pemalam JavaScript tab—masukkannya secara individu atau melalui bootstrap.jsfail yang disusun—untuk melanjutkan tab dan pil navigasi kami untuk mencipta anak tetingkap kandungan tempatan boleh tab, walaupun melalui menu lungsur.

Jika anda membina JavaScript kami daripada sumber, ia memerlukanutil.js .

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

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.

Denim mentah anda mungkin tidak pernah mendengarnya seluar pendek jean Austin. Nesciunt tauhu stumptown aliqua, pembersihan master synth retro. Misai cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex sotong. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan pakaian Amerika, tukang daging voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </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 sepatutnya menambah role="tablist"terus padanya, kerana ini akan mengatasi peranan asli elemen sebagai tanda tempat navigasi. Sebaliknya, tukar kepada elemen alternatif (dalam contoh di bawah, yang mudah <div>) dan bungkus di <nav>sekelilingnya.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </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.

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugit velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </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.

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="col-9">
    <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>
</div>

Menggunakan atribut data

Anda boleh mengaktifkan navigasi tab atau pil tanpa menulis sebarang JavaScript dengan hanya menyatakan data-toggle="tab"atau data-toggle="pill"pada elemen. Gunakan atribut data ini pada .nav-tabsatau .nav-pills.

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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):

$('#myTab a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Anda boleh mengaktifkan tab individu dalam beberapa cara:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').tab('show') // Select third tab

Kesan pudar

Untuk membuat tab pudar, tambahkan .fadepada setiap .tab-pane. Anak tetingkap tab pertama juga mesti perlu .showmembuat 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 .

$().tab

Mengaktifkan elemen tab dan bekas kandungan. Tab harus mempunyai sama ada data-targetatau hrefmenyasarkan nod bekas dalam DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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>
  $(function () {
    $('#myTab li:last-child a').tab('show')
  })
</script>

.tab('show')

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

$('#someTab').tab('show')

.tab('buang')

Memusnahkan tab elemen.

Peristiwa

Apabila menunjukkan tab baharu, peristiwa berlaku dalam susunan berikut:

  1. hide.bs.tab(pada tab aktif semasa)
  2. show.bs.tab(pada tab yang akan ditunjukkan)
  3. hidden.bs.tab(pada tab aktif sebelumnya, sama seperti untuk hide.bs.tabacara)
  4. shown.bs.tab(pada tab yang baru aktif ditunjukkan, sama seperti untuk show.bs.tabacara itu)

Jika tiada tab sudah aktif, maka acara hide.bs.tabdan hidden.bs.tabtidak akan dicetuskan.

Jenis acara Penerangan
show.bs.tab Peristiwa ini berlaku pada rancangan tab, tetapi sebelum tab baharu dipaparkan. Gunakan event.targetdan event.relatedTargetuntuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing.
ditunjukkan.bs.tab Peristiwa ini berlaku pada rancangan tab selepas tab ditunjukkan. Gunakan event.targetdan event.relatedTargetuntuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing.
hide.bs.tab Peristiwa ini berlaku apabila tab baharu hendak ditunjukkan (dan dengan itu tab aktif sebelumnya akan disembunyikan). Gunakan event.targetdan event.relatedTargetuntuk 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.targetdan event.relatedTargetuntuk menyasarkan tab aktif sebelumnya dan tab aktif baharu, masing-masing. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})