Tự học Bootstrap – Cơ bản – bài 08 – Hộp thông báo

Thông báo

Bootstrap cung cấp 01 cách thức dễ dàng tạo ra các hộp cảnh báo được định dạng sẵn:

Các cảnh báo được tạo ra bằng lớp .alert, sau đây là các lớp cảnh báo có trong Bootstrap .alert-success, .alert-info, .alert-warning hoặc .alert-danger:

Ví dụ:

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

---

Liên kết thông báo

Thêm lớp alert-link vào bất kỳ liên kết nào bên trong hộp cảnh báo để tạo ra các liên kết cùng màu sắc (ton sur ton):

Ví dụ:

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

---

Thông báo có nút đóng

Để đóng hộp thông báo , thêm 01 lớp .alert-dismissable vào lớp container của hộp thông báo. Sau đó thêm lớp class="close" và lớp data-dismiss="alert" cho 01 liên kết hoặc 01 nút (khi bạn nhấp chuột trên đối tượng này ,hộp cảnh báo sẽ biến mất).

Ví dụ:

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

Thuộc tính aria-* và &times; explanation

To help improve accessibility for people using screen readers, you should include the aria-label="close" attribute, when creating a close button.

&times; (×) is an HTML entity that is the preferred icon for close buttons, rather than the letter "x".

---

Thông báo “động”

02 lớp .fade và .in thêm 01 hiệu ứng nhạt dần khi đóng hộp thông báo:

Ví dụ:

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

video