4 Jenis Alerts yang Tersedia di Bootstrap, Bagaimana Cara Membuatnya ?

Alerts atau bahasa Indonesianya itu peringatan juga tersedia di Bootstrap, sebut saja pemberitahuan / notifikasi ya. Pemberitahuan ini berupa sebuah bidang pada framework Bootstrap yang umumnya digunakan sebagai peringatan atau pemberitahuan dengan menampilkan pesan-pesan tertentu.

Bootstrap menyebutnya alerts karena ini bisa disesuaikan dengan bebas dan secara default nya saja sudah tersedia dalam beberapa versi warna agar dapat dipasang dengan cepat di situs Bootstrap. Misalnya menampilkan alerts berwarna merah (danger) untuk waspada atau error, warna hijau untuk berhasil atau sukses, dsb.

Contextual Classes – Alert Bootstrap

Untuk membuat alerts di Bootstrap tidak sulit yang dibayangkan, cukup gunakan kodingan di bawah (pilih berdasarkan warna). Sebelum membahas lebih jauh mengenai alerts, perlu mengetahui contextual classes yang dapat digunakan untuk menyempurnakan alerts. Berikut ini contextual class Bootstrap yang dapat diterapkan pada alerts:

1. success (hijau)
2. info (biru)
3. warning (oranye)
4. danger (merah)

Sampai saat ini baru tersedia 4 jenis alerts yang dapat digunakan, diantaranya:

Default Alerts

Ini adalah basic alerts Bootstrap, kamu cukup gunakan class .alert untuk menggunakannya. Jangan lupa ikuti dengan contextual classes yang ingin digunakan. Contoh:

<h2>Alerts Bootstrap - Posciety</h2>
  <div class="alert alert-success">
    <strong>Success</strong> - Ini adalah alert yang diikuti success (alert-success).
  </div>
  <div class="alert alert-info">
    <strong>Info</strong> - Ini adalah alert yang diikuti info (alert-info).
  </div>
  <div class="alert alert-warning">
    <strong>Warning</strong> - Ini adalah class alert yang diikuti warning (alert-warning).
  </div>
  <div class="alert alert-danger">
    <strong>Danger</strong> - Ini adalah class alert yang diikuti danger (alert-danger).
  </div>

Ini adalah basic dari alert yang perlu diketahui sebelum melanjutkan ke jenis-jenis alert lainnya. Dari kode di atas akan tampil seperti ini:

Closing Alerts

Closing Alerts adalah alert Bootstrap yang disediakan berbeda dengan Basic Alerts di atas, Closing Alerts menyediakan tanda silang sebagai penutup dari alerts. Mungkin kamu sering menemukan ini di beberapa situs, ketika di klik tanda silang (close) maka akan menutup pemberitahuan tersebut.

Untuk membuat Closing Alerts tidak berbeda jauh dengan Basic Alerts di atas, hanya perlu beberapa penambahan saja pada struktur kodenya. Contoh:

<h2>Closing Alerts Bootstrap - Posciety</h2>
  <div class="alert alert-success alert-dismissible">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Success</strong> - Ini adalah alert yang diikuti success (alert-success).
  </div>
  <div class="alert alert-info alert-dismissible">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Info</strong> - Ini adalah alert yang diikuti info (alert-info).
  </div>
  <div class="alert alert-warning alert-dismissible">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Warning</strong> - Ini adalah alert yang diikuti warning (alert-warning).
  </div>
  <div class="alert alert-danger alert-dismissible">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Danger</strong> - Ini adalah alert yang diikuti danger (alert-danger).
  </div>

Seperti yang terlihat pada code di atas terdapat alert-dismissable yang fungsinya agar bisa disingkirkan atau disembunyikan ketika tampil. Tapi harus di tambah data-dismiss=”” juga pada bagian alert. Selain itu, alerti ini juga dibangun dalam tag a href=””. Dan beberapa perbedaan lainnya seperti yang terlihat di atas.

Dengan strukutr seperti ini, alert akan tampil kurang lebih seperti pada gambar di bawah :

