Bootstrap Part 6 : Membuat Pesan Alert Dengan Bootstrap
Membuat Pesan Alert Dengan Bootstrap
Satu lagi kelebihan penggunaan bootstrap yang akan di bahas pada tutorial bootstrap part 6 : Membuat Pesan Alert dengan bootstrap di www.malasngoding.com ini yaitu tentang cara membuat pesan alert atau pesan alert dengan menggunakan bootstrap.
bootstrap menyediakan class khusus untuk membuat pesan alert dengan sangat mudah. di buktikan dengan kemudahan penggunaan bootstrap yang hanya tinggal menambahkan nama-nama class yang sudah di sediakan oleh bootstrap. untuk cara membuat pesan alert dengan bootstrap caranya cukup mudah. anda hanya perlu menambahkan class “alert” untuk mendefinisikan penggunaan alert bootstrap. selanjutnya tambahkan satu class lagi untuk menentukan jenis alert apa yang di gunakan. alert-success, alert-danger, alert-info dan alert-warning. berikut ini di jelaskan tentang penggunaan class alert bootstrap.
- alert-success
class alert-success di gunakan untuk membuat pesan alert yang berwarna hijau, biasanya pesan alert ini di gunakan untuk membuat pesan sukses. - alert-info
class alert-info di gunakan untuk membuat pesan alert yang berwarna biru, biasanya pesan alert ini di gunakan untuk membuat pesan yang berupa informasi. - alert-warning
class alert-warning di gunakan untuk membuat pesan alert yang berwarna kuning, biasanya pesan alert ini di gunakan untuk membuat pesan yang berupa peringatan. - alert-danger
class alert-danger di gunakan untuk membuat pesan alert yang berwarna merah, biasanya pesan alert ini di gunakan untuk membuat pesan gagal.
Cara Membuat Pesan Alert Dengan Bootstrap
untuk membuat pesan alert dengan bootstrap caranya sangat mudah, buat sebuah element <div> yang berisi pesan peringatan alert yang ingin di buat. kemudian pada tag pembuka <div> berikan class “alert” dan satu lagi gunakan class alert seperti penjelasan di atas. bisa menggunakan alert-success untuk membuat pesan alert sukses, alert-info untuk membuat pesan alert informasi, alert-warning untuk membuat pesan alert berupa peringatan dan alert-danger untuk membuat pesan alert gagal. perhatikan contoh berikut ini.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>Bootstrap Part 6 : Membuat Pesan Alert Dengan Bootstrap</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>Membuat Pesan Alert Dengan Bootstrap | www.malasngoding.com</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 Gagal</div> </div> </div> </body> </html> |
membuat pesan alert dengan bootstrap
dapat di lihat pada contoh di atas, pesan alert dengan bootstrap sudah jadi. tetapi seperti nya masih ada yang kurang. akan lebih bagus jika kita tambahkan tombol silang (x) pada pesan alert sehingga jika tombol silang di klik maka pesan alert akan hilang.
Membuat Tombol Close Pada Pesan Alert Bootstrap
perhatikan contoh berikut untuk membuat tombol close pada alert bootstrap.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <title>Bootstrap Part 6 : Membuat Pesan Alert Dengan Bootstrap</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>Membuat Pesan Alert Dengan Bootstrap | www.malasngoding.com</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"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> Pesan Alert Info </div> <div class="alert alert-warning"> <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 Gagal </div> </div> </div> </body> </html> |
membuat alert dengan bootstrap
perhatikan pada contoh di atas. sudah terdapat tombol close untuk menghapus atau menutup pesan alert. untuk membuat tombol close pada pesan alert tambahkan
|
1 |
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> |
sedikit tambahan lagi yang harus di perhatikan. kita bisa memberikan efek pada saat pesan alert di tutup. yaitu dengan menambahkan class “fade in” pada element div. efek fade merupakan efek fade in merupakan efek menutup pesan alert dengan efek memudar.
|
1 |
<div class="alert alert-success fade in"> |
See the Pen dGvByO by Malas Ngoding (@malasngoding) on CodePen.0
sekian tutorial bootstrap part 6 : Membuat pesan alert dengan bootstrap.
Tutorial Bootstrap Dasar Lainnya
Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap
Tutorial Menarik Lainnya
Membuat Template Blog Sederhana Dengan Bootstrap
Bootstrap Part 16 : Mengenal Grid System Bootstrap
Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel Dengan Bootstrap
aria-describedby=”email-notes” required=”required”