Source

Cảnh báo

Cung cấp các thông báo phản hồi theo ngữ cảnh cho các hành động thông thường của người dùng với một số ít các thông báo cảnh báo có sẵn và linh hoạt.

Các ví dụ

Cảnh báo có sẵn cho bất kỳ độ dài văn bản nào, cũng như nút loại bỏ tùy chọn. Để tạo kiểu phù hợp, hãy sử dụng một trong tám lớp ngữ cảnh bắt buộc (ví dụ .alert-success:). Để loại bỏ nội tuyến, hãy sử dụng plugin jQuery cảnh báo .

<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>
Truyền đạt ý nghĩa cho các công nghệ hỗ trợ

Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp một dấu hiệu trực quan, điều này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc hiển thị rõ ràng từ chính nội dung (ví dụ: văn bản hiển thị) hoặc được đưa vào thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung bị ẩn với .sr-onlylớp.

Sử dụng .alert-linklớp tiện ích để nhanh chóng cung cấp các liên kết có màu phù hợp trong bất kỳ cảnh báo nào.

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

Nội dung bổ sung

Cảnh báo cũng có thể chứa các phần tử HTML bổ sung như tiêu đề, đoạn văn và dấu phân chia.

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

Loại bỏ

Sử dụng plugin JavaScript cảnh báo, có thể loại bỏ bất kỳ cảnh báo nội dòng nào. Đây là cách thực hiện:

  • Đảm bảo bạn đã tải plugin cảnh báo hoặc JavaScript Bootstrap đã biên dịch.
  • Nếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, nó yêu cầuutil.js . Phiên bản biên dịch bao gồm điều này.
  • Thêm nút loại bỏ và .alert-dismissiblelớp, bổ sung thêm phần đệm vào bên phải của cảnh báo và định vị .closenút.
  • Trên nút loại bỏ, hãy thêm data-dismiss="alert"thuộc tính, thuộc tính này sẽ kích hoạt chức năng JavaScript. Đảm bảo sử dụng <button>phần tử với nó để có hành vi phù hợp trên tất cả các thiết bị.
  • Để tạo hiệu ứng cho các cảnh báo khi loại bỏ chúng, hãy đảm bảo thêm .fadevà .showcác lớp.

Bạn có thể thấy điều này đang hoạt động với một bản demo trực tiếp:

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

Hành vi JavaScript

Gây nên

Cho phép loại bỏ cảnh báo qua JavaScript:

$('.alert').alert()

Hoặc với datacác thuộc tính trên một nút trong cảnh báo , như được minh họa ở trên:

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

Lưu ý rằng việc đóng một cảnh báo sẽ xóa nó khỏi DOM.

Phương pháp

Phương pháp Sự mô tả
$().alert() Làm cho cảnh báo lắng nghe các sự kiện nhấp chuột trên các phần tử con có data-dismiss="alert"thuộc tính. (Không cần thiết khi sử dụng tự động khởi tạo data-api.)
$().alert('close') Đóng một cảnh báo bằng cách xóa nó khỏi DOM. Nếu các lớp .fadevà .showcó trên phần tử, cảnh báo sẽ mờ dần trước khi nó bị xóa.
$().alert('dispose') Hủy cảnh báo của một phần tử. 
$('.alert').alert('close')

Sự kiện

Plugin cảnh báo của Bootstrap cho thấy một vài sự kiện để kết nối với chức năng cảnh báo.

Biến cố Sự mô tả
close.bs.alert Sự kiện này kích hoạt ngay lập tức khi closephương thức thể hiện được gọi.
closed.bs.alert Sự kiện này được kích hoạt khi cảnh báo đã được đóng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})