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.

Post Views: 2,170

Related Posts:

  • Download WhatsApp Aero Apk Versi Terbaru [Update 2023] WhatsApp Aero – Semenjak aplikasi WA menjadi aplikasi komunikasi terpopuler di Indonesia, banyak pihak ketiga yang membuat varian WA baru yang biasa disebut dengan WA MOD. Aplikasi WA MOD memiliki…
  • 5 Situs Baru Pengganti Subscene untuk Download… Subtitle dalam Bahasa Indonesia tentu dibutuhkan oleh para pecinta film dalam negeri. Dengan sub indo, Anda bisa mengerti dan dapat menikmati film secara lebih baik. Siapa sih yang tidak suka…
  • 35+ Aplikasi Nonton Piala Dunia Gratis di Hp dan Laptop Aplikasi Nonton Piala Dunia 2022 ialah aplikasi yang harus kamu punyai saat sebelum gelaran sepak bola termegah piala dunia 2022 di mulai. Dengan jejeran aplikasi ini kamu segera dapat melihat…
  • Cara Mudah Mengonversi File Word Ke PDF Apakah Anda sedang kuliah atau bekerja, Anda mungkin berurusan dengan berbagai jenis dokumen. Dua format dokumen yang paling umum digunakan adalah Word dan PDF. Kedua format ini berkisar dari tugas…
  • Cara Download Video di Facebook Dengan Mudah Sosial media saat ini sangatlah populer di kalangan masyarakat. Mulai dari anak muda hingga dewasa menggunakannya. Ada yang hanya untuk media komunikasi daring (dalam jaringan) atau bahkan untuk berbisnis. Postingan…
  • Cara Instal Ulang Windows Menggunakan Flashdisk Hello Teman Semua! Apakah kamu bosan dengan kinerja laptop atau komputer yang semakin lambat? Atau mungkin, kamu ingin menghapus data kamu untuk menjual laptop atau komputer kamu? Nah, salah satu…
  • WhatsApp Uji Tampilan Status WA Baru Di Android, Ini… WhatsApp (WA) memperbarui status WA untuk beberapa pengguna beta yang menggunakan perangkat Android. Pembaruan ini merupakan perombakan kecil pada antarmuka pengguna (UI) Status WhatsApp.Secara khusus, perubahan kecil ini hanya muncul…
  • Bagaimana Cara Mengubah Google Form Ke Word? Seperti yang diketahui, Google Form memiliki segudang manfaat. Apalagi di masa pandemi yang pembelajaran ataupun bekerja banyak yang menggunakan sistem work from home. Ketika Anda memiliki keperluan menggunakan Google Form…
  • Cara Install Aplikasi di iPhone Hello Teman Semua, saat ini smartphone iPhone sudah menjadi salah satu gadget yang sangat populer di seluruh dunia. Dengan berbagai fitur dan aplikasi yang tersedia, membuat iPhone semakin banyak digunakan…
  • 15 Situs Live Sport Stream HD, Gratis! Live Sport Stream – Bagi penggemar olahraga tak jarang selalu meluangkan waktu untuk menyaksikan pertandingan olahraga. Bahkan ada yang rela begadang hingga larut malam untuk menyaksikan pertandingan favorit di TV.…
  • 10+ Daftar Aplikasi dan Game Penghasil Uang 2023 Begitu banyaknya kebijakan yang diterapkan dan mempengaruhi pendapatan, Anda tidak perlu khawatir untuk saat ini. Kecanggihan teknologi gadget ataupun smartphone dapat membantu kita untuk mendapatkan uang dengan mudah dan cepat,…
  • 15 Situs Download Torrent Terbaik dan Terlengkap (2023) Torrent atau P2P file sharing memungkinkan kita untuk mengunduh file berukuran besar dengan kecepatan yang lebih tinggi. Cara kerja torrenting seperti ini; semua pengguna situs torrent berbagi bandwidth mereka sehingga…
  • Begini Cara Mudah Buka Situs Tanpa Vpn Merubah DNS Tanpa Vpn DNS atau Domain Name System adalah sistem penamaan  hirarkis dan desentralisasi untuk komputer, layanan, atau sumber daya lain yang terhubung ke Internet atau jaringan pribadi. Dengan…
  • Aplikasi Penambah Like Instagram Paling Work 2023 Vpn.co.id - Aplikasi penambah like instagram berguna untuk meningkatkan popularitas kita dengan menambah jumlah suka. Dalam era dinamis digital, platform media sosial telah mengambil peran sentral dalam berinteraksi dan berbagi…
  • Cara Instal APK di Memori Eksternal Hello Teman Semua, kali ini admin akan membahas tentang cara instal APK di memori eksternal. Bagi kalian yang sering mengunduh aplikasi dari internet, pasti pernah mengalami kehabisan ruang penyimpanan di…
  • Panduan Lengkap Mengatasi Serangan XSS pada Codelgniter Salah satu risiko yang kerap menghantui setiap aplikasi adalah adanya serangan XSS pada Codelgniter. Teknologi kini semakin canggih, oleh karena itu Anda pastinya dapat melakukan antisipasi terhadap serangan tersebut. Tetapi,…
  • 5 Aplikasi Download Video Instagram Paling Bisa Diandalkan Beberapa kasus menunjukkan bahwa video yang ada di Instagram tidak bisa diunduh karena fiturnya tidak tersedia. Hal tersebut tidak perlu dikhawatirkan karena terdapat solusi yang paling jitu yaitu dengan menggunakan…
  • Begini Cara Edit Twibbon Video di Alight Motion dan Canva Pada dasarnya, penggunaan twibbon sudah menjadi budaya baru di kalangan masyarakat. Menariknya, ini tidak hanya happening di Indonesia saja, namun juga hampir di seluruh dunia. Pada momen tertentu, para pengguna…
  • Simak Dan Ketahui! Beberapa Aplikasi Kamera Terbaik… Kamera menjadi salah satu fitur penting yang pastinya menjadi pertimbangan oleh banyak orang saat membeli hp. Walaupun ada beberapa kamera dari hape yang memiliki kecerahan yang pas. Namun, semua dari…
  • 35 Situs Baru Pengganti IndoXXI 206.189.151.55 (Update 2023) IndoXXI adalah situs untuk menonton berbagai jenis film secara online dengan beragam kualitas video. Sejak diblokir, situs utama INDOXXI sudah tidak dapat diakses. Namun kami melakukan pemantauan dan menemukan fakta…
  • Cara Reset Windows 7 Tanpa Install Ulang Hello Teman Semua! Apakah kamu sedang mengalami masalah pada Windows 7? Apakah kamu ingin mereset Windows 7 kamu tanpa harus melakukan install ulang? Jangan khawatir, karena admin akan membahas cara…
  • Cek Domain & Whois Cari informasi WHOIS dan ketersediaan nama domain: Cara Cek Whois Domain Anda cukup mengetikkan nama domain atau nama website yang ingin diperiksa melalui kolom di atas. Gunakan format yang tepat…
  • 10 Marketer Terbaik di Indonesia, Semua Perusahaan Unicorn! Marketer merupakan orang yang bertanggung jawab sebagai jantung dari perusahaan, karena memang peranannya yang sangat penting. Di Indonesia sendiri ada beberapa "jagoan"yang menjadi marketer terbaik di Indonesia dan keahliannya ini…
  • Provider Internet dan Wifi Rumah Terbaik (2023) Ketika berbicara mengenai layanan internet di Indonesia, konsumen selalu mencari pilihan yang terbaik. Memilih penyedia layanan internet terbaik itu cukup sulit, karena kita harus mempertimbangkan beberapa faktor seperti harga, kecepatan,…
  • Pengertian dan Kegunaan ScanDisk Pada Komputer ScanDisk adalah aplikasi yang menawarkan fungsi pemeliharaan, perbaikan, dan penyelamatan sistem file yang digunakan untuk memperbaiki masalah pada perangkat penyimpanan. Dirancang oleh SanDisk Corporation, ScanDisk dapat digunakan oleh pengguna Windows…
  • Cara Instal APK di Android Hello Teman Semua, kali ini admin akan membahas tentang cara menginstal APK di smartphone Android kamu. Sebelum kita masuk ke pembahasan, mari kita kenali terlebih dahulu apa itu APK.Apa itu…
  • Pengenalan Dasar Vuejs untuk Pemula Pengenalan dasar vuejs untuk pemula dibutuhkan jika Anda ingin membangun sebuah aplikasi berbasis web. Jika Anda ingin tampilan website yang interactive dan user friendly, maka Anda membutuhkan framework. Vuejs sendiri…
  • Ini Dia 3 Aplikasi Edit Video Di Laptop Gratis dan Mudah Aplikasi edit video di laptop – saat ini kebutuhan konten sudah seperti makanan sehari-hari, dimana hampir setiap orang punya sosial media dan mengupload beragam konten menarik. Tentu saja semua perangkat…
  • 5 Cara Mengaktifkan IDM di Google Chrome IDM adalah singkatan dari Internet Download Manager yang biasanya ada di Google Chrome. Pada umumnya IDM yang dipasang akan muncul sendiri di Google, tapi ada kalanya perlu diaktifkan terlebih dulu.…
  • cara menghapus file sampah di android tanpa aplikasi Cache atau file sampah kerap menjadi musuh utama pada smartphone. Mengingat kecilnya memori internal smartphone, file sampah harus selalu dibersihkan agar smartphone menjadi lebih lega. Untuk itu, ada berbagai cara…