Bootstrap - Navigation Demo

Apa itu Navbar?

Hai teman-teman yang sedang belajar menjadi pengembang web! Hari ini, kita akan mendalamkan dunia yang menarik dari batang navigasi Bootstrap, atau seperti yang kami biasakan menyebutnya, "navbars." Bayangkan Anda sedang membangun sebuah rumah - navbar adalah seperti koridor yang menghubungkan semua kamar. Itu adalah hub pusat yang membantu pengunjung bergerak di situs web Anda dengan mudah.

Navbar adalah komponen navigasi yang kuat yang berada di bagian atas halaman web Anda, menyediakan tautan ke berbagai bagian atau halaman situs web Anda. Itu seperti peta untuk pengunjung Anda, mengarahkan mereka melalui landscape digital Anda.

Mengapa Menggunakan Bootstrap untuk Navbars?

Bootstrap, teman-teman, adalah seperti kit superhero untuk pengembang web. Itu datang dengan komponen yang terdesain sebelumnya yang membuat hidup kita mudah. Menggunakan Bootstrap untuk navbars berarti:

1. Keserasian di berbagai perangkat (reponsive design)
2. mudah dikustomisasi
3. Dukungan bawaan untuk berbagai pola navigasi

Sekarang, mari kita mulai kerja!

Struktur Navbar Dasar

Berikut adalah struktur dasar navbar Bootstrap:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Your Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>

Mari kitauraikan ini:

1. <nav class="navbar navbar-expand-lg navbar-light bg-light">: Ini adalah wadah navbar utama kami. Kelas-kelas ini menentukan penampilannya dan perilakunya.
2. <a class="navbar-brand" href="#">: Ini tempat untuk nama merek atau logo Anda.
3. <button class="navbar-toggler">: Tombol ini muncul di layar yang lebih kecil untuk menutup navbar.
4. <div class="collapse navbar-collapse">: Ini mengandung item navbar yang akan collapse di layar yang lebih kecil.
5. <ul class="navbar-nav">: Daftar tak berurutan ini mengandung item navigasi kami.
6. <li class="nav-item">: Setiap item daftar mewakili item navigasi.

Menyempurnakan Navbar Anda

Mengubah Warna

Bootstrap menawarkan berbagai skema warna. Mari kita coba navbar gelap:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- Konten Navbar -->
</nav>

Di sini, kita mengubah navbar-light bg-light menjadi navbar-dark bg-dark. Itu seperti memberikan navbar Anda penampilan malam yang elegant!

Menambahkan Form Pencarian

Ingin menambahkan fitur pencarian? Berikut adalah caranya:

<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

Tambahkan ini di dalam div navbar-collapse. Itu seperti menambahkan kaca pembesar ke koridor navigasi Anda!

Menu Dropdown

Mari kita tambahkan menu dropdown untuk menambah kegembiraan:

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>

Ini akan membuat menu dropdown di dalam navbar Anda. Itu seperti menambahkan kamar rahasia ke koridor navigasi Anda!

Perilaku Responsif

Navbar Bootstrap secara default adalah responsif. Di layar yang lebih kecil, navbar akan collapse menjadi tombol toggle ( biasanya disebut "hamburger menu"). Hal ini memastikan navigasi Anda dapat digunakan di semua perangkat.

Untuk melihat ini dalam tindakan, cobalah mengubah ukuran jendela browser Anda. Anda akan melihat item navbar menghilang dan tombol toggle muncul. Menekan tombol ini akan menampilkan item navigasi Anda dalam format dropdown.

Praktik Terbaik

1. Simpel saja: Jangan membanjiri pengguna dengan terlalu banyak pilihan.
2. Gunakan label yang jelas: Pastikan item navigasi Anda mudah dipahami.
3. Tandai halaman aktif: Gunakan kelas active untuk menunjukkan pengguna dimana mereka berada.
4. Pertimbangkan merek Anda: Pilih warna dan gaya yang cocok dengan desain keseluruhan Anda.

Kesimpulan

Selamat! Anda baru saja membuat navbar Bootstrap pertama Anda. Ingat, latihan membuat sempurna. Cobalah kombinasi yang berbeda, mainkan warna, dan terutama, bersenang-senang!

Berikut adalah tabel yang menggabungkan kelas Bootstrap utama yang kita gunakan:

Kelas	Tujuan
navbar	Menentukan wadah navbar utama
navbar-expand-lg	Mengatur titik pemecah navbar
navbar-light/dark	Mengatur skema warna navbar
bg-light/dark	Mengatur warna latar belakang navbar
navbar-brand	Menggaya area merek/logo
navbar-toggler	Membuat tombol toggle untuk layar kecil
navbar-nav	Menggaya daftar navigasi
nav-item	Menggaya item navigasi individual
nav-link	Menggaya tautan dalam item navigasi
dropdown-toggle	Membuat tombol toggle dropdown
dropdown-menu	Menggaya wadah menu dropdown
dropdown-item	Menggaya item dalam menu dropdown

Sekarang pergi dan buat navbars yang menakjubkan! Ingat, setiap website yang bagus dimulai dengan navigasi yang bagus. Selamat coding!

Credits: Image by storyset