Tutorial Bootstrap

Membuat Navigasi Menu Menggunakan Bootstrap

Membuat Navigasi Menu Menggunakan Bootstrap – Membuat navigasi menu tak jauh beda caranya dengan membuat sebuah tombol pada tutorial sebelumnya. Caranya hampir sama, kita tinggal memanggil class – class yang sudah disediakan oleh bootstrap.

Ini juga menjadi salah satu alasan mengapa banyak yang menggunakan bootstrap untuk urusan front-end.

Untuk membuat navigasi bar atau biasa disebut sebagai navigasi menu, kita menggunakan class navbar ( .navbar ) yang kemudian di ikuti dengan jenis navigasinya. Ada beberapa jenis navigasi yang disediakan, diantaranya default navbar ( navbar-default ) dan inverse navbar ( navbar-inverse).

Perhatikan contoh berikut :

Hasil tampilan :

Nvigasi bar

Baris kode tersebut digunakan untuk memanggil class navbar yang kemudian diikuti dengan jenis navbarnya yaitu navbar-default.

class container-fluid digunakan agar navbar yang dibuat menjadi penuh (dapat memenuhi layar).

 

Baca Juga : Cara Menggunakan Framework Bootstrap.

 

Baris kode button berfungsi agar saat berada dilayar dengan ukuran yang kecil (max-width 768px) navigasi bar dapat menyesuaikan. Dengan cara menyembunyikan menu-menu dalam sebuah toggle yang kemudian ditampilkan dengan sebuah kotak bergaris. 🙂

Membuat Navigasi Menu Menggunakan Bootstrap

 

Baris kode ini digunakan untuk membuat menu – menu utama yang akan ditampilkan.

Kemudian untuk memodifikasi navbar tersebut seperti mengganti warna, hover, posisi menu dan lain-lain kita bisa menggunakan bantuah css.

Lalu bagaimana dengan inverse navbar?

Baris kodenya hampir sama, tinggal kita modifikasi pada jenis navbarnya. Yang tadinya navbar-default diubah menjadi navbar-inverse. 🙂

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *