Bootstrap 3 Alert - Tutorial Bootstrap Indonesia
Membuat Pesan Peringatan dengan Bootstrap 3
Kotak peringatan sering dipakai untuk menampilkan sebuah isu menyerupai pesan peringatan, pesan kesalahan atau sebuah konfirmasi.
Dengan Bootstrap kita sanggup dengan gampang menciptakan kotak pesan peringatan yang elegan untuk banyak sekali keperluan. kita juga sanggup menambahkan tombol epilog (close) jikalau diperlukan
Bootstrap alert tidak hanya sanggup dipakai untuk pesan peringatan saja, tapi untuk penggunaan lainnya juga sangat elok untuk digunakan.
Bootstrap 3 Alert
Cara penggunaan Bootstrap 3 Alert
Bootstrap Alert memakai 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 menciptakan kotak/box sukses atau konfirmasi (atau sesuai keperluan).alert-info: Untuk menciptakan kotak/box isu (atau sesuai keperluan).alert-warning: Untuk menciptakan kotak/box peringatan (atau sesuai keperluan).alert-danger: Untuk menciptakan 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, lalu buat html baru, sanggup memakai 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 jikalau digunakan, akan menghapus element kotak alert bukan memberi tampilan tersimpan/hidden atau dampak (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 memperlihatkan dampak animasi memudar pada ketika 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 dampak 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>