Bootstrap : Cara Membuat Alert Serta Menambahkan Icon Close Pada Bootstrap
Assalamu'alaikum Wr.Wb
Salam dan bahagia
Lalu bagaimana jika kita ingin menambahkan icon close pada pesan alert Tersebut? nah caranya cukup mudah kalian tinggal menambahkan tag Berikut :
Nah Jika Ingin ketika icon close memiliki efek kalian dapat menambahkan class "fade in" maka akan seperti ini :
Buka Dibrowser maka akan muncul seperti ini, dan dibagian sebelah kanan alert akan ada icon close
Salam dan bahagia
Pendahuluan
Pada kali ini saya akan membagikan sedikit tutorial nih bagaimana sih caranya membuat Pesan Alert pada Bootstrap, nah langsung saja dibaca dan dipahami serta dipraktikkan ya.
Latar Belakang
Ingin Lebih memahami tentang tag tag pada Bootstrap salah satunya adalah macam-macam tag pesan Alert.
Maksud Dan Tujuan
Agar Mengerti dan paham tentang tag-tag Pada Bootstrap Salah satunya adalah pembuatan Pesan Alert.
Alat Dan Bahan
Laptop.
Teks Editor.
Browser.
Jangka Waktu yang Dibutuhkan
30 Menit
Pembahasan atau Langka Kerja
Untuk membuat pesan alert pada Bootstrap caranya Cukup Mudah Yaitu Tinggal Kita menambahkan class Alert Pada Tag Div, Dan Tambahkan Satu Class lagi untuk Menentukan Jenis Alert apa yang akan Kita munculkan seperti alert-success, alert-danger dan lain-lain.
Nah Akan Saya Jelaskan Jenis-jenis Alert yang ada diBootstrap :
Pada kali ini saya akan membagikan sedikit tutorial nih bagaimana sih caranya membuat Pesan Alert pada Bootstrap, nah langsung saja dibaca dan dipahami serta dipraktikkan ya.
Latar Belakang
Ingin Lebih memahami tentang tag tag pada Bootstrap salah satunya adalah macam-macam tag pesan Alert.
Maksud Dan Tujuan
Agar Mengerti dan paham tentang tag-tag Pada Bootstrap Salah satunya adalah pembuatan Pesan Alert.
Alat Dan Bahan
Laptop.
Teks Editor.
Browser.
Jangka Waktu yang Dibutuhkan
30 Menit
Pembahasan atau Langka Kerja
Untuk membuat pesan alert pada Bootstrap caranya Cukup Mudah Yaitu Tinggal Kita menambahkan class Alert Pada Tag Div, Dan Tambahkan Satu Class lagi untuk Menentukan Jenis Alert apa yang akan Kita munculkan seperti alert-success, alert-danger dan lain-lain.
Nah Akan Saya Jelaskan Jenis-jenis Alert yang ada diBootstrap :
- alert-success
- alert-warning
- alert-info
- alert-danger
Nah macam-macam alert diatas memiliki kegunaan masing-masing yaitu :
>> Alert-success, pesan alert yang menampilkan warna hijau dan biasanya di gunakan untuk membuat pesan sukses.
>> Alert-warning, pesan alert yang menampilkan warna kuning dan biasanya di gunakan untuk membuat pesan yang berupa peringatan.
>> Alert-info, pesan alert yang menampilkan warna biru dan biasanya di gunakan untuk membuat pesan yang berupa informasi.
>> Alert-danger, pesan alert yang menampilkan warna merah dan biasanya pesan alert ini di gunakan untuk membuat pesan gagal.
Untuk membuat pesan alert caranya cukup mudah yaitu tinggal kita hanya membuat tag <div> setelah itu tambahkan class alert dan juga tambahkan satu class lagi untuk menentukan tipe alert mana yang akan digunakan contoh jika ingin membuat pesan alert bertipe peringatan, maka kita harus menambahkan class yang bertipe alert-warning dan lain sebagainya, untuk selengkapnya seperti ini :
Nah Dari Source code diatas sudah saya contohkan beberapa tag alert yang ada di Bootstrap untuk hasilnya akan seperti ini :
Lalu bagaimana jika kita ingin menambahkan icon close pada pesan alert Tersebut? nah caranya cukup mudah kalian tinggal menambahkan tag Berikut :
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
Nah Jika Ingin ketika icon close memiliki efek kalian dapat menambahkan class "fade in" maka akan seperti ini :
Nah Gimana? Mudah Bukan
Dengan adanya Pesan alert yang ada diBootstrap ini sangat memudahkan para programmer jika ingin membuat pesan alert yang memiliki kesan modern.
Sekian yang dapat saya sampaikan, mohon maaf bila ada kesalahan dalam penulisan maupun tatabahasa, sekian dan terima kasih.
Wassalamu'alaikum Wr.Wb
