Part 2 Nav Bar - Bagaimana cara membuat template Bootstrap 4 sendiri

Assalaikum wr wb

Apa kabar teman sekalian, kali ini kita akan membahas tentang bagaimana cara membuat NavBar menggunakan Bootstrap 4 yang telah disediakan. Seperti yang kalian ketahui bahwa Bootstrap 4 menyediakan beberapa fitur css yang sudah ada dan juga responsive pada smartphone, jadi kita mudah dalam pembuatan template website.

Kali ini kita akan membahas Bagaimana cara membuat NavBar dimana navbar sangat penting didalam struktur dalam website, NavBar atau istilah kerennya Navigation Bar adalah sebuah balok atau menu-menu yang mana menu tersebut berguna untuk menunjukan suatu judul besar konten website kita, biasanya terletak dipaling atas atau bagian kanan atau kiri sebuah website, bentuk navbar ada yang horizontal dan ada yang vertical.

Jika kita membuat navbar dengan menggunakan  koding css tersendiri itu agak memakan waktu. Oleh karena itu terciptalah sebuah framework font-end dimana bootstrap telah merancang sebuah koding css yang sudah responsive dan juga umum, hanya tinggal kita modif sedikit sesuai dengan selera untuk membuat sebuah template website yang keren, contoh NavBar yang saya buat klik gambar dibawah ini.

Mode Mobile

Mode Destop Full

Ok langsung saja kita masuk kepembahasan tentang Bagaimana cara membuat NavBar menggunakan bootstrap 4. Liat langkah dibawah ini bagaimana cara Bagaimana cara membuat NavBar menggunakan bootrtrap 4.

1. Pertama seperti tutorial sebelumnya Bagaimana cara membuat template Bootstrap 4 sendiri - Part 1 Instalasi Bootstrap kalian harus menyiapkan bahannya. Bagi teman yang belum mengikuti langkah awal silakan klik artikel ini Bagaimana cara membuat template Bootstrap 4 sendiri - Part 1 Instalasi Bootstrap.
2. Langkah kedua anda kita masukan koding navbarnya dibawah atribut </head> seperti contoh koding dibawah ini.

3. Lalu simpan dengan didalam folder yang sudah dibuat pada tutotial yang sebelumnya Bagaimana cara membuat template Bootstrap 4 sendiri - Part 1 Instalasi Bootstrap dengan format namafile.html, setelah itu coba jalankan.

Beberapa koding untuk membuat Navbar yang akan saya jelaskan fungsinya.

Pertama adalah koding yang diawali <nav bla....> dan diakhiri </nav>, ini adalah sebuah koding bootstrap 4 yang mewakili bentuk dari navigation bar, coba diperhatikan pada tag class="" didalam ini ada beberapa koding jika ada spasi itu menandakan bahwa itu adalah sebuah class yang mewakili struktur css yang dibuat. Pertama adalah navbar itu adalah sebuah koding struktur standar pada navbar, kemudian navbar-expand-lg berfungsi untuk memberikan paging yang tidak ada paging horizontal atau dengan kata lain tidak ada batas atas dan batas bagian bawah dengan konten lain dan -lg adalah singkatan dalam bahasa inggeris large atau besar, ada beberapa koding selain -lg yaitu {-sm|-md|-lg|-xl} itu semua adalah singkatan {-small|-medium|-large|-extralarge}.

Adapun navbar-dark adalah sebuah koding yang berfungsi warna latar belakang gelap, lalu nav berfungsi mengaktifkan koding navbar pada bootstrap 4 dan struktur telah tersedia, sebagai componen navbar.

Jika kawan-kawan mau mendownload lengkap coding silakan download yang sudah saya sediakan klik disini. Lalu nav-pills koding yang berfungsi untuk negaktifkan tab atau pilhan navigasi tanpa harus menggunakan javascript, kemudian nav-fill itu adalah sebuah koding yang berfungsi batas pada navigation jadi seperti ada batasan yang tak terlihat pada menu-menu yang ada.

Itulah pemaparan yang saya buat jika ada kata-kata yang salah saya mohon maaf saya akhiri, wasalamulaikum wr wb.