Bootstrapt Chapter 6 - Membuat Pesan Alert Dengan Bootstrap

MEMBUAT PESAN ALERT DENGAN BOOTSTRAP
Satu lagi kelebihan penggunaan Bootssrap yang akan dibahas pada tutorial kali ini adalah Bootstrap bisa Membuat Pesan Alert yang responsive dan keren.

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 ini dijelaskan tentang penggunaan class alert pada Bootstrap.

• 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 MEMBUAT PESAN ALERT DENGAN BOOTSTRAP
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.

<gambar>

Dapat dilihat pada contoh diatas, Pesan Alert Bootstrap sudah jadi. Tetapi sepertinya masih ada yang kurang. Akan lebih bagus jika kita tambahkan tombol silang (x) alias close pada pesan alert sehingga jika tombol silang diklik maka pesan alert akan hilang.

MEMBUAT TOMBOL CLOSE PADA PESAN ALERT BOOTSTRAP
Perhatikan contoh berikut untuk membuat tombol close alert Bootstrap



<gambar>


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">&times;</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">

Sekian Tutorial kali ini jika ada pertanyaan silahkan berikan komentar dan apabila tulisan saya ada salahnya mohon maaf. Sekian Terima Kasih

REFERENSI : Malas Ngoding