Peringatan Bootstrap 4
Peringatan Bootstrap 4
Bootstrap 4 menyediakan cara mudah untuk membuat pesan peringatan yang telah ditentukan sebelumnya:
Peringatan dibuat dengan .alertkelas, diikuti oleh salah satu kelas kontekstual .alert-success, .alert-info, .alert-warning,
.alert-danger, .alert-primary, .alert-secondary, .alert-lightatau .alert-dark:
Contoh
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Tautan Peringatan
Tambahkan alert-linkkelas ke tautan apa pun di dalam kotak peringatan untuk membuat "tautan berwarna yang cocok":
Contoh
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
Peringatan Penutupan
Untuk menutup pesan peringatan, tambahkan .alert-dismissible
kelas ke wadah peringatan. Kemudian tambahkan class="close"dan data-dismiss="alert"
ke tautan atau elemen tombol (ketika Anda mengklik ini, kotak peringatan akan hilang).
Contoh
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Kiat: × (×) adalah entitas HTML yang merupakan ikon pilihan untuk tombol tutup, daripada huruf "x".
Untuk daftar semua Entitas HTML, kunjungi Referensi Entitas HTML kami .
Peringatan Animasi
Kelas .fadedan .showmenambahkan efek memudar saat menutup pesan peringatan:
Contoh
<div class="alert alert-danger
alert-dismissible fade show">
Referensi Peringatan Bootstrap 4 Lengkap
Untuk referensi lengkap tentang semua opsi peringatan, metode, dan acara, buka Referensi Peringatan Bootstrap 4 JS kami .