Bootstrap - Cảnh báo

Chương này sẽ thảo luận về các cảnh báo và các lớp mà Bootstrap cung cấp cho các cảnh báo. Cảnh báo cung cấp một cách để tạo kiểu thông báo cho người dùng. Chúng 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.

Bạn có thể thêm một biểu tượng đóng tùy chọn để cảnh báo. Để loại bỏ nội tuyến, hãy sử dụng plugin Alerts jQuery .

Bạn có thể thêm một cảnh báo cơ bản bằng cách tạo một trình bao bọc <div> và thêm một lớp .alert và một trong bốn lớp ngữ cảnh (ví dụ: .alert-success, .alert-info, .alert-warning, .alert-danger). Ví dụ sau đây chứng minh điều này -

<div class = "alert alert-success">Success! Well done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>

Cảnh báo loại bỏ

Để tạo cảnh báo sa thải -

  • Thêm một cảnh báo cơ bản bằng cách tạo một trình bao bọc <div> và thêm một lớp .alert và một trong bốn lớp ngữ cảnh (ví dụ: .alert-success, .alert-info, .alert-warning, .alert-danger)

  • Cũng thêm tùy chọn .alert-dismissable vào lớp <div> ở trên.

  • Thêm một nút đóng.

Ví dụ sau đây chứng minh điều này -

<div class = "alert alert-success alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Success! Well done its submitted.
</div>

<div class = "alert alert-info alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Info! take this info.
</div>

<div class = "alert alert-warning alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Warning ! Dont submit this.
</div>

<div class = "alert alert-danger alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Error ! Change few things.
</div>
Đảm bảo sử dụng phần tử <button> với thuộc tính dữ liệu data -miss = "alert" .

Liên kết trong cảnh báo

Để nhận liên kết trong cảnh báo -

  • Thêm một cảnh báo cơ bản bằng cách tạo một trình bao bọc <div> và thêm một lớp .alert và một trong bốn lớp ngữ cảnh (ví dụ: .alert-success, .alert-info, .alert-warning, .alert-danger)

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

<div class = "alert alert-success">
   <a href = "#" class = "alert-link">Success! Well done its submitted.</a>
</div>

<div class = "alert alert-info">
   <a href = "#" class = "alert-link">Info! take this info.</a>
</div>

<div class = "alert alert-warning">
   <a href = "#" class = "alert-link">Warning ! Dont submit this.</a>
</div>

<div class = "alert alert-danger">
   <a href = "#" class = "alert-link">Error ! Change few things.</a>
</div>