Hai kembali lagi bersama dosenit.com, Setelah sebelumnya kita membahas mengenai warna dan jumbotron dari bootstrap. Maka kali ini kita akan membahas mengenai fitur lain yang disediakan oleh bootstrap ketika kita ingin memberi tahu sesuatu kepada pembaca. Apakah itu ? benar sekali Alert. Alert atau Peringatan digunakan untuk memeberi tahu pembaca mengenai suatu hal yang sekiranya penting dengan suatu pesan pop up.
Section Artikel
Basic Alert Bootstrap
Alert atau peringatan pada bootstrap dibuat dengan menggunakan class .alert .dengan diikuti kontektual class atau class pengikut untuk mendefinisikan tipe dari alert atau pesan yang digunakan. Untuk lebih jelasnya silahkan teman – teman perhatikan tabel daftar class alert bootstrap dibawah:
| Class | definisi |
|---|---|
| .alert alert-success | Menandakan suatu aksi yang berhasil atau aksi yang positif |
| .alert alert-info | Menandakan hal informatif serta menunjukan suatu perubahan |
| .alert alert-warning | Menandakan suatu peringatan yang memerlukan perhatian dari user |
| .alert alert-danger | Menandakan sesuatu yang berbahaya serta aksi yang negatif (seperti kegagalan input data) |
| .alert alert-primary | Mengindikasikan aksi yang penting |
| .alert alert-secondary | Menunjukan suatu tindakan yang bersifat kurang penting |
| .alert alert-light | Peringatan tentang suatu hal dengan warna area abu abu terang |
| .alert alert-dark | Peringatan tentang suatu hal dengan warna area abu abu tua |
JIka masih belum jelas teman – teman bisa perhatikan script program dibawah :
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="alert alert-success"> <strong>Success!</strong> Menandakan aksi positif. </div> <div class="alert alert-info"> <strong>Info!</strong> Menandakan hal informatif. </div> <div class="alert alert-warning"> <strong>Warning!</strong> menandakan suatu peringatan. </div> <div class="alert alert-danger"> <strong>Danger!</strong> menandakan suatu yang berbahaya dan perlu perhatian </div> <div class="alert alert-primary"> <strong>Primary!</strong> Menandakan aksi yang penting. </div> <div class="alert alert-secondary"> <strong>Secondary!</strong> menandakan suatu informasi yang dirasa tidak terlalu penting. </div> <div class="alert alert-dark"> <strong>Dark!</strong> peringatan yang akan berwarna abu abu tua (background nya). </div> <div class="alert alert-light"> <strong>Light!</strong> peringatan yang akan berwarna abu abu terang (background nya). </div> </div> </body> </html>
Dari contoh script diatas dapat diketahui bahwa class alert bootstrap diletakkan dalam tag <div>. Kenapa saya lakukan demikian ? karena tag <div> sendiri merupakan tag yang digunakan untuk menandai suatu area sehingga sangat cocok dikombinasikan dengan class alert.
Alert link
Sama hal nya dengan tutorial button bootstrap kemarin, kita juga dapat menyisipkan link pada alert yang telah kita buat. Caranya mudah yaitu dengan menambahkan class .alert-link dalam tag <a>, yang tentunya dua hal ini berada dalam class alert. Masih bingung tentang penjelasan ini ? Untuk lebih jelasnya teman – teman bisa lihat pada contoh dibawah :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alert Link</h2>
<div class="alert alert-success">
<strong>Success!</strong> Tahap selanjutnya, silahkan <a href="#" class="alert-link">Baca pesan ini</a>.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Anda wajib <a href="#" class="alert-link">membaca pesan ini</a>.
</div>
</div>
</body>
</html>
Untuk mengganti jenis alert yang ingin di isi alert link maka tinggal mengganti <div class=”alert alert-x”>, silahkan teman teman ganti huruf X dengan class dasar alert.
Closing Alert
Pada tahap sebelumnya teman – teman sudah berhasil membuat alert dasar dan juga alert disertai link didalamnya. Nah bagimana cara untuk menutup pesan alert tersebut ? untuk melakukan hal ini teman – teman hanya tinggal menambahkan class .alert-dismissible pada class alert dasar. Kemudian teman teman membuat sebuah tombol yang didalam nya mengandung class class="close" dan data-dismiss="alert".
Bingung ? lebih jelasnya lihat script program dibawah:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Selamat anda berhasil membuat alert.
</div>
<div class="alert alert-info alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Info!</strong> klik tanda silang di pojok atas untuk menghilangkan alert.
</div>
</div>
</body>
</html>
Sedikit info untuk teman – teman, × adalah suatu entitas untuk membuat simbol atau ikon tutup (biasanya huruf x) pada pemrograman html .
Animasi Alert
Setelah melihat cara untuk menutup alert apakah bisa kita menambahkan sedikit animasi pada closing alert yang kita buat tadi ? jawabannya bisa dengan menambahkan class .fade dan .show bersamaan saat menambahkan class alert, sehingga akan menimbulkan efek fading atau perlahan-lahan hilang pada alert setelah tombol close di tekan.
contoh nya adalahg seperti dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success alert-dismissible fade show"> <!-- ditambahkan disini ya -->
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Anda adalah salah satu orang yang beruntung.
</div>
<div class="alert alert-info alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Info!</strong> mengirnformasikan bahwa anda adalah orang yang beruntung hari ini.
</div>
</div>
</body>
</html>
Alert Auto Close (bonus)
ada bonus nih untuk teman – teman bagaimana membuat Alert bootstrap auto close. Yaitu dengan menambahkan javascript. Contohnya dibawah ya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<div class="product-options">
<a id="myWish" href="javascript:;" class="btn btn-mini">Klik untuk melihat alert </a>
</div>
<div class="alert alert-success alert-dismissible" id="success-alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Selamat anda berhasil membuat alert.
</div>
</div>
<br><br>
<p>Alert akan otomatis menghilang setelah diklik<p>
</body>
<script>
$(document).ready(function() {
$("#success-alert").hide();
$("#myWish").click(function showAlert() {
$("#success-alert").fadeTo(1000, 500).slideUp(500, function() {
$("#success-alert").slideUp(500);
});
});
});
</script>
</html>Cara kerjanya:
ketika tulisan di klik akan. akan memanggil javascript dengan id yang sesuai yaitu myWish. Pada javascript ditambah tanda # yang menunjukkan bahwa yang kita gunakan sebagai penanda element adalah id dari elemn tersebut.
fade(1000,500) merupakan perintah untuk secara perlahan menghilang dengan waktu satu sekon (1000ms) dan opacity 500ms.
Sekian sedikit tutorial Alert bootstrap dari saya . Teman teman bisa melakukan modifikasi sesuai dengan kebutuhan teman – teman seperti menggabungkan dengan modal serta javascript lainnya.
