Tutorial Membuat Navbar dengan Bootstrap

Oct 23, 2024

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.