menu
Sebagian besar halaman web memiliki beberapa jenis menu.
Dalam HTML, menu sering didefinisikan dalam daftar unordered <ul> (dan ditata setelah itu), 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 daftar di atas, tambahkan .list-inline kelas untuk <ul> :
<ul class="list-inline"> Cobalah sendiri " Atau Anda dapat menampilkan menu di atas dengan Bootstraps' Tabs and Pills (lihat di bawah).
Catatan: Lihat contoh terakhir di halaman ini untuk mengetahui bagaimana membuat tab dan pil toggleable / dinamis.
tab
Tab diciptakan dengan <ul class="nav nav-tabs"> :
Tip: Juga menandai halaman 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>
Cobalah sendiri " Tab Dengan Menu Dropdown
Tab juga bisa menahan menu dropdown.
Contoh berikut menambahkan menu dropdown untuk "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>
Cobalah sendiri " Pills
Pil diciptakan dengan <ul class="nav nav-pills"> . Juga menandai halaman 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> Cobalah sendiri " vertikal Pills
Pills juga dapat ditampilkan secara vertikal. Cukup tambahkan .nav-stacked kelas:
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>
Cobalah sendiri " Vertikal Pills di Row a
Teks...
Teks...
Teks...
Contoh berikut menempatkan menu pil vertikal di dalam kolom terakhir. Jadi, pada layar besar menu akan ditampilkan ke kanan. Tapi pada layar kecil, konten secara otomatis akan menyesuaikan dirinya menjadi layout single-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> Cobalah sendiri " Pills Dengan Menu Dropdown
Pills juga dapat menahan menu dropdown.
Contoh berikut menambahkan menu dropdown untuk "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>
Cobalah sendiri " Berpusat Tabs and Pills
Untuk pusat / membenarkan tab dan pills , menggunakan .nav-justified kelas.
Perhatikan bahwa pada layar yang lebih kecil dari 768px, daftar item ditumpuk (konten akan tetap berpusat):
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>
Cobalah sendiri " Toggleable / Dinamis Tabs
RUMAH
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut incididunt labore et dolore magna aliqua.
Untuk membuat toggleable tab, tambahkan data-toggle="tab" atribut untuk setiap link. Kemudian tambahkan .tab-pane kelas dengan ID yang unik untuk setiap tab dan membungkus mereka di dalam <div> elemen dengan kelas .tab-content .
Jika Anda ingin tab memudar dalam dan keluar ketika mengklik pada mereka, menambahkan .fade kelas untuk .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>
Cobalah sendiri " Toggleable / Dinamis Pills
Kode yang sama berlaku untuk pills ; hanya mengubah data atribut-ubah ke 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>
Cobalah sendiri " Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 » Latihan 6»
Menyelesaikan Bootstrap Navigasi Referensi
Untuk referensi yang lengkap dari semua kelas navigasi, pergi ke kami lengkap Bootstrap Navigasi Referensi .
Untuk referensi lengkap semua pilihan tab, metode dan peristiwa, pergi ke kami Bootstrap JS Tab Referensi .