Alerts
Bootstrap menyediakan cara mudah untuk membuat pesan peringatan yang telah ditetapkan:
Alarm diciptakan dengan .alert
kelas, diikuti oleh salah satu dari empat kelas kontekstual .alert-success
, .alert-info
, .alert-warning
atau .alert-danger
:
Contoh
<div class="alert alert-success">
<strong>Success!</strong>
Indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Indicates a dangerous or potentially negative
action.
</div>
Cobalah sendiri " Alerts penutupan
Untuk menutup pesan peringatan, tambahkan class="close"
dan data-dismiss="alert"
untuk link atau elemen tombol:
Contoh
<div class="alert alert-success">
<a href="#"
class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Cobalah sendiri " The aria-* atribut dan × penjelasan
Untuk membantu meningkatkan aksesibilitas untuk orang yang menggunakan pembaca layar, Anda harus mencakup aria-label="close" atribut, saat membuat tombol tutup.
× (×) × (×) adalah sebuah entitas HTML yang merupakan ikon yang lebih disukai untuk tombol dekat, bukan huruf "x" .
animasi Alerts
The .fade
dan .in
kelas menambahkan efek memudar saat menutup pesan peringatan:
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 »
Menyelesaikan Bootstrap Notifikasi Referensi
Untuk referensi lengkap semua pilihan peringatan, metode dan peristiwa, pergi ke kami Bootstrap JS Siaga Referensi .