HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Peringatan Bootstrap

❮ Sebelumnya Berikutnya ❯

Peringatan

Bootstrap menyediakan cara mudah untuk membuat pesan peringatan yang telah ditentukan sebelumnya:

× Kesuksesan! Kotak peringatan ini menunjukkan tindakan yang berhasil atau positif.
× Informasi! Kotak peringatan ini menunjukkan perubahan atau tindakan informatif yang netral.
× Peringatan! Kotak peringatan ini menunjukkan peringatan yang mungkin perlu diperhatikan.
× Bahaya! Kotak peringatan ini menunjukkan tindakan yang berbahaya atau berpotensi negatif.

Peringatan dibuat dengan .alertkelas, diikuti oleh salah satu dari empat kelas kontekstual .alert-success, .alert-info, .alert-warningatau .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>

Tautan Peringatan

Tambahkan alert-linkkelas ke tautan apa pun di dalam kotak peringatan untuk membuat "tautan berwarna yang cocok":

Kesuksesan! Anda harus membaca pesan ini .
Informasi! Anda harus membaca pesan ini .
Peringatan! Anda harus membaca pesan ini .
Bahaya! Anda harus membaca pesan ini .

Contoh

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

Peringatan Penutupan

× Klik simbol "x" di sebelah kanan untuk menutup saya.

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">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Atribut aria-* dan × penjelasan

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

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

× Klik simbol "x" di sebelah kanan untuk menutup saya. Saya akan "memudar".

Kelas .fadedan .inmenambahkan efek memudar saat menutup pesan peringatan:

Contoh

<div class="alert alert-danger fade in">

Uji Diri Anda Dengan Latihan

Olahraga:

Tambahkan kelas "peringatan" Bootstrap untuk menampilkan hasil dari tindakan yang berhasil.

<div class="">
  Success!
</div>

Referensi Peringatan Bootstrap Lengkap

Untuk referensi lengkap tentang semua opsi, metode, dan acara peringatan, buka Referensi Peringatan Bootstrap JS kami .


❮ Sebelumnya Berikutnya ❯