Tutorial Pemrograman

Cara Membuat Menu Navigasi Horizontal dengan Bootstrap

Bootstrap adalah suatu pustaka CSS Framework yang didesain untuk mempercantik tampilan dalam produktifitas website. Bootstrap ini memiliki kumpulan kode script yang telah siap dipakai untuk merancang tampilan website sehingga si web programmer tidak perlu membuat kode perintah CSS dari nol. Bootstrap merupakan salah satu CSS Framework yang populer bagi web programmer frontend pada saat ini.

Ternyata, Bootstrap ini ada juga pustaka JS Framework. Nah, Bootstrap JS Framework ini bisa dijadikan sebagai alternatif dari JQuery dalam membuat tampilan antar-muka pada website tersebut.

Di dalam website, pasti memiliki banyak halaman yang memiliki konten dan fungsi masing-masing. Misalnya, homepage, about, register, other, dan sebagainya. Kamu harus membuat link-link direct halaman-halaman dengan menu navigasi baik vertikal maupun horizontal. Tujuannya agar si visitor dapat memilih link halaman sesuai keinginan.

Berikut cara membuat menu navigasi horizontal dengan Bootstrap.

Langkah:

1. Silahkan aktifkan teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “simple-menunav-bootstrap.html”.

5. Klik Save.

6. Cari file yang tadi, kemudian klik kanan pada mouse → Open With → Web Browser app (Chrome, Mozilla, atau Microsoft Edge).

Lihat hasilnya.

Selesai.

Kini, kamu bisa membuat menu navigasi sendiri secara horizontal pada link halaman tertentu di dalam website buatan kamu.

Demikian tutorial cara membuat menu navigasi horizontal dengan Bootstrap. Selamat mencoba.









Click to comment

Leave a Reply

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

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

Berlangganan tutorial Inwepo melalui email

Copyright © 2018 Inwepo - All Rights Reserved.

To Top