Source

Makluman

Sediakan mesej maklum balas kontekstual untuk tindakan pengguna biasa dengan segelintir mesej makluman yang tersedia dan fleksibel.

Contoh

Makluman tersedia untuk sebarang panjang teks, serta butang buang pilihan. Untuk penggayaan yang betul, gunakan salah satu daripada lapan kelas kontekstual yang diperlukan.alert-success (cth, ). Untuk pemecatan sebaris, gunakan pemalam jQuery makluman .

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
Menyampaikan makna kepada teknologi bantuan

Menggunakan warna untuk menambah makna hanya memberikan petunjuk visual, yang tidak akan disampaikan kepada pengguna teknologi bantuan - seperti pembaca skrin. Pastikan maklumat yang dilambangkan dengan warna sama ada jelas daripada kandungan itu sendiri (cth teks yang boleh dilihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang tersembunyi dengan .sr-onlykelas.

Gunakan .alert-linkkelas utiliti untuk menyediakan pautan berwarna padan dengan cepat dalam sebarang makluman.

<div class="alert alert-primary" role="alert">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Kandungan tambahan

Makluman juga boleh mengandungi elemen HTML tambahan seperti tajuk, perenggan dan pembahagi.

<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>

Mengetepikan

Menggunakan pemalam JavaScript amaran, adalah mungkin untuk mengetepikan sebarang makluman dalam talian. Ini caranya:

  • Pastikan anda telah memuatkan pemalam amaran, atau JavaScript Bootstrap yang disusun.
  • Jika anda membina JavaScript kami daripada sumber, ia memerlukanutil.js . Versi yang disusun termasuk ini.
  • Tambahkan butang buang dan .alert-dismissiblekelas, yang menambahkan padding tambahan di sebelah kanan amaran dan meletakkan .closebutang itu.
  • Pada butang tolak, tambahkan data-dismiss="alert"atribut, yang mencetuskan kefungsian JavaScript. Pastikan anda menggunakan <button>elemen dengannya untuk tingkah laku yang betul merentas semua peranti.
  • Untuk menghidupkan makluman apabila menolaknya, pastikan anda menambah kelas .fadedan .show.

Anda boleh melihat tindakan ini 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>

Tingkah laku JavaScript

Pencetus

Dayakan penolakan makluman melalui JavaScript:

$('.alert').alert()

Atau dengan dataatribut pada butang dalam amaran , seperti yang ditunjukkan di atas:

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

Ambil perhatian bahawa menutup makluman akan mengalih keluarnya daripada DOM.

Kaedah

Kaedah Penerangan
$().alert() Membuat makluman mendengar peristiwa klik pada unsur keturunan yang mempunyai data-dismiss="alert"atribut. (Tidak perlu apabila menggunakan auto-inisialisasi data-api.)
$().alert('close') Menutup makluman dengan mengalih keluarnya daripada DOM. Jika kelas .fadedan .showhadir pada elemen, amaran akan pudar sebelum ia dialih keluar.
$().alert('dispose') Memusnahkan amaran unsur. 
$('.alert').alert('close')

Peristiwa

Pemalam amaran Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi amaran.

Peristiwa Penerangan
close.bs.alert Peristiwa ini berlaku serta-merta apabila closekaedah contoh dipanggil.
closed.bs.alert Acara ini dicetuskan apabila amaran telah ditutup (akan menunggu peralihan CSS selesai). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})