Bootstrap menyediakan komponen UI yang sangat berguna, termasuk navigasi bar (navbar) yang mudah dibuat dan disesuaikan. Selain navbar pada bagian atas (top navbar), Bootstrap juga menyediakan komponen untuk navbar pada bagian bawah (bottom navbar). Pada artikel ini, kita akan belajar cara membuat bottom navbar dengan menggunakan Bootstrap.
Langkah 1: Memasukkan Bootstrap ke dalam proyek
Seperti pada pembuatan top navbar, langkah pertama adalah memasukkan Bootstrap ke dalam proyek. Anda dapat mengunduh Bootstrap dari situs web resmi Bootstrap (https://getbootstrap.com/). Setelah Anda mengunduh Bootstrap, buat 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 Bottom Navbar
Setelah Anda memasukkan Bootstrap ke dalam proyek Anda, langkah selanjutnya adalah membuat bottom navbar. Bootstrap menyediakan kelas CSS yang memungkinkan Anda untuk membuat bottom navbar dengan mudah.
Berikut adalah contoh kode HTML untuk membuat bottom navbar dengan Bootstrap:
php<nav class="navbar fixed-bottom navbar-light bg-light"><a class="navbar-brand" href="#">Logo</a><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></nav>
Kode di atas akan membuat bottom navbar dengan logo di sebelah kiri dan item menu yang terdiri dari Home, About, Services, dan Contact.
Langkah 3: Menyesuaikan Bottom Navbar
Anda dapat menyesuaikan bottom navbar dengan menambahkan atau menghapus kelas CSS, mengubah warna, ukuran font, dan lain-lain.
Berikut adalah contoh kode CSS untuk mengubah warna bottom 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 bottom navbar.
Kesimpulan
Bootstrap menyediakan komponen UI yang sangat berguna, termasuk navigasi bar (navbar) pada bagian atas (top navbar) maupun pada bagian bawah (bottom navbar). Dengan mengikuti langkah-langkah di atas, Anda dapat membuat bottom navbar yang responsif dan mudah disesuaikan. Selamat mencoba!