Assalamu'alaikum wr.wb
Kali ini saya akan berbagi Cara Membuat Alerts (Peringatan) dengan Bootstrap.
Bootstrap menyediakan cara mudah untuk membuat pesan peringatan yang telah ditetapkan:
- Success! Kotak peringatan ini menunjukkan tindakan berhasil atau positif.
- Info! Kotak peringatan ini menunjukkan perubahan informatif netral atau tindakan.
- Warning! Kotak peringatan ini menunjukkan peringatan yang mungkin memerlukan perhatian.
- Danger! Kotak peringatan ini menunjukkan tindakan yang berbahaya atau berpotensi negatif.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar 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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts (Peringatan)</h2>
<div class="alert alert-success">
<strong>Success!</strong> Kotak peringatan ini menunjukkan tindakan berhasil atau positif.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Kotak peringatan ini menunjukkan perubahan informatif netral atau tindakan.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Kotak peringatan ini menunjukkan peringatan yang mungkin memerlukan perhatian.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Danger! Kotak peringatan ini menunjukkan tindakan yang berbahaya atau berpotensi negatif.
</div>
</div>
</body>
</html>
Link Alert (Peringatan)
Tambahkan class .alert-link untuk link apapun dalam bentuk dalam kotak peringatan untuk membuat "percocokan link bewarna".Cobntoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar 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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Link Alert (Peringatan)</h2>
<p>Tambahkan class .alert-link untuk link apapun dalam bentuk dalam kotak peringatan untuk membuat "percocokan link bewarna".</p>
<div class="alert alert-success">
<strong>Berhasil!</strong> Anda harus <a href="#" class="alert-link">membaca pesan ini</a>.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Anda harus <a href="#" class="alert-link">membaca pesan ini</a>.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Anda harus <a href="#" class="alert-link">membaca pesan ini</a>.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Anda harus <a href="#" class="alert-link">membaca pesan ini</a>.
</div>
</div>
</body>
</html>
Penutup Alert
Untuk menutup pesan peringatan, tambahkan class .alert-dismissible untuk wadah peringatan. Kemudian tambahkan class='close' dan data-dissmis='alert' untuk link atau elemen tombol (ketika Anda klik ini kotak peringatan akan hilang).Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar 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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<p>Elemen dengan class='close' dan data-dissmis='alert'</p>
<p>Class .alert-dissmisible menambahkan beberapa padding extra untuk tombol tutup</p>
<div class="alert alert-success alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</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>Info!</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>Warning!</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>Danger!</strong> Kotak peringatan ini dapat menunjukkan tindakan yang berbahaya atau berpotensi negatif.
</div>
</div>
</body>
</html>
Untuk membantu meningkatkan aksesibilitas untuk orang yang menggunakan pembaca layar, Anda harus mencakup atribut aria-label = "close", saat membuat tombol tutu. (×) adalah sebuah entitas HTML yang merupakan ikon yang lebih disukai untuk tombol close, bukan huruf "x".
Animasi Alert
Class .fade dan .in menambhakan efek memudar saat menutup pesan peringatan.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar 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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Animasi Alert</h2>
<p>Class .fade dan .in menambhakan efek memudar saat menutup pesan peringatan.</p>
<div class="alert alert-success alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Kotak peringatan ini bisa menunjukkan tindakan berhasil atau positif.
</div>
<div class="alert alert-info alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Info!</strong> Kotak peringatan ini bisa menunjukkan perubahan informatif netral atau tindakan.
</div>
<div class="alert alert-warning alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Warning!</strong> Kotak peringatan ini dapat menunjukkan peringatan yang mungkin memerlukan perhatian.
</div>
<div class="alert alert-danger alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Danger!</strong> Kotak peringatan ini dapat menunjukkan tindakan yang berbahaya atau berpotensi negatif.
</div>
</div>
</body>
</html>
Sekian Cara Membuat Alerts (Peringatan) dengan Bootstrap.
Semoga Bermanfaat...!!!
Referensi: www.w3schools.com
Wassalamu'alaikum wr.wb
EmoticonEmoticon