Tutorial Belajar Bootstrap 4 Part 10 – Membuat Pesan Alert dengan Bootstrap

Selamat Datang lagi dalam tutorial warungbelajar, kita masih membahas mengenai boostrap 4, jika dalam tutorial sebelumnya kita telah membahas mengenai cara membuat jumbotron dengan bootstrap, dalam tutorial kali ini kita akan belajar membuat pesan alert dengan bootstrap.

Bootstrap menyediakan beberapa class yang bisa anda gunakan untuk menampilkan pesan alert, bootstrap 4 menyediakan beberapa jenis tampilan dari alert, sehingga anda dapat memanfaatkan alert tersebut untuk beberapa jenis pesan, seperti pesan error bisa menggunakan tampilan alert berwarna merah, untuk pesan info bisa menggunakan alert berwarna biru, untuk pesan sukses entry data bisa menggunakan alert berwarna hijau, dan masih ada beberapa lagi jenis tampilan alert yang bisa anda gunakan untuk menampilkan pesan pada halaman web anda..

Cara membuat alert di bootstrap 4

Untuk membuat alert anda cukup menuliskan class .alert pada tag <div>, setelah itu tambahkan class alert yang digunakan untuk mengatur tampilan dari alert, beberapa class alert yang dapat digunakan untuk mengatur tampilan alert antara lain :

.alert-success  : (jenis alert ini biasanya digunakan untuk menampilkan pesan sukses dari sebuah action)
.alert-info  : (jenis alert ini biasanya digunakan untuk menampilkan informasi yang bersifat biasa)
.alert-warning  : (jenis alert ini biasanya digunakan untuk menampilkan informasi yang membutuhkan perhatian khusus)
.alert-danger  : (jenis alert ini biasanya digunakan untuk menampilkan informasi peringatan bahaya dari sebuah action)
.alert-primary  : (jenis alert ini biasanya digunakan untuk menampilkan informasi yang penting)
.alert-secondary  : (jenis alert ini biasanya digunakan untuk menampilkan informasi yang bersifat tidak begitu penting)
.alert-light  : (menampilkan alert dengan warna abu abu)
.alert-dark  : (menampilkan alert dengan warna abu abu terang)

 

untuk contoh penggunaan dari alert, perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama alert_bootstrap.html, kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

  • Alert akan ditampilkan dengan warna yang sesuai dengan class alertnya
  • Jadi untuk membuat alert anda tinggal membuat tag <div> dan tambahkan class alert, untuk pemilihan warna tinggal menyesuaikan class alert yang diinginkan

 

 

Menambahkan Link pada alert

Bootstrap juga menyediakan class alert-link yang digunakan untuk membuat link didalam box alert, dan link tersebut akan menyesuaikan dari jenis alert yang digunakan, baik untuk contoh silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama alert_link.html, lalu kita buka di browser maka hasilnya adalah :

Keterangan :

  • perhatikan untuk 2 alert awal, ketika link menggunakan class alert-link text yang ditampilkan untuk link tersebut akan ditampilkan dengan text bold sehingga tampilannya pas dengan box alert.
  • tetapi untuk 2 alert berikutnya, text ditampilkan dengan tampilan text biasa, karena kita tidak menambahkan class alert-link link tersebut

 

 

Membuat Tombol Close pada Alert

Setelah dalam bagian sebelumnya kita sudah membahas mengenai bagaimana cara membuat alert dengan berbagai tampilan warna sesuai dengan class alert yang digunakan, nah kali ini kita akan belajar untuk menambahkan tombol close pada bagian alert.

perhatikan contoh skripnya adalah sebagai berikut ini :

Semisal kita simpan dengan nama close_alert.html, lalu jika kita buka di browser maka hasilnya :

Keterangan :

  • untuk membuat tombol close pada bagian alert, kita tambahkan attribute alert-dismissable pada tag <div>
  • berikutnya tambahkan tombol diantara tag <div> </div>, didalam tombol tersebut kita tambahkan class close, dan attribute data-dismiss dengan value alert
  • diantara tag <button> dan tag penutup </button> kita tuliskan &times; skrip tersebut akan menjadi tanda x (silang) pada bagian tombol

 

 

Menambahkan Animasi pada close alert

Setelah dibagian sebelumnya kita telah membahas mengenai tombol close pada bagian alert, berikutnya kita akan menambahkan animasi pada saat close alert, dengan animasi ini ketika tombol close ditekan maka alert akan menutup dengan jeda beberapa saat, untuk contoh perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama animasi_close_alert.html, jika kita buka di browser maka hasilnya :

Keterangan :

  • untuk skrip yang ditulis dimasing – masing dari alert dan tombol close sama seperti contoh sebelumnya, tetapi kita menambahkan attribute fade dan show pada bagian tag <div> dari alert

 

Baik kurang lebih seperti itu teman – teman pembahasan mengenai cara membuat pesan alert dengan bootstrap, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa di tutorial bootstrap berikutnya.

Leave a Reply

Your email address will not be published. Required fields are marked *