Muhammad Aqshol Rifanza - Kali ini saya akan berbagi tentang alert pada bootstrap, ini juga salah satu keunggulan bootstrap.
Pengertian
Alert adalah sebuah pesan ketika kita mengeklik sebuah tombol, ada alert sukses, batal, gagal dan lain sebagainya. Bootstrap menyediakan class khusus untuk membuat pesan alert dengan sangat mudah dan pastinya bagus. Dibuktikan dengan kemudahan penggunaan Bootstrap yang hanya tinggal menambahkan nama - nama class yang sudah disediakan oleh Bootstrap. Untuk membuat pesan alert caranya cukup mudah, hanya dengan menambahkan class " alert " untuk mendefinisikan penggunaan alert Bootstrap. Selanjutnya tambahkan satu class lagi untuk menentukan jenis alert apa yang digunakan. alert-success, alert-danger, alert-info dan alert-warning. Berikut beberapa jenis pesan alert :
- alert-success Digunakan untuk membuat pesan alert berwarna hijau, Biasanya digunakan untuk membuat pesan sukses
- alert-info Digunakan untuk membuat pesan alert berwarna biru, Biasanya digunakan untuk membuat pesan informasi
- alert-warning class alert-warning digunakan untuk membuat pesan alert berwarna kuning, Biasanya digunakan untuk membuat pesan yang berupa peringatan
- alert-danger class-danger digunakan untuk membuat pesan alert yang berwarna merah, biasanya digunakan untuk membuat pesan gagal.
Proses dan Tahapan Membuat Alert
Untuk membuat pesan alert dengan Bootstrap caranya sangat mudah, buat sebuah element <div> yang berisi pesan peringatan alert yang ingin dibuat. Kemudian pada tag pembuka <div> berikan class "alert" dan satu lagi gunakan class alert seperti penjelasan diatas. Bisa menggunakan alert-success atau alert-danger atau yang lain sesuai keinginan sobat. Berikut contoh penggunaanya.
Dilihat pada contoh diatas, Pesan Alert Bootstrap sudah jadi. Tetapi sepertinya masih ada yang kurang. Akan lebih bagus jika kita tambahkan tombol silang (x) atau close pada pesan alert sehingga jika tombol silang diklik maka pesan alert akan hilang.
Membuat Tombol Close (x) pada Bootstrap
Perhatikan gabmar diatas sudah ada icon close (x) untuk mengeclose atau menutup pesan alert.
Referensi
- http://www.script-kiddies.org
- http://www.malasngoding.com
- http://www.w3school.com
0 comments:
Post a Comment