Belajar Bootstrap Part 6 : Membuat Pesan Alert Dengan Bootstrap
MEMBUAT PESAN ALERT DENGAN BOOTSTRAP
Satu lagi kelebihan penggunaan Bootssrap yang akan dibahas pada tutorial kali ini adalah Bootstrap bisa Membuat Pesan Alert yang responsive dan keren.
Bootstrap menyediakan class khusus untuk membuat pesan alert dengan sangat mudah dan pastinya bagus. Dibuktikan dengan kemudahan penggunaan Bootstrap yang hanya tinggal menambahkan nama - nama class yang sudah disediakan oleh Bootstrap. Untuk membuat pesan alert caranya cukup mudah, hanya dengan menambahkan class " alert " untuk mendefinisikan penggunaan alert Bootstrap. Selanjutnya tambahkan satu class lagi untuk menentukan jenis alert apa yang digunakan. alert-success, alert-danger, alert-info dan alert-warning. Berikut ini dijelaskan tentang penggunaan class alert pada Bootstrap.
- alert-success
Digunakan untuk membuat pesan alert berwarna hijau, Biasanya digunakan untuk membuat pesan sukses - alert-info
Digunakan untuk membuat pesan alert berwarna biru, Biasanya digunakan untuk membuat pesan informasi - alert-warning
class alert-warning digunakan untuk membuat pesan alert berwarna kuning, Biasanya digunakan untuk membuat pesan yang berupa peringatan - alert-danger
class-danger digunakan untuk membuat pesan alert yang berwarna merah, biasanya digunakan untuk membuat pesan gagal
Untuk membuat pesan alert dengan Bootstrap caranya sangat mudah, buat sebuah element <div> yang berisi pesan peringatan alert yang ingin dibuat. Kemudian pada tag pembuka <div> berikan class "alert" dan satu lagi gunakan class alert seperti penjelasan diatas. Bisa menggunakan alert-success atau alert-danger atau yang lain sesuai keinginan sobat. Berikut contoh penggunaanya.
<!DOCTYPE html>
<html>
<head>
<title>Bootstarp Part 6 : Membuat Pesan Alert</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h1 style="text-align: center; font-family: raleway">Membuat Pesan Alert Dengan Bootstrap<br>
<center>www.script-kiddies.org</center></h1>
<div class="alert alert-success">Pesan Alert Sukses</div>
<div class="alert alert-info">Pesan Alert Info</div>
<div class="alert alert-warning">Pesan Alert Peringatan</div>
<div class="alert alert-danger">Pesan Alert Berbahaya</div>
</div>
</body>
</html>
Dapat dilihat pada contoh diatas, Pesan Alert Bootstrap sudah jadi. Tetapi sepertinya masih ada yang kurang. Akan lebih bagus jika kita tambahkan tombol silang (x) alias close pada pesan alert sehingga jika tombol silang diklik maka pesan alert akan hilang.MEMBUAT TOMBOL CLOSE PADA PESAN ALERT BOOTSTRAP
Perhatikan contoh berikut untuk membuat tombol close alert Bootstrap
<!DOCTYPE html>
<html>
<head>
<title>Bootstarp Part 6 : Membuat Pesan Alert</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h1 style="text-align: center; font-family: raleway">Membuat Pesan Alert Dengan Bootstrap<br>
<center>www.script-kiddies.org</center></h1>
<div class="alert alert-success fade in"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>Pesan Alert Sukses</div>
<div class="alert alert-info fade in"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>Pesan Alert Info</div>
<div class="alert alert-warning fade in"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>Pesan Alert Peringatan</div>
<div class="alert alert-danger fade in"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>Pesan Alert Berbahaya</div>
</div>
</body>
</html>
Perhatikan pada contoh diatas. Sudah terdapat tombol close untuk menghapus atau menutup pesan alert. Untuk membuat tombol close pada pesan alert tambahkan
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>Sedikit tambaha lagi yang harus diperhatikan. Kita bisa memberi efek pesan alert ditutup. Yaitu dengan menambahkan class "fade in" pada element div. Efek fade ini merupakan efek menutup pesan alert dengan efek memudar.
<div class="alert alert-success fade in">Sekian Tutorial kali ini jika ada pertanyaan silahkan berikan komentar dan apabila tulisan saya ada salahnya mohon maaf. Sekian Terima Kasih
REFERENSI : Malas Ngoding
TUTORIAL BOOTSTRAP DASAR LAINYA :
- Bootstrap Part 1 : Mengenal Dan Cara Menggunakan Bootstrap
- Bootstrap Part 2 : Membuat Tabel Dengan Bootstrap
- Bootstrap Part 3 : Mengatur Tampilan Gambar Bootstrap
- Bootstrap Part 4 : Cara Membuat Tombol Dengan Bootstrap
- Bootstrap Part 5 : Membuat Jumbotron Dengan Bootstrap
- Bootstrap Part 6 : Membuat Pesan Alert Dengan Bootstrap
- Bootstrap Part 7 : Membuat Icon Bootstrap
- Bootstrap Part 8 : Membuat Pagination dan Breadcrumb Bootstrap
- Bootstrap Part 9 : Membuat List Dengan Bootstrap
- Bootstrap Part 10 : Membuat Panel Dengan Bootstrap
- Bootstrap Part 11 : Membuat Navigasi Tabs Dan Pils
- Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
- Bootstrap Part 13 : Membuat Form Dengan Bootstrap
- Bootstrap Part 14 : Membuat Carousel / Slideshow Dengan Bootstrap
- Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
- Bootstrap Part 16 : Mengenal Grid System Bootstrap
Tidak ada komentar :
Posting Komentar