Catatan Tutorial Membuat Navbar dengan Bootstrap

Pendahuluan

• Selamat datang di channel Framework Indonesia.
• Dalam video ini, kita akan belajar cara membuat navbar menggunakan Bootstrap.

Persiapan Awal

• Di video sebelumnya, sudah berhasil menampilkan "Hello World" dan menghubungkan Bootstrap ke halaman index.html.
• Penghubungan Bootstrap bisa dilakukan secara online atau offline.

Membuat Navbar

1. Hapus Tag H1
   • Hapus tag H1 yang ada.
2. Kunjungi Dokumentasi Bootstrap
   • Akses getbootstrap.com dan klik pada documentation.
   • Cari "navbar" pada komponen.
3. Copy Kode Navbar
   • Salin kode dari dokumentasi ke dalam text editor.
   • Paste di bawah tag body dan rapikan.
4. Simpan dan Tampilkan di Browser
   • Selalu simpan perubahan dan buka di browser.

Modifikasi Navbar

1. Tambah ID untuk Navbar
   • Tambahkan id dengan nama page-top.
2. Mengubah Kelas Navbar
   • Ganti kelas navbar menjadi navbar-primary untuk mengubah warna.
3. Eksperimen dengan Background
   • Coba berbagai kelas background seperti bg-warning, bg-danger, dan bg-success.
4. Menambahkan Kelas Fixed Top
   • Tambahkan kelas fixed-top agar navbar tetap terlihat saat di-scroll.
5. Menambahkan Container
   • Tambahkan div class="container" untuk memberi ruang antara navbar dan margin.

Menambahkan Menu

1. Ubah Teks Navbar
   • Ubah teks navbar sesuai kebutuhan, misalnya menjadi "Framework Indonesia".
2. Membuat Menu Responsif
   • Gunakan kelas navbar-toggler untuk menu yang responsif saat ukuran layar mengecil.
3. Mengatur Posisi Menu
   • Tambahkan kelas ml-auto pada ul agar menu berada di sebelah kanan.

Membuat Drop-down Menu

1. Mencari Drop-down di Dokumentasi
   • Kembali ke dokumentasi dan cari drop-down menu.
2. Copy Kode Drop-down
   • Salin kode drop-down dan ganti pada menu "Tutorial".
3. Menambahkan Submenu
   • Buat submenu seperti "Bootstrap", "CodeIgniter", dan "Travel".

Penutup

• Eksperimen dan modifikasi kode navbar sesuai keinginan.
• Tutorial selanjutnya akan membahas lebih lanjut.

Catatan Tambahan

• Pastikan selalu merujuk pada dokumentasi Bootstrap untuk referensi lebih lanjut.