Tab dan Pil Bootstrap
Menu
Sebagian besar halaman web memiliki semacam menu.
Dalam HTML, menu sering didefinisikan dalam daftar yang tidak berurutan <ul>(dan diberi gaya setelahnya), seperti ini:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Jika Anda ingin membuat menu horizontal dari daftar di atas, tambahkan
.list-inlinekelas ke <ul>:
<ul class="list-inline">
Atau Anda dapat menampilkan menu di atas dengan Tab dan Pil Bootstraps (lihat di bawah).
Catatan: Lihat contoh terakhir di halaman ini untuk mengetahui cara membuat tab dan pil dapat dialihkan/dinamis.
tab
Tab dibuat dengan <ul class="nav nav-tabs">:
Tip: Tandai juga halaman saat ini dengan <li class="active">.
Contoh berikut membuat tab navigasi:
Contoh
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Tab Dengan Menu Dropdown
Tab juga dapat menahan menu tarik-turun.
Contoh berikut menambahkan menu tarik-turun ke "Menu 1":
Contoh
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
pil
Pil dibuat dengan <ul class="nav nav-pills">. Tandai juga halaman saat ini dengan
<li class="active">:
Contoh
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Pil Vertikal
Pil juga dapat ditampilkan secara vertikal. Cukup tambahkan .nav-stackedkelas:
Contoh
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Pil Vertikal Berbaris
Teks...
Teks...
Teks...
Contoh berikut menempatkan menu pil vertikal di dalam kolom terakhir. Jadi, pada layar besar menu akan ditampilkan di sebelah kanan. Namun di layar kecil, konten akan secara otomatis menyesuaikan diri menjadi tata letak satu kolom:
Contoh
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
Pil Dengan Menu Dropdown
Pil juga dapat menahan menu dropdown.
Contoh berikut menambahkan menu tarik-turun ke "Menu 1":
Contoh
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Tab dan Pil Terpusat
Untuk memusatkan/membenarkan tab dan pil, gunakan .nav-justifiedkelas.
Perhatikan bahwa pada layar yang lebih kecil dari 768 piksel, item daftar ditumpuk (konten akan tetap berada di tengah):
Contoh
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<!-- Centered Pills -->
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Tab yang Dapat Dialihkan / Dinamis
RUMAH
Rasa sakit itu sendiri penting, tetapi rasa sakit itu ditingkatkan oleh proses adipiscing, tetapi saya memberikan waktu untuk menguranginya sehingga saya melakukan beberapa pekerjaan dan rasa sakit yang hebat.
Untuk membuat tab dapat dialihkan, tambahkan data-toggle="tab"atribut ke setiap tautan. Kemudian tambahkan .tab-panekelas dengan ID unik untuk setiap tab dan bungkus di dalam
<div>elemen dengan class .tab-content.
Jika Anda ingin tab memudar masuk dan keluar saat mengkliknya, tambahkan
.fadekelas ke .tab-pane:
Contoh
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Pil yang Dapat Dialihkan / Dinamis
Kode yang sama berlaku untuk pil; hanya ubah atribut data-toggle menjadi data-toggle="pill":
Contoh
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Referensi Navigasi Bootstrap Lengkap
Untuk referensi lengkap semua kelas navigasi, buka Referensi Navigasi Bootstrap lengkap kami .
Untuk referensi lengkap semua opsi tab, metode, dan acara, buka Referensi Tab Bootstrap JS kami .