Rekomendasi Kursus:

Pemberitahuan Bootstrap 5

Pemberitahuan

Bootstrap 5 menyediakan cara yang mudah untuk membuat pemberitahuan pengumuman yang sudah ditetapkan:

  • Kotak pemberitahuan dibuat menggunakan kelas .alert, diikuti dengan kelas konteks salah satu:
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light

Contoh

<div class="alert alert-success">
  <strong>Berjaya!</strong> Kotak pemberitahuan ini menunjukkan tindakan yang sukses atau positif.
</div>

Coba Sendiri

.alert-dark

Pautan pemberitahuan .alert-link Kelas ditambahkan ke mana-mana pautan di dalam kotak pemberitahuan, dapat membuat pautan warna yang disesuaikan:

Contoh

<div class="alert alert-success">
  <strong>Berjaya!</strong> Anda seharusnya <a href="#" class="alert-link">membaca pesan ini</a>.
</div>

Coba Sendiri

Tutup Pemberitahuan

Untuk menutup pemberitahuan, silakan tambahkan .alert-dismissible Kelas ditambahkan ke kontainer pemberitahuan. kemudian class="btn-close" dan data-bs-dismiss="alert" Tambahkan ke elemen pautan atau tombol (ketika Anda mengkliknya, kotak pemberitahuan akan hilang).

Contoh

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Berjaya!</strong> Kotak pemberitahuan ini menunjukkan tindakan yang sukses atau positif.
</div>

Coba Sendiri

Animasi kotak pemberitahuan

.fade dan .show Kelas ditambahkan untuk pemberitahuan penghilangan pemberitahuan:

Contoh

<div class="alert alert-danger alert-dismissible fade show">

Coba Sendiri