Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Membuat Indikator Pesan Menggunakan Bootstrap.

Teman-teman pasti pernah melihat indikator berbentuk numerik yang terletak di sebelah icon email atau update yang menjelaskan bahwa ada berapa email yang masuk atau artikel yang sudah di update pada suatu website. Dalam tutorial kali ini saya hanya akan membahas cara membuat desainnya saja tanpa terintegrasi dengan database.

Sekarang saya akan mencoba membuatnya dengan menggunakan framework bootstrap,karena di bootstrap sudah menyediakan suatu class untuk membuat indicator tersebut. Berikut tutorial singkat tentang Cara Membuat Indikator Pesan Menggunakan Bootstrap:

– Pertama teman-teman download framework bootstrapnya dulu.

– Kedua buka text editor teman-teman lalu buka file bootstrap yang telah kita download dan buat file index.html dengan cara mengcopy default html yang sudah ada di website bootstrap, jangan lupa save di dalam folder bootstrap teman-teman

– Ketiga kita buat navigasi dulu karena pada tutorial kali ini kita akan membuat indikator email yang belum di baca. Berikut kode html-nya:

 

– Keempat kita buat tag <span> di dalam tag <li> yang akan kita isi dengan class badge. Class badge pada bootstrap berfungsi untuk membuat indikator. Berikut kode html-nya:

– Hasilnya akan menjadi seperti ini.

Cara Membuat Indikator Pesan Menggunakan Bootstrap

 

Bagaimana teman-teman cukup mudahkan Membuat Indikator Pesan Menggunakan Bootstrap. Karena di bootstrap kita tinggal memasukan class saja maka akan terbentuk lah indikator yang kita inginkan.

Sekian artikel saya hari ini tentang Cara Membuat Indikator Pesan Menggunakan Bootstrap. Sehat selalu ya teman-teman, selamat mencoba.