Cara Mudah Membuat Bottom Navbar Seperti Instagram Dengan Bootstrap 5
Pada artikel ini saya akan membagi artikel yang hendak mengulas mengenai bagaimana sich langkah membuat bottom navbar seperti instagram atau umumnya mobile app dengan bootstrap 5. pada eksperimen di artikel ini, kita akan mengawali dari 0 yakni dengan membuat file html baru dengan starter template dari bootstrap.
Saat sebelum berlanjut ke beberapa langkah pembikinan bottom navbar dengan bootstrap 5, kita harus tahu lebih dulu mengapa sich kita perlu membuat bottom navbar situs untuk versus mobile ? Maka karena ada bottom navbar akan mempermudah pemakai untuk beralih halaman karena status navbar dengan jempol pemakai (yang umumnya dipakai untuk tekan) lebih dekat, berlainan bila button navbar ada di sudut atas piranti seperti umumnya situs yang ada sekarang ini, pemakai kesusahan dalam menyaksikan menu navigasi yang berada di website. Kehadiran bottom navbar benar-benar baik untuk pemakai experience.
Lalu, mengapa di beberapa situs belum mengaplikasikan bottom navbar ? tidak seluruhnya web harus mengaplikasikan bottom navbar, bergantung sasaran rutinitas audiens dan audiens. Peluang, karena sasaran audiencenya ialah pemakai yang mencari panduan programming yang umumnya jika orang program, piranti yang dipakai ialah piranti yang memiliki lebar monitor large atau lebar seperti netbook, PC dan sebagainya, oleh karena itu banyak situs belum juga mengaplikasikan bottom navbar, tetapi peluang bila waktunya datang akan mengaplikasikan bottom navbar.
Bottom navbar biasa kita temui di situs atau program e-commerce, media sosial seperti twitter, instagram. Nach, kesempatan ini saya akan ajak rekan-rekan belajar bagaimanakah cara membuat bottom navbar seperti instagram dengan bootstrap versus 5. Marilah kita awali beberapa langkahnya.
Apa yang penting disiapkan ?
Teks editor (Saya memakai Visual Studio Code)
Browser (Saya memakai Google Chrome)
Jaringan Internet (Optional)
Mempersiapkan File HTML
Langkah awal untuk membikin bottom navbar seperti instagram dengan bootstrap ialah kita perlu mempersiapkan atau membuat file HTML baru. Silakan buat file HTML bernama file index.html, selanjutnya copy code starter bootstrap berikut ini dan paste pada file HTML yang barusan dibuat.
Dari code di atas, kita akan memakai bootstrap CSS versus CDN dan bootstrap bundel with popper versus CDN juga. Silakan save, lalu coba membuka di browser. Apa yang diperlihatkan ? kosong ? ya memang kita cuman baru membuat starter template, belum membuat penampilannya. Saat ini, silakan copy code berikut ini dan paste di bawah tag <body> .
Dengan code di atas, saat ini kita telah memiliki penampilan navbar tetapi saat pada monitor kecil navbar masih di status atas sama dalam gambar di bawah ini.
Supaya saat monitor memiliki ukuran kecil navbar tidak diperlihatkan, kita perlu manambahkan class d-none d-lg-block pada tag navbar yang maknanya hebat navbar akan diselinapkan disemua ukuran monitor terkecuali pada monitor memiliki ukuran large atau besar. Saat ini tag navbar kita bisa menjadi mirip contoh di bawah ini.
Saat ini coba save dan membuka pada browser sama ukuran monitor mobile, karena itu navbar tidak diperlihatkan lagi. Selanjutnya bagaimanakah cara supaya navbar tampil di bawah ? nach, saat ini coba copy kode berikut ini dan paste pas di bawah </nav> yang telah dibikin sebelumnya.
Penting diingat pada code bottom navbar di atas, kita menambah class border-top, navbar-expand, d-md-none, d-lg-none, d-xl-none, fixed-bottom, class-class itu perannya apa ? silahkan baca penuturannya pada tabel di bawah ini.
Coba save dari peralihan yang sudah dilaksanakan barusan dan lihat di browser sama ukuran small atau kecil, karena itu penampilannya bakal jadi gambar di atas. Oke, sama ukuran monitor kecil, hebat navbar telah diselinapkan dan bottom navbar di tampilkan. Beberapa menu di bottom navbar masih berbentuk text, kita inginya menu navbar berbentuk ikon seperti pada instagram, apa jalan keluarnya ? Coba datangi di icon.getbootstrap.com, selanjutnya mencari keyword misalkan home.
Nach, kelak ada ikon seperti gambar di atas, click selanjutnya copy HTML atau svg karena kita akan memakai pilihan svg (bukan icon). Membuka file HTML kembali, dan paste code svg itu gantikan menu Home di section bottom navbar. Kerjakan kembali dengan cari ikon untuk search, add, profil dan shop. Keseluruhannya, nanti code bottom navbar akan seperti pada bawah ini.
Dengan code di atas, kita telah mengganti semua teks menu yang berada di bottom navbar dengan ikon seperti pada instagram memakai ikon dari bootstrap. Dengan code di atas, karena itu penampilan menu atau bottom navbar kita bisa menjadi seperti gambar di bawah ini.
Bagaimana ? telah kelihatan serupa dengan menu atau bottom navbar di instagram kan ? tinggal menambah contoh content saja supaya tidak kelihatan kosong. Silakan copy code berikut ini, selanjutnya paste di bawah tag atau di atas <script>.
engan menambahkan kode di atas, maka sekarang tampilan projek latihan membuat bottom navbar seperti instagram dengan bootstrap akan menjadi seperti gambar di bawah ini.
kode lengkap Index.html
Keseluruhannya code yang sudah kita bikin pada latihan membuat menu atau bottom navbar pada penampilan mobile seperti instagram dengan bootstrap 5 dapat disaksikan pada code di atas.
Demikian artikel ini kali, sampai di sini kita telah sukses menuntaskan atau membuat menu bottom navbar seperti pada instagram dengan bootstrap 5. Silakan rekan-rekan modifikasi atau improvisasi sesuai keperluan rekan atau kemauan. Bila ada anjuran, kritikan, saran atau apa saja itu yang ingin dibicarakan, silakan catat komentar di bawah ini.
Related Posts:
Cara Menginstal File di Laptop Hello Teman Semua, pada kesempatan kali ini admin akan membahas tentang cara menginstal file di laptop. Sebagai pengguna laptop, kita pasti seringkali membutuhkan aplikasi atau program tertentu yang harus diinstal…
Cara Install XAMPP di Mac Hello Teman Semua, pada artikel kali ini admin akan memberikan tutorial tentang cara install XAMPP di Mac. XAMPP adalah software yang biasa digunakan oleh para Developer Web untuk membuat website…
Cara Instal Adobe Air Hello Teman Semua! Apakah Anda pernah mendengar tentang Adobe Air? Aplikasi yang satu ini sering digunakan oleh para pengembang game ataupun aplikasi desktop. Namun, sebelum bisa menggunakan aplikasi tersebut, tentu…
Cara Install Ulang HP Oppo Hello Teman Semua! Kali ini admin akan membahas tentang cara install ulang HP Oppo. Kita semua tahu bahwa HP Oppo adalah salah satu merek HP yang cukup terkenal di Indonesia.…
Cara Install Flutter di VS Code Hello, teman semua! Jika kamu ingin membuat aplikasi mobile dengan mudah, teknologi Flutter bisa jadi pilihan tepat. Flutter adalah framework open-source dari Google yang memudahkan developer untuk membuat aplikasi mobile…
Cara Instal Linux Debian di Virtualbox Hello Teman Semua, kali ini admin akan membahas tentang cara instal Linux Debian di Virtualbox. Virtualbox merupakan aplikasi virtualization yang digunakan untuk menjalankan sistem operasi yang berbeda pada sebuah komputer.…
3 Cara Melihat Postingan Instagram Tanpa Diketahui Instagram merupakan salah satu jejaring sosial yang banyak digunakan penggunanya untuk memposting foto atau video berbagai aktivitas yang mereka lakukan.Hal inilah yang terkadang membuat banyak pengguna merasa penasaran saat memposting…
Cara Instal Windows Tanpa Masuk BIOS Hello Teman Semua, kali ini admin akan berbagi tips menarik tentang cara instal windows tanpa masuk BIOS. Biasanya, saat menginstal windows, kita perlu memasuki BIOS terlebih dahulu untuk mengatur booting.…
Cara Instal Ulang Windows 10 dengan Flashdisk Hello Teman Semua, kali ini admin akan membahas tentang cara instal ulang Windows 10 dengan menggunakan flashdisk. Hal ini bisa kita lakukan apabila terjadi masalah pada sistem operasi yang tidak…
Aplikasi Sadap WA Pasangan Tanpa Ketahuan (Update) Perubahan tehnologi info makin mempermudah untuk lakukan komunikasi. Satu diantaranya untuk pasangan yang jalani Hubungan jarak jauh ini sering membuat ingin tahu isi WA pasangan. Untuk mengetahuinya memakai aplikasi sadap…
Cara Instal Ulang Windows 8 Menggunakan Flashdisk Hello teman semua! Apakah Anda sedang mengalami masalah dengan sistem operasi Windows 8 dan ingin melakukan instal ulang? Jangan khawatir, admin akan memberi tahu cara instal ulang Windows 8 menggunakan…
cara agar tulisan di excel bisa kebawah Hello Teman Semua! Apakah kamu sering mengalami kesulitan saat ingin membuat tulisan di Excel agar bisa terus kebawah? Tenang saja, dalam artikel ini akan kita bahas bagaimana cara agar tulisan…
Cara Instal HP Samsung Hello Teman Semua! Dalam artikel kali ini, admin akan membahas tentang cara instal HP Samsung. Sebelum kita mulai, pastikan kamu sudah menyiapkan koneksi internet dan HP Samsung yang akan diinstal.Langkah…
cara membuat grafik pie di excel Hello Teman Semua! Siapa yang tidak pernah menggunakan Microsoft Excel? Aplikasi yang satu ini memang sangat berguna untuk mengolah data laporan atau angka-angka. Salah satu fitur yang sering digunakan adalah…
Cara Instal XAMPP Hello Teman Semua! Saat ini, banyak orang yang ingin mempelajari lebih dalam tentang dunia website. Salah satu cara untuk mempelajari website adalah dengan membuat website sendiri. Namun, sebelum itu dilakukan,…
cara menggabungkan 2 baris menjadi 1 di excel Hello teman semua! Dalam kegiatan sehari-hari di kantor, tentu kita sering menggunakan Microsoft Excel untuk memproses data. Salah satu hal yang sering dilakukan adalah menggabungkan baris pada spreadsheet. Ada berbagai…
Cara Membuat Windows Installer di Flashdisk Hello Teman Semua! Siapa yang tidak pernah mengalami kesulitan dalam menginstal ulang sistem operasi Windows di laptop atau komputer? Padahal, hal tersebut sangatlah penting untuk menjaga kinerja sistem operasi agar…
Update Instagram Kini Bisa Unggah Story Dengan… Instagram baru saja meluncurkan fitur baru yang memungkinkan penggunanya untuk mengunggah story atau cerita hingga 60 detik.Dengan fitur baru ini, pengguna Instagram dapat membagikan story yang berdurasi selama 60 detik…
cara melihat data double di excel Hello Teman Semua, apakah Anda sedang mengalami masalah dengan data double di Excel? Jangan khawatir, dalam artikel ini kami akan membahas cara melihat data double di Excel secara santai dan…
Cara Menginstal Microsoft Word Hello Teman Semua, kali ini kita akan membahas tentang cara menginstal Microsoft Word. Salah satu aplikasi yang sangat penting bagi kita yang sering membutuhkan fitur pengolah kata dalam pekerjaan atau…
Cara Instal Font di Laptop Hello Teman Semua! Pernahkah Anda mengalami kesulitan dalam menemukan jenis huruf untuk dokumen Anda? Atau mungkin bosan dengan jenis huruf yang terbatas pada laptop Anda? Jangan khawatir, karena kali ini…
Cara Menginstal Office Hello teman-teman! Hari ini admin akan memberikan tutorial tentang cara menginstal office. Seperti yang kita tahu, Office adalah salah satu aplikasi yang berguna untuk keperluan kantor, belajar, bahkan untuk keperluan…
Cara Install React Native Tanpa Android Studio Hello, Teman Semua! Kali ini admin akan membagikan cara untuk install React Native tanpa harus menggunakan Android Studio. Seperti yang kita tahu, Android Studio adalah software yang cukup berat dan…
Cara Membuat USB Installer Windows 7 Hello Teman Semua, Windows 7 masih menjadi salah satu sistem operasi yang paling banyak digunakan oleh pengguna PC di seluruh dunia. Namun, ketika menginstal ulang Windows 7, biasanya kita akan…
Cara Install PUBG di Laptop Hello Teman Semua, kali ini admin akan membahas tentang cara install PUBG di laptop. Semakin banyak yang memainkan game ini, terutama setelah dirilisnya versi mobile, membuat para pemain semakin tertarik…
cara menambahkan halaman di excel Hello Teman Semua! Pada artikel kali ini, kita akan membahas tentang cara menambahkan halaman di Excel. Hal ini sangat penting jika kita ingin mengelola data dalam jumlah besar dan menghindari…
Cara Install XAMPP Hello Teman Semua! Apa kabar hari ini? Kali ini kita akan membahas tentang cara menginstall XAMPP di komputer atau laptop kita. XAMPP sendiri adalah aplikasi yang dapat membuat komputer kita…
Cara Instal Mobile Legend Kuroyama Mod Hello Teman Semua! Apakah Anda salah satu penggemar game Mobile Legend? Jika iya, Anda pasti sudah tidak asing lagi dengan istilah mod. Kuroyama mod adalah salah satu mod Mobile Legend…
Fitur Template Uji Coba Instagram, Kreator Dapat… Instagram sedang menguji fitur baru dari template Reel Instagram. Fitur ini memungkinkan kreator untuk membuat video dengan meminjam format dari video lain di platform.Merujuk pada The Verge, Senin (25/April 2023),…
Cara Menginstal Sound Device Hello teman-teman, kali ini admin akan membahas tentang cara menginstal sound device. Seperti yang kita tahu, sound device adalah perangkat keras pada komputer yang berfungsi untuk mengeluarkan suara. Jadi, jika…