HASANONTA - Pesan peringatan sangat penting dalam sebuah web, contohnya saat mengkonfirmasi berhasilnya login/ register. Bootstrap sendiri telah menyadiakan class khusus untuk membuat pesan alert yang keren dan responsive. Cara membuatnya sendiri cukup mudah, kita tinggal hanya harus memasukkan class-class dari Bootstrap. Ada beberapa jenis alert dalam Bootstrap berdasarkab kegunaannya diantaranya :
- 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
Cara memasukkan class-class tadi kita hanya harus membuat element <div> dan memasukkan class tadi kedalamnya. Contoh :
<!DOCTYPE html> <html> <head> <title>HasanOnta</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> </head> <body> <div class="container"> <h1 style="text-align: center; font-family: raleway">Membuat Pesan Peringatan BOOTSTRAP</h1> <div class="alert alert-success">Pesan Alert Success</div> <div class="alert alert-info">Pesan Alert Info</div> <div class="alert alert-warning">Pesan Alert Warning!</div> <div class="alert alert-danger">Pesan Alert Danger !</div> </div> </body> </html>
Output :
Selanjutnya kita akan menambahkan tombol close yang berfungsi untuk menghilangkan pesan saat di-klik. Contoh :
<!DOCTYPE html> <html> <head> <title>HasanOnta</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> </head> <body> <div class="container"> <h1 style="text-align: center; font-family: raleway">Membuat Pesan Peringatan BOOTSTRAP</center></h1> <div class="alert alert-success fade in"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>Pesan Alert Success</div> <div class="alert alert-info fade in"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>Pesan Alert Info</div> <div class="alert alert-warning fade in"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>Pesan Alert Warning !</div> <div class="alert alert-danger fade in"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>Pesan Alert Danger !</div> </div> </body> </html>
Output :
Perhatikan pada contoh diatas. Sudah terdapat tombol close untuk menghapus atau menutup pesan alert. Untuk membuat tombol close pada pesan alert tambahkan
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>Sedikit tambaha lagi yang harus diperhatikan. Kita bisa memberi efek pesan alert ditutup. Yaitu dengan menambahkan class "fade in" pada element div. Efek fade ini merupakan efek menutup pesan alert dengan efek memudar.
<div class="alert alert-success fade in">
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Tidak ada komentar:
Posting Komentar