Tutorial Bootstrap: Membuat Kotak Pemberitahuan dengan Twitter Bootstrap 3

0 Comments


Di tulisan kali ini, kita akan membahas tentang bagaimana cara membuat kotak pemberitahuan dengan memanfaatkan class-class yang ada pada Bootstrap 3. Kotak pemberitahuan atau biasa disebut alert box atau alert message sangat sering digunakan untuk keperluan desain web yang baik agar lebih informatif dan interaktif.

Membuat Alert Message dengan Bootstrap 3

Berikut ini adalah penggunaan alert message box dengan Bootstrap 3.

Warning Alert dengan Bootstrap 3

Warning alert adalah kotak pemberitahuan yang bersifat memberi peringatan kepada user tentang sesuatu. Dengan class alert-warning di Bootstrap 3 anda bisa membuat kotak peringatan dengan mudah. Cara pengguanaannya:
<div class="alert alert-warning">
 <a herf="#" class="close" data-dismiss="alert">&times;</a>
 <strong>Peringatan!</strong> Terjadi masalah dengan koneksi.
</div>

Hasil yang ditampilkan
alert warning dengan bootstrap 3
class .alert-warning di Bootstrap 3

Error Alert dengan Bootstrap 3

Jenis alert kedua yang sering digunakan adalah error alert. Di Bootstrap 3, class yang meng-handle fungsi tampilan ini adalah .alert-danger. Class ini akan menampilkan kotak berwarna merah. Penggunaannya:
<div class="alert alert-danger">
  <a herf="#" class="close" data-dismiss="alert">&times;</a>
  <strong>Error!</strong> Email yang anda masukkan tidak valid
 </div>

Hasil yang ditampilkan
alert danger dengan bootstrap 3
class .alert-danger dengan bootstrap 3

Success Alert dengan Bootstrap 3

Baca Juga : Mempercantik tampilan Tombol dengan bootstrap 3

Success alert, atau biasa disebut dengan confirm alert akan menampilkan kotak pemberitahuan berwarna hijau. Contoh penggunaannya :
<div class="alert alert-success">
  <a herf="#" class="close" data-dismiss="alert">&times;</a>
  <strong>Berhasil!</strong> Data berhasil diperbarui.
 </div>
Hasil yang ditampilkan
Membuat kotak alert success dengan bootstrap 3
class .alert-success di Bootstrap 3

Information alert dengan Bootstrap 3

Jenis alert yang keempat adalah information alert. Dengan class .alert-info anda bisa membuat kotak pemberitahuan berwarna biru. Penggunaannya adalah sebagai berikut:
<div class="alert alert-info">
  <a herf="#" class="close" data-dismiss="alert">&times;</a>
  <strong>Perhatian!</strong> Mohon baca terlebih dahulu syarat dan ketentuan.
 </div>
Hasil yang ditampilkan
Penggunaan alert info di bootstrap 3
class .alert-info di Bootstrap 3

Selain itu, anda menggunakan Javascript untuk melakukan dismiss alert. Untuk pembahasan yang ini, di tulisan berikutnya ya..! :)

Baca Tulisan Lainnya Juga :)

0 komentar: