[Bootstrap] Phần 8: Các thông điệp cảnh báo

Trong bài viết này, bạn sẽ học các lớp tạo thông điệp cảnh báo trong Bootstrap.

Các thông điệp cảnh báo

Các cảnh báo (alert) được tạo ra bằng cách dùng lớp .alert, theo sau 4 lớp định nghĩa bối cảnh gồm .alert-success, .alert-info, .alert-warning và .alert-danger. Tùy theo ngữ cảnh, bạn sẽ địnnh nghĩa cho thông điệp cảnh báo với màu sắc khác nhau.

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

Màu sắc liên kết

Bạn có thể dùng lớp .alert-link để tạo 1 liên kết khớp với các dạng cảnh báo. Các liên kết này sẽ được in đậm.

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>

Đóng cảnh báo

Để tạo 1 nút nhấn đóng các cảnh báo, bạn thêm 2 thuộc tính lớp class=”close” và data-dismiss=”alert” vào nút nhấn.

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

Tạo hiệu ứng cho đóng cảnh báo

Để hiệu ứng đóng cảnh báo nhìn mượt hơn, bạn có thể thêm 2 lớp .fade và .in vào thông điệp cảnh báo.

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

Như vậy, qua bài viết này, bạn đã học cách tạo các loại cảnh báo và hiệu ứng đóng các cảnh báo đó.