Membuat Pesan Peringatan dengan Bootstrap 3
Kotak peringatan sering digunakan untuk menampilkan sebuah informasi seperti pesan peringatan, pesan kesalahan atau sebuah konfirmasi.
Dengan Bootstrap kita dapat dengan mudah membuat kotak pesan peringatan yang elegan untuk berbagai keperluan. kita juga dapat menambahkan tombol penutup (close) jika diperlukan
Bootstrap alert tidak hanya bisa digunakan untuk pesan peringatan saja, tapi untuk penggunaan lainnya juga sangat bagus untuk digunakan.
Bootstrap 3 Alert
Cara penggunaan Bootstrap 3 Alert
Bootstrap Alert menggunakan nama class
.alert sebagai nama class utamanya, yang diikuti nama class .alert-success, .alert-info, .alert-warning, dan .alert-danger sebagai penentu tipe alert..alert-success: Untuk membuat kotak/box sukses atau konfirmasi (atau sesuai keperluan).alert-info: Untuk membuat kotak/box informasi (atau sesuai keperluan).alert-warning: Untuk membuat kotak/box peringatan (atau sesuai keperluan).alert-danger: Untuk membuat kotak/box kesalahan (atau sesuai keperluan)
Contoh :
<div class="alert alert-success">
<strong>Alert success :</strong> Lorem ipsum dolor sit amet...
</div>
<div class="alert alert-info">
<strong>Alert Info :</strong> Lorem ipsum dolor sit amet...
</div>
<div class="alert alert-warning">
<strong>Alert warning :</strong> Lorem ipsum dolor sit amet...
</div>
<div class="alert alert-danger">
<strong>Alert danger :</strong> Lorem ipsum dolor sit amet...
</div>
Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Bootstrap 3 Alert</h2> <div class="alert alert-success"> <strong>Sukses :</strong> Lorem ipsum dolor sit amet... </div> <div class="alert alert-info"> <strong>Tips :</strong> Lorem ipsum dolor sit amet... </div> <div class="alert alert-warning"> <strong>Peringatan :</strong> Lorem ipsum dolor sit amet... </div> <div class="alert alert-danger"> <strong>Kesalahan :</strong> Lorem ipsum dolor sit amet... </div> </div> </body> </html>
Bootstrap 3 Alert Links
Digunakan untuk element HTML
<a> yang berada didalam kotak alert, tambahkan .alert-link pada element <a>Contoh :
<div class="alert alert-success">
<strong>Sukses :</strong> silahkan Kunjungi
<a class="alert-link" href="#">Artikel ini</a>
</div>
<div class="alert alert-info">
<strong>Tips :</strong> silahkan Kunjungi
<a class="alert-link" href="#">Artikel ini</a>
</div>
<div class="alert alert-warning">
<strong>Peringatan :</strong> silahkan Kunjungi
<a class="alert-link" href="#">Artikel ini</a>
</div>
<div class="alert alert-danger">
<strong>Kesalahan :</strong> silahkan Kunjungi
<a class="alert-link" href="#">Artikel ini</a>
</div>
Hasil :
Bootstrap 3 Alert Close
Tekan tombol Refresh untuk mengulang hasil.
Untuk menutup pesan peringatan tambahkan class
.alert-dismissable pada element pembungkus alert, kemudian buat html baru, bisa menggunakan element span, a, button atau yang lainnya sesuai keperluan, tambahkan class .close serta tambahkan attribute data-dismiss="alert" pada element HTML tersebut.
Catatan : Alert Close jika digunakan, akan menghapus element kotak alert bukan memberi tampilan tersimpan/hidden atau efek (display:none).
Contoh :
<div class="alert alert-info alert-dismissable">
<span class="close" data-dismiss="alert">×</span>
<strong>Tekan</strong> Tanda (x) yang berada di sebalah kanan alert ini
</div>
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--incluade untuk Bootstrap 3 --> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>.alert-dismissable</code></h2> <div class="alert alert-info alert-dismissable"> <span class="close" data-dismiss="alert">×</span> <strong>Tekan</strong> Tanda (x) yang berada di sebalah kanan alert ini </div> <div class="alert alert-danger alert-dismissable"> <span class="close" data-dismiss="alert">×</span> <strong>Tekan</strong> Tanda (x) yang berada di sebalah kanan alert ini </div> <div class="alert alert-success alert-dismissable"> <span class="close" data-dismiss="alert">×</span> <strong>Tekan</strong> Tanda (x) yang berada di sebalah kanan alert ini </div> <div class="alert alert-warning alert-dismissable"> <span class="close" data-dismiss="alert">×</span> <strong>Tekan</strong> Tanda (x) yang berada di sebalah kanan alert ini </div> </div> </body> </html>
Bootstrap 3 Alert Efek
Untuk memberikan efek animasi memudar pada saat kotak/box Alert ditutup, tambahkan class
.fade dan .in pada container/pembungkus alert yang digunakan.Contoh :
<div class="alert alert-info alert-dismissable fade in">
<span class="close" data-dismiss="alert">×</span>
<strong>Tekan</strong> Tanda (x) yang berada di sebalah kanan alert ini
untuk menutup alert dengan efek memudar.
</div>
Hasil :
Tekan tombol Refresh untuk mengulang hasil.
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--incluade untuk Bootstrap 3 --> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>.alert-dismissable</code></h2> <div class="alert alert-info alert-dismissable fade in"> <span class="close" data-dismiss="alert">×</span> Menggunakan Efek </div> <div class="alert alert-danger alert-dismissable fade in"> <span class="close" data-dismiss="alert">×</span> Menggunakan Efek </div> <div class="alert alert-success alert-dismissable"> <span class="close" data-dismiss="alert">×</span> Tanpa Menggunakan Efek </div> <div class="alert alert-warning alert-dismissable"> <span class="close" data-dismiss="alert">×</span> Tanpa Menggunakan Efek </div> </div> </body> </html>
Posting Komentar