Source

Peringatan

Berikan pesan umpan balik kontekstual untuk tindakan pengguna biasa dengan beberapa pesan peringatan yang tersedia dan fleksibel.

Contoh

Peringatan tersedia untuk setiap panjang teks, serta tombol tutup opsional. Untuk penataan yang tepat, gunakan salah satu dari delapan kelas kontekstual yang diperlukan.alert-success (mis., ). Untuk pemberhentian sebaris, gunakan plugin peringatan jQuery .

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>
Menyampaikan makna pada teknologi bantu

Menggunakan warna untuk menambah makna hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi bantu – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna jelas dari konten itu sendiri (misalnya teks yang terlihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan .sr-onlykelas.

Gunakan .alert-linkkelas utilitas untuk menyediakan tautan berwarna yang cocok dengan cepat dalam peringatan apa pun.

<div class="alert alert-primary" role="alert">
  This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Konten tambahan

Lansiran juga dapat berisi elemen HTML tambahan seperti judul, paragraf, dan pembagi.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Mengabaikan

Dengan menggunakan plugin JavaScript lansiran, Anda dapat mengabaikan lansiran sebaris apa pun. Berikut caranya:

  • Pastikan Anda telah memuat plugin peringatan, atau JavaScript Bootstrap yang dikompilasi.
  • Jika Anda membuat JavaScript kami dari sumber, itu memerlukanutil.js . Versi yang dikompilasi termasuk ini.
  • Tambahkan tombol tutup dan .alert-dismissiblekelas, yang menambahkan bantalan ekstra di sebelah kanan peringatan dan posisikan .closetombol.
  • Pada tombol abaikan, tambahkan data-dismiss="alert"atribut, yang memicu fungsionalitas JavaScript. Pastikan untuk menggunakan <button>elemen dengan itu untuk perilaku yang tepat di semua perangkat.
  • Untuk menganimasikan peringatan saat menutupnya, pastikan untuk menambahkan kelas .fadedan .show.

Anda dapat melihat ini beraksi dengan demo langsung:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Perilaku JavaScript

Pemicu

Aktifkan penghentian lansiran melalui JavaScript:

$('.alert').alert()

Atau dengan dataatribut pada tombol di dalam alert , seperti yang ditunjukkan di atas:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Perhatikan bahwa menutup lansiran akan menghapusnya dari DOM.

Metode

metode Keterangan
$().alert() Membuat peringatan mendengarkan peristiwa klik pada elemen turunan yang memiliki data-dismiss="alert"atribut. (Tidak diperlukan saat menggunakan inisialisasi otomatis data-api.)
$().alert('close') Menutup lansiran dengan menghapusnya dari DOM. Jika .fadedan .showkelas ada pada elemen, peringatan akan menghilang sebelum dihapus.
$().alert('dispose') Menghancurkan peringatan elemen. 
$(".alert").alert('close')

Acara

Plugin peringatan Bootstrap memperlihatkan beberapa peristiwa untuk menghubungkan ke fungsi peringatan.

Peristiwa Keterangan
close.bs.alert Acara ini langsung aktif ketika closemetode instance dipanggil.
closed.bs.alert Peristiwa ini dipicu ketika peringatan telah ditutup (akan menunggu transisi CSS selesai). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})