Breaking News
Home / Website / Tutorial Dasar Membuat Navbar Bootstrap 3

Tutorial Dasar Membuat Navbar Bootstrap 3

Hi, semuanya selamat Malam Senin Sahabat Nyekrip kali ini ada tutorial dari saya yaitu belajar bagaimana caranya membuat sebuah Menu Navbar Resoponsive pada Bootstrap 3. Bagi kalian yang belum tahu Menu Navbar Responsive adalah suatu menu di bagian navbar yang dapat menyesuaikan ukurannya pada tampilan browser yang digunakan. Jadi ini akan membuat tampilan browser maksimal atau seukuran desktop bila dilihat dari desktop dan akan jika tampilan pada browser yang berada dilayar kecil maka tampilan menu akan menjadi menu list. Tutorial ini seperti yang pernah saya bilang sangatlah mudah karena di Bootstrap kita dapat menggunakan komponen-komponen yang sangat banyak dan lazim dipergunakan dalam dunia web development terutama User Interface.

Dari pada terlalu lama saya ngoceh mari kita mulai pembatan Navbar Resoponsive pada Bootstrap 3.

PERSIAPAN DALAM MEMBUAT MENU NAVBAR RESPONSIVE

  1. Seperti biasa kita siapkan bootstrap jika belum silahkan download bootstrap di github
  2. Saya sarankan anda menginstal wordpress di XAMPP atau localhost ( gratis ) daripada mengedit dan nyekrip pakai Jaringan internet makan kouta yang banyak. Disini saya menggunakan XAMPP dan untuk edit menggunakan Notepad ++
  3. Buatlah folder dengan nama Navbar di C:\xampp\htdocs\, kemudian ekstrak bootstrap (css, js, fonts) ke folder Navbar tersebut jadi C:\xampp\htdocs\navbar Contoh Folder navbar
  4. Buatlah file dengan nama index.html kemudian silahkan masukan isi script di bawah ini :
  5. Selesai silahkan gunakan Browser kalian untuk mengetesnya

Preview Full Browser

Preview small browser

Catatan jika kalian tidak mau download bootstrap kita bisa mengakali atau ada alternative lain yaitu menggati  script ini :

Menjadi link atau url yang sudah di sediakan bootsrap ini :

Untuk contoh di atas adalah Navbar default atau sederhana dari bootstrap dan sudah saya modifikasi dengan menu dropdown tetapi ini tidak mempengaruhi responsive dari navbar tersebut, Sahabat bisa belajar dan memodifikasi lebih lanjut dari navbar dengan kreasi dan keperluan kalian

Bagi kalian masih bingung dan ingin file contohya yang sudah jadi bisa didownload disini

Terima kasih teman-teman serta sahabat saya yang telah membaca tutorial ini semoga bermanfaat dan selamat Nyekrip dari saya.

About Nino

hanya sekedar tulis-tinulis untuk membagikan informasi

Check Also

Macam Macam Htaccess Untuk Kita Ketahui

Pada hari ini saya akan sharing htaccess yang dibilang sangat mudah dan juga bisa sangat …

One comment

  1. Awesome Blogpost Thanks for sharing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *