Halo teman-teman semua, selamat datang kembali di channel Framework Indonesia. Di video kali ini kita akan belajar membuat navbar dengan menggunakan framework bootstrap. Oke langsung saja kita akan mulai teman-teman Pada video sebelumnya kita sudah berhasil menampilkan Hello World pada browser kita Dan kita sudah modifikasi sedikit Menjadi Hello saya belajar bootstrap di Framework Indonesia Kita juga sudah berhasil menghubungkan bootstrap kita di halaman index.html, baik secara online maupun offline.
Dan di sini saya tetap menggunakan cara online untuk menghubungkan bootstrap. Bootstrap karena memang saya terhubung dengan internet Bagi teman-teman yang tidak terhubung dengan internet Silahkan menggunakan cara offline Tutorialnya sudah saya buatkan pada video sebelumnya Oke langsung saja kita akan mulai membuat navbar Dengan menggunakan bootstrap Tag H1 nya kita hapus saja Kemudian kita akan membuka dokumentasi bootstrap. Silakan kunjungi websitenya di getbootstrap.com. Kemudian klik di documentation. Nah ini adalah dokumentasi dari bootstrap.
sepanjang kita belajar bootstrap kita akan terus membuka halaman dokumentasi ini namun bagi teman-teman yang mungkin tidak terkoneksi dengan internet teman-teman bisa mengetik codingannya nanti secara manual jadi ikuti saja nanti apa yang saya masukkan di dalam sublime text ini nanti teman-teman bisa ketik secara manual nah untuk membuat navbar, klik components kemudian cari yang navbar nah ini navbar silahkan klik atau cara cepatnya di searchnya ketik aja navbar maka akan muncul dokumentasi navbar dari bootstrap kita kemudian kita akan scroll ke bawah, kita lihat lihat di sini ada banyak sekali jenis-jenis atau model-model navbar ada yang menggunakan drop-down ada yang menggunakan search kemudian ada juga yang simple seperti ini Nah kita akan menggunakan yang simple saja yang nav silakan kita akan copy semua codingannya Caranya blok, klik kanan copy atau cara cepatnya klik di link copy. Kemudian kita kembali ke text editor kita. Kita akan pastekan di bawah body. Silakan paste. Kita akan rapikan sedikit.
Kemudian simpan, jangan lupa selalu simpan. Lalu kita akan lihat hasilnya di browser, silakan klik kanan, open in browser. Nah, menu bar kita sudah jadi seperti ini, jadi seperti yang saya katakan di video awal, dengan menggunakan bootstrap maka kita bisa membuat aplikasi.
dengan sangat cepat, efektif dan efisien kemudian kita akan memodifikasi sedikit navbar ini silakan kembali ke text editor teman-teman di text body nya silakan kita buat id kita masukkan nama id nya adalah page top kita coba lihat disini kita ubah sedikit saja navbar like ini untuk memberikan warna pada tulisan menunya contohnya kita akan ubah menjadi kelasnya menjadi navbar primary save kita coba lihat Hai nah warnanya berubah ya contohnya lagi kita akan ubah kita akan coba bereksperimen kita akan ubah kelas BG like nya jadi BG like ini untuk memberikan warna background atau latar belakang pada nasbar kita contoh kita ubah menjadi BG warning Kelasnya menjadi BG Warning. Maka warnanya akan berubah menjadi kuning. Contoh lagi kita ubah warnanya menjadi BG Danger.
Kira-kira akan berubah menjadi warna apa? Nah, Danger berubah warna menjadi merah. Nah, untuk melihat kelas-kelas background color-nya, teman-teman bisa lihat di dokumentasinya. Jadi di search-nya ketik saja background.
color ya Nah di sini ada kelas-kelas yang sudah disediakan oleh bootstrap contohnya untuk BG sukses itu warna hijau kemudian BG dark itu warna hitam coba kita coba yang BG sukses BG sukses save kemudian kita refresh Hai nah dia berubah menjadi warna hijau sesuai dengan yang ada di dokumentasinya namun untuk tutorial kali ini kita tetap menggunakan yang like supaya lebih simpel kembali ke browser ya kembali ke bentuk semula kemudian yang warna nafbat nya juga kita kembalikan ke like hai hai Silahkan kembali ke text editornya, kita akan lanjutkan. Kemudian di depan kelas BG Light-nya, kita akan tambahkan kelas lagi, yaitu Fixed Top. Jadi kelas Fixed Top ini untuk membuat navbar kita tetap fix pada saat nanti halaman webnya di-scroll. Untuk melihatnya, kita tambahkan dulu di sini BR, supaya bisa di-scroll ke bawah. BR-nya di-copy banyak saja.
Kemudian kita akan lihat hasilnya di browser. Nah, ini sudah berhasil bisa di scroll ke bawah. Nah, pada saat kita scroll ke bawah, maka navbar-nya ini hilang ya.
Nah, kita mau supaya pada saat kita scroll, itu navbar-nya tidak hilang. Maka caranya adalah dengan menambahkan kelas fix-top. Kita akan coba tambahkan kelasnya fix-top.
save kemudian kita lihat hasilnya silahkan refresh lalu kita akan Scroll kebawah Hai nah pada saat kita Scroll maka nafbar nya ini tetap berada di atas lalu kita akan tambahkan lagi id-nya disini nama id-nya adalah main nav Kemudian kita akan memasukkan tulisan navbar ini ke dalam supaya tidak mepet dengan marginnya. Caranya kita buat container, div container. Kemudian kita pindahkan penutup containernya di bawah, di atas penutup nav. save kemudian kita lihat hasilnya refresh nah sudah berhasil kita memasukkan agak ke dalam supaya tidak terlalu mepek dengan margin ya kita kembali ke codingan kita ini kita ubah menjadi framework Indonesia lalu di href nya kita buat pegtop Kemudian di bawahnya kita lihat ada button. Button ini akan muncul ketika kita mengecilkan ukuran website kita.
Contohnya kita akan minimize. Seperti ini. Ini adalah ukuran.
ukuran handphone ini sekitar sini adalah ukuran tablet maka ketika kita mengecilkan maka menunya akan tersembunyi namun di sini ada ya button yang tadi kita panggil jadi pada saat kita klik dia sudah menjadi responsif nah kemudian kita akan tambahkan kelas lagi di sini navbar tagler-taik Kemudian kita akan membuat daftar menu ini berada di sebelah kanan. Kita akan tambahkan kelas di tag ul-nya. Silakan tambahkan kelas di depan navbar, nav-nya. Nama kelasnya adalah ml-auto. jadi supaya menu yang ada disini berada di sebelah kanan coba kita refresh nah sudah berhasil menunya sekarang berada di sebelah kanan kemudian tulisan frameworknya tetap di sebelah kiri kemudian kita akan ubah ini menjadi daftar kemudian Hai di sini kita buat daftar juga lalu kita tambahkan kelas disini JS scroll kemudian ini kita copy saja kita paste di sini kemudian ini kita buat menjadi download hai hai Hai harifnya juga sama download kemudian ini kita buat tutorial di sini juga tutorial ini kita hapus saja kita copy yang dari atas paste kemudian kita ubah ini menjadi hai hai Hai artikel menunya juga ubah jadi artikel kemudian ini kita ubah jadi hubungi kami Hai dan coba lihat hasilnya di browser silakan refresh hai hai Nah, sekarang kita sudah punya menu daftar, download, tutorial, artikel, dan hubungi kami.
Selanjutnya, kita akan membuat drop-down menu, di mana pada saat kita nanti klik di menu tutorial, maka akan memunculkan menu-menu atau sub-sub menu lainnya. Caranya, silakan kembali ke dokumentasi, kemudian kita ketik lagi navbar di sini, kita kembali ke navbar. Ayo kita cari yang ada drop down ya Hai nah ini ada ya drop down nya kita copy saja Ayo kita copy mulai dari sini Hai sampai ada penutup elinya silakan copy kembali ke kodingan Hai nah yang tutorial ini kita hapus saja kita ganti dengan yang tadi kita copy lalu kita rapikan Hai kemudian kita ganti ini menjadi tutorial kemudian kita buat ini adalah submenunya Hai submenunya adalah contohnya kita buat bootstrap Hai kemudian submenu berikutnya contohnya kita buat kode igniter hai hai Hai dan yang terakhir kita buat lah travel ini aja contoh saja ya kemudian di HD nya kita buat disini tutorial Oke selanjutnya silakan simpan kita akan coba lihat hasilnya kembali ke browser lalu refresh nah disini sudah muncul drop down menunya jadi pada saat kita klik maka akan memunculkan submenu submenu yang lain tadi disini kita lihat teman-teman disini ada semacam garis ya Nah ini kenapa karena disini kita sudah menambahkan kelas yang namanya drop-down divider jadi kita bisa tambahkan di atasnya copy saja Hai kemudian paste disini lalu refresh Hai nah muncul juga di atasnya Oke teman-teman, sekian tutorial untuk membuat navbar atau menu bar dengan menggunakan bootstrap. Silakan teman-teman bereksperimen dan memodifikasi sendiri kodingan yang sudah kita buat ini. Kita akan melanjutkan tutorial ini pada video selanjutnya.