Bootstrap 4 Navs
Menu navigasi
Jika Anda ingin membuat menu horizontal sederhana, tambahkan
.navkelas ke <ul>elemen, diikuti oleh .nav-item
untuk masing-masing <li>dan tambahkan .nav-linkkelas ke tautannya:
Contoh
<ul class="nav">
<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" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Navigasi Sejajar
Tambahkan .justify-content-centerkelas untuk memusatkan navigasi, dan .justify-content-endkelas untuk menyelaraskan kanan navigasi.
Contoh
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
Navigasi Vertikal
Tambahkan .flex-columnkelas untuk membuat navigasi vertikal:
Contoh
<ul class="nav
flex-column">
tab
Ubah menu navigasi menjadi tab navigasi dengan .nav-tabskelas. Tambahkan .activekelas ke tautan aktif/saat ini. Jika Anda ingin tab dapat diubah, lihat contoh terakhir di halaman ini.
Contoh
<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="#">Disabled</a>
</li>
</ul>
pil
Ubah menu navigasi menjadi pil navigasi dengan .nav-pillskelas. Jika Anda ingin pil dapat dialihkan, lihat contoh terakhir di halaman ini.
Contoh
<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="#">Disabled</a>
</li>
</ul>
Tab / pil yang dibenarkan
Ratakan tab/pil dengan .nav-justifiedkelas (lebar sama):
Contoh
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
Pil dengan Dropdown
Contoh
<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="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</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="#">Disabled</a>
</li>
</ul>
Tab dengan Dropdown
Contoh
<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="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</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="#">Disabled</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
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="tab"
href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
Pil 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.
Kode yang sama berlaku untuk pil; hanya ubah atribut data-toggle menjadi data-toggle="pill":
Contoh
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
Referensi Nav Bootstrap 4 Lengkap
Untuk referensi lengkap tentang semua opsi tab, metode, dan acara, buka Referensi Tab Bootstrap 4 JS kami .