tutorial pengembangan web terbaru
 

Bootstrap Alerts


Alerts

Bootstrap menyediakan cara mudah untuk membuat pesan peringatan yang telah ditetapkan:

× Sukses! kotak peringatan ini menunjukkan tindakan berhasil atau positif.
× Info! kotak peringatan ini menunjukkan perubahan informatif netral atau tindakan.
× Peringatan! kotak peringatan ini menunjukkan peringatan yang mungkin memerlukan perhatian.
× Bahaya! kotak peringatan ini menunjukkan tindakan yang berbahaya atau berpotensi negatif.

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">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>
Cobalah sendiri "

The aria-* atribut dan &times; penjelasan

Untuk membantu meningkatkan aksesibilitas untuk orang yang menggunakan pembaca layar, Anda harus mencakup aria-label="close" atribut, saat membuat tombol tutup.

&times; (×) &times; (×) 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:

Contoh

<div class="alert alert-success fade in">
Cobalah sendiri "

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 .