Terdapat tanda silang di pojok kanan dari masing-masing alert, itu berfungsi agar alert dapat ditutup saat ia muncul. Untuk mengganti tanda silang, ganti di bagian × pada kodingan di atas. Kumpulan kode HTML untuk membuat ikon / tanda panah.

Alerts dengan Animasi

Bootstrap juga menyediakan animasi atau transisi fade-in yang dapat diterapkan pada alerts, ini bukan animasi yang mewah melainkan hanya memudar saat alert ditutup.

<h2>Animated Alerts Bootstrap - Posciety</h2>
  <div class="alert alert-success alert-dismissible fade in">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Success</strong> - Ini adalah alert yang diikuti success (alert-success).
  </div>
  <div class="alert alert-info alert-dismissible fade in">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Info</strong> - Ini adalah alert yang diikuti info (alert-info).
  </div>
  <div class="alert alert-warning alert-dismissible fade in">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Warning</strong> - Ini adalah alert yang diikuti warning (alert-warning).
  </div>
  <div class="alert alert-danger alert-dismissible fade in">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Danger</strong>- Ini adalah alert yang diikuti danger (alert-danger).
  </div>

Ini adalah contoh struktur kode untuk menggunakan Animated Alerts, perhatikan perbedaannya pada kodingan di atas antara Closing Alerts dan Animated Alerts. Tampilan Animated tidak berbeda jauh dengan Closing Alerts, karena hanya animasi ketika alert ditutup saja.

Alerts dengan Link

Beberapa situs juga menggunakan alerts sebagai media promosi atau menampilkan kebijakan privasi yang bisa ditutup dan bisa juga menampilkan link menuju halaman privacy policy nya. Alerts ini tidak berbeda jauh dengan jenis alert sebelumnya, hanya saja alert ini menampilkan link.

Sepertinya sudah banyak yang tau bagaimana cara menyisipkan link pada HTML, jadi tidak perlu panjang lebar menjelaskan disini.

<h2>Alert Links</h2>
  <p>Add the alert-link class to any links inside the alert box to create "matching colored links".</p>
  <div class="alert alert-success">
    <strong>Success</strong> Ini adalah alert success yang berisi link <a href="https://www.posciety.com" class="alert-link">Klik Disini (LINK)</a>.
  </div>
  <div class="alert alert-info">
    <strong>Info</strong> Ini adalah alert info yang berisi link <a href="https://www.posciety.com" class="alert-link">Klik Disini (LINK)</a>.
  </div>
  <div class="alert alert-warning">
    <strong>Warning</strong> Ini adalah alert warning yang berisi link <a href="https://www.posciety.com" class="alert-link">Klik Disini (LINK)</a>.
  </div>
  <div class="alert alert-danger">
    <strong>Danger</strong> Ini adalah alert danger yang berisi link <a href="https://www.posciety.com" class="alert-link">Klik Disini (LINK)</a>.
  </div>

Seperti yang terlihat pada code di atas, terdapat tag a di dalam masing-masing alert dan berada di belakang. Artinya link tersebut akan tampil di bagian belakang alert dan ketika di klik akan menuju ke halaman yang URL nya tercantum. Untuk masalah tampilan, ini tidak berbeda jauh dengan jenis-jenis alert lainnya yang sudah dijelaskan di atas.

Biasanya beberapa orang juga mengganti link pada alert ini menjadi tombol Bootstrap yang dapat di klik agar terlihat lebih menarik. Tidak sedikit juga yang tetap menggunakan link tapi merubah style nya sesuai desain website  / blog tersebut.

Setelah mengetahui cara membuat alerts, kamu dapat teruskan memuat website / blog dengan menampilkan alerts dan menyisipkan pada kondisi-kondisi tertentu seperti menampilkan alerts / notifikasi ketika data berhasil diinput, menampilkan alerts ketika username / password login salah seperti yang pernah dicontohkan pada tutorial login PHP, dan kondisi-kondisi lainnya yang memungkinkan untuk menampilkan alerts.