Assalamu alaikum Wr Wb.
Dalam pertemuan kali ini, saya akan membahas mengenai bootstrap alerts.
Pengertian
Bootstrap menyediakan cara mudah untuk membuat pesan peringatan yang telah ditetapkan.
Pembahasan
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../Bootstrap/css/bootstrap.min.css">
<script src="../../Bootstrap/js/jquery.min.js"></script>
<script src="../../Bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Sukses!</strong> kotak peringatan ini bisa menunjukkan tindakan berhasil atau positif.
</div>
<div class="alert alert-info">
<strong>Informasi!</strong> kotak peringatan ini bisa menunjukkan perubahan informatif netral atau tindakan.
</div>
<div class="alert alert-warning">
<strong>Peringatan!</strong> kotak peringatan ini dapat menunjukkan peringatan yang mungkin memerlukan perhatian.
</div>
<div class="alert alert-danger">
<strong>Bahaya!</strong> kotak peringatan ini dapat menunjukkan tindakan yang berbahaya atau berpotensi negatif.
</div>
</div>
</body>
</html>
Tampilannya seperti ini:
Link Alert
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../Bootstrap/css/bootstrap.min.css">
<script src="../../Bootstrap/js/jquery.min.js"></script>
<script src="../../Bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Link Waspada</h2>
<p>Tambahkan kelas peringatan-link ke link apapun di dalam kotak peringatan untuk membuat "pencocokan link berwarna".</p>
<div class="alert alert-success">
<strong>Sukses!</strong>Kamu seharusnya<a href="#" class="alert-link">membaca pesan</a>.
</div>
<div class="alert alert-info">
<strong>Informasi!</strong> Kamu seharusnya <a href="#" class="alert-link">membaca pesan</a>.
</div>
<div class="alert alert-warning">
<strong>Peringatan!</strong> Kamu seharusnya<a href="#" class="alert-link">membaca pesan</a>.
</div>
<div class="alert alert-danger">
<strong>Bahaya!</strong> Kamu seharusnya<a href="#" class="alert-link">membaca pesan</a>.
</div>
</div>
</body>
</html>
Tampilannya seperti ini:
Alert Close
Untuk menutup pesan peringatan, tambahkan class .alert-dismissable untuk wadah peringatan. Kemudian tambahkan class .close dan data-dismiss="alert" unutuk link atau elemen tombol.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../Bootstrap/css/bootstrap.min.css">
<script src="../../Bootstrap/js/jquery.min.js"></script>
<script src="../../Bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Waspada</h2>
<p>The elemen dengan class = "close" dan data-dismiss = "alert" digunakan untuk menutup kotak peringatan.</p>
<p>Kelas peringatan-Dihapus menambahkan beberapa padding ekstra untuk tombol tutup.</p>
<div class="alert alert-success alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Sukses!</strong> kotak peringatan ini bisa menunjukkan tindakan berhasil atau positif.
</div>
<div class="alert alert-info alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Informasi!</strong> kotak peringatan ini bisa menunjukkan perubahan informatif netral atau tindakan.
</div>
<div class="alert alert-warning alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Peringatan!</strong> kotak peringatan ini dapat menunjukkan peringatan yang mungkin memerlukan perhatian.
</div>
<div class="alert alert-danger alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Bahaya!</strong> kotak peringatan ini dapat menunjukkan tindakan yang berbahaya atau berpotensi negatif.
</div>
</div>
</body>
</html>
Tampilannya seperti ini:
Animasi Alert
class .fade dan .id menambahkan efek memudar saat menutup pesan peringatan.
Contoh:
Tampilannya seperti ini:
Referensi
https://www.w3schools.com/bootstrap/bootstrap_alerts.asp
Sekian dan Terimakasih.
Wassalamu alaikum Wr Wb.
No comments:
Post a Comment