Alert merupakan kata yang tidak asing bagi kita bagi yang bermain dalam dunia web dan sejenisnya, namun pasti ada diantara kita yang belum mengetahui alert tersebut, disini saya akan menyinggung sedikit apa itu alert dan fungsinya.
Alert adalah salah satu untuk memberi peringatan atau notifikasi kepada user saat user melakukkan interaksi terhadap web yang kita miliki, misalnya saat user melakukkan login kemudian salah memasukkan nama atau email maka akan muncul pemberitahuan tetntang kesalahan tersebut. Alert juga berfungsi sebagai user friendly salah satunya agar user tidak mengalami kebingungan mengenai masalah tersebut.
Untuk implementasi kodenya seperti dibawah ini....
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Jumbotron</title>
<!-- Bootstrap Css -->
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body style="background:#eee;">
<div class="container" style="margin-top:20px;">
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Danger Alert</strong> Just an example brooo .....
</div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning Alert</strong> Just an example brooo .....
</div>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success Alert</strong> Just an example brooo .....
</div>
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Info Alert</strong> Just an example brooo .....
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
Perlu diperhatikan dari kode diatas, dalam elemen <button> harus menggunakan data attribute data-dismiss="alert", karena data attribute tersebutlah yang akan memeberikan aksi untuk menutup alert tersebut ketika kita press tombol (x).
*Untuk dapat mengaktifkan library bootstrap harus disertakan jquaery untuk dapat merasakan hasilnya... :D
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
Hasilnya akan seperti dibawah ini...
Silahkan untuk dicoba dan anda dapat mengkreasikan sesuai dengan keinginan dan selera anda.
Membuat Alert Dismissable Menggunakan Bootstrap
Reviewed by creativekiller
on
January 09, 2018
Rating:
Reviewed by creativekiller
on
January 09, 2018
Rating:
No comments: