Bootstrap adalah salah satu framework CSS yang paling populer digunakan oleh pengembang web. Bootstrap menyediakan sejumlah komponen UI, termasuk navigasi bar (navbar) yang sangat berguna untuk membuat navigasi website yang responsif. Dalam artikel ini, kita akan belajar cara membuat navbar dengan menggunakan Bootstrap.


Langkah 1: Memasukkan Bootstrap ke dalam proyek

Langkah pertama adalah memasukkan Bootstrap ke dalam proyek Anda. Anda dapat mengunduh Bootstrap dari situs web resmi Bootstrap (https://getbootstrap.com/). Setelah Anda mengunduh Bootstrap, buatlah folder "css" dan "js" di dalam folder proyek Anda, lalu salin file "bootstrap.min.css" ke dalam folder "css" dan file "bootstrap.min.js" ke dalam folder "js". Kemudian, masukkan kode berikut di antara tag <head> dan </head> di halaman HTML Anda untuk memasukkan Bootstrap ke dalam proyek Anda:

php
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>

Langkah 2: Membuat Navbar

Setelah Anda memasukkan Bootstrap ke dalam proyek Anda, langkah selanjutnya adalah membuat navbar. Bootstrap menyediakan beberapa kelas CSS yang memungkinkan Anda untuk membuat navbar dengan mudah.

Berikut adalah contoh kode HTML untuk membuat navbar dengan Bootstrap:

php
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</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</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Kode di atas akan membuat navbar dengan logo di sebelah kiri, tombol toggle untuk menu dropdown di perangkat seluler, dan item menu yang terdiri dari Home, About, Services, dan Contact.

Langkah 3: Menyesuaikan Navbar

Anda dapat menyesuaikan navbar dengan menambahkan atau menghapus kelas CSS, mengubah warna, ukuran font, dan lain-lain.

Berikut adalah contoh kode CSS untuk mengubah warna navbar menjadi biru dan ukuran font menjadi 16px:

css
.navbar {
  background-color: blue;
  font-size: 16px;
}

Anda juga dapat menambahkan kelas CSS lain seperti "navbar-dark" atau "navbar-inverse" untuk mengubah warna teks navbar.

Kesimpulan

Bootstrap menyediakan sejumlah komponen UI yang sangat berguna, termasuk navigasi bar (navbar) yang sangat mudah dibuat. Dengan mengikuti langkah-langkah di atas, Anda dapat membuat navbar yang responsif dan mudah disesuaikan.