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: 1,982

Related Posts:

  • 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 Windows 10 di Laptop HP Hello Teman Semua, kali ini admin akan membahas mengenai cara install Windows 10 di Laptop HP. Proses install Windows 10 ini cukup mudah dilakukan, tetapi membutuhkan sedikit pengetahuan teknis. Oleh…
  • Cara Install Linux Debian di Virtual Box Hello Teman Semua, pada artikel kali ini kita akan membahas tentang cara install Linux Debian di Virtual Box. Linux Debian adalah salah satu sistem operasi open-source yang memiliki keamanan tinggi…
  • cara menghitung rata2 di excel Hello Teman Semua, pada kesempatan kali ini kita akan membahas tentang cara menghitung rata-rata di Excel. Excel adalah salah satu program pengolah data yang sangat populer digunakan untuk berbagai keperluan,…
  • Cara Install Gadget Windows 7 Hello, teman semua! Pernahkah Anda ingin menambahkan gadget di desktop Windows 7 Anda? Gadget adalah aplikasi kecil yang dapat menampilkan informasi seperti cuaca, waktu, dan banyak lagi. Artikel ini akan…
  • Cara Install APK di iPhone Hello Teman Semua, di artikel kali ini admin akan membahas tentang cara install APK di iPhone. Sebelumnya, tentu saja kita perlu tahu terlebih dahulu apa itu APK. APK adalah singkatan…
  • 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…
  • Cara Membuat Partisi Saat Install Windows 10 Hello, teman semua! Kali ini admin akan membahas cara membuat partisi saat melakukan install ulang atau upgrade ke Windows 10. Artikel ini akan membahas langkah-langkah dan kelebihan dan kekurangan dari…
  • 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…
  • Cara Instal Asterisk di VirtualBox Hello teman-teman, pada artikel kali ini admin akan membahas tentang cara instal asterisk di virtualbox. Asterisk adalah perangkat lunak open-source yang berfungsi sebagai Private Branch Exchange (PBX) atau sistem telepon…
  • 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 huruf kapital di excel Hello Teman Semua! Apakah kalian sering menggunakan Microsoft Excel? Nah, kali ini kita akan membahas tentang cara membuat huruf kapital di Excel dengan mudah. Sebelumnya, apakah kalian sudah tahu mengenai…
  • cara print excel agar full Hello Teman Semua, apakah kalian pernah merasa kesulitan saat ingin mencetak file Excel dengan tampilan full? Jangan khawatir karena pada artikel kali ini saya akan membahas cara print Excel agar…
  • cara menghapus tulisan di excel Hello Teman Semua! Excel merupakan salah satu program pengolah lembar kerja yang paling populer di dunia. Namun, terkadang kita membutuhkan cara menghapus tulisan di Excel yang tidak diperlukan lagi. Jangan…
  • cara membuat google form excel Hello Teman Semua, apakah kalian sedang mencari cara untuk membuat Google Form Excel? Tenang saja, artikel ini akan memberikan panduan lengkap untuk membuat Google Form Excel dengan mudah dan cepat!Apa…
  • Cara Install Joomla di Localhost Hello Teman Semua, saat ini banyak orang yang ingin membangun website tanpa harus mengeluarkan biaya yang besar. Salah satu aplikasi manajemen konten yang bisa digunakan adalah Joomla. Dalam artikel ini,…
  • 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 Install Virtualbox Hello Teman Semua, kali ini admin akan membahas tentang cara install Virtualbox. Virtualbox adalah aplikasi yang memungkinkan kita untuk menjalankan sistem operasi lain di dalam sistem operasi yang sedang kita…
  • 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…
  • 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 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 Menginstal Visual Basic 6.0 Hello Teman Semua! Pada kesempatan kali ini, admin akan membahas tentang cara menginstal Visual Basic 6.0. Visual Basic 6.0 merupakan bahasa pemrograman yang dirilis pada tahun 1998 oleh Microsoft. Bahasa…
  • Cara Instal Python Hello Teman Semua! Apakah kamu ingin mempelajari bahasa pemrograman Python? Python adalah bahasa pemrograman yang sangat populer karena kemampuannya yang sangat fleksibel dan mudah dipelajari. Dalam artikel ini, kita akan…
  • Cara Instal Ulang Notebook Acer Hello Teman Semua, terkadang kita mengalami masalah dengan notebook Acer kita yang menyebabkan kita harus melakukan instal ulang sistem operasi. Nah, pada artikel kali ini admin akan memberikan tips dan…
  • 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.…
  • Cara Melihat Kata Sandi IG yang Lupa Tanpa Aplikasi… Vpn.co.id - Cara melihat kata sandi IG yang lupa tanpa aplikasi dengan mudah bisa anda kerjakan dengan mempraktekan panduan lengkap di bawah ini. Kata sandi (password) adalah salah satu komponen…
  • Cara Install Kali Linux Hello Teman Semua, kali ini admin akan memberikan tutorial tentang cara install Kali Linux. Sebelum kita mulai, pastikan kamu sudah mempersiapkan beberapa hal yang dibutuhkan seperti laptop atau komputer, flashdisk,…
  • 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 kunci cell di excel Hello Teman Semua! Apa kalian sering mengalami masalah saat bekerja dengan Excel? Salah satu masalah yang sering terjadi adalah ketika kita ingin mengunci sel atau cell di Excel agar tidak…
  • Cara Instal Ulang Windows XP Hello Teman Semua, apakah kamu membutuhkan panduan cara instal ulang Windows XP? Jika iya, kamu berada di artikel yang tepat! Dalam artikel ini, admin akan memberikan panduan langkah-demi-langkah yang mudah…