Alert Bootstrap

Với Bootstrap 4 bạn có thể dễ dàng tạo các thông báo cảnh báo (alert) được xác định trước. Để thêm màu cho các cảnh báo bạn sẽ sử dụng các class màu theo ngữ cảnh, mà chúng ta đã tìm hiểu trong bài color Bootstrap.

Alert cơ bản

Để tạo cảnh báo trong Bootstrap bạn chỉ cần thêm class .alert và class màu theo ngữ cảnh tương ứng với alert muốn tạo. Các class màu theo ngữ cảnh đó bao gồm: .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light.alert-dark:

Chúng ta cùng làm thử ví dụ dưới đây:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Quantrimang</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Alert Bootstrap</h2>
  <p>Alert được tạo với class .alert đi kèm với class màu theo ngữ cảnh:</p>
  <div class="alert alert-success">
    <strong>Thành công!</strong> Dùng cho một hành động thành công hoặc tích cực.
  </div>
  <div class="alert alert-info">
    <strong>Thông tin!</strong> Chỉ ra sự thay đổi thông tin hoặc hành động có tính trung lập.
  </div>
  <div class="alert alert-warning">
    <strong>Cảnh báo!</strong> Dùng cho một cảnh báo có thể cần chú ý.
  </div>
  <div class="alert alert-danger">
    <strong>Nguy hiểm!</strong> Dùng cho một hành động nguy hiểm hoặc có khả năng tiêu cực.
  </div>
  <div class="alert alert-primary">
    <strong>Quan trọng!</strong> Dùng cho một hành động quan trọng.
  </div>
  <div class="alert alert-secondary">
    <strong>Thứ cấp!</strong> Dùng cho một hành động ít quan trọng hơn.
  </div>
  <div class="alert alert-dark">
    <strong>Cảnh báo!</strong> Cảnh báo có màu xám đen.
  </div>
  <div class="alert alert-light">
    <strong>Cảnh báo khác!</strong> Cảnh báo xám nhạt.
  </div>
</div>

</body>
</html>

Ta sẽ nhận được các cảnh báo như sau trên web:

Chèn link trong cảnh báo

Khi cần phải chèn thêm link vào cảnh báo, bạn thêm class alert-link cho link bên trong box alert, khi đó link sẽ có màu tương đồng với màu của cảnh báo, như ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Quantrimang.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Thêm link cho alert</h2>
  <div class="alert alert-success">
    <strong>Thành công!</strong> Bạn nên <a href="https://quantrimang.com/" class="alert-link">đọc thông báo này</a>.
  </div>
  <div class="alert alert-info">
    <strong>Thông tin!</strong> Bạn nên <a href="https://quantrimang.com/" class="alert-link">đọc thông báo này</a>.
  </div>
  <div class="alert alert-warning">
    <strong>Cảnh báo!</strong> Bạn nên <a href="https://quantrimang.com/" class="alert-link">đọc thông báo này</a>.
  </div>
  <div class="alert alert-danger">
    <strong>Nguy hiểm!</strong> Bạn nên <a href="https://quantrimang.com/" class="alert-link">đọc thông báo này</a>.
  </div>
  <div class="alert alert-primary">
    <strong>Quan trọng!</strong> Bạn nên <a href="https://quantrimang.com/" class="alert-link">đọc thông báo này</a>.
  </div>
  <div class="alert alert-secondary">
    <strong>Thứ cấp!</strong> Bạn nên <a href="https://quantrimang.com/" class="alert-link">đọc thông báo này</a>.
  </div>
  <div class="alert alert-dark">
    <strong>Nền tối!</strong> Bạn nên <a href="https://quantrimang.com/" class="alert-link">đọc thông báo này</a>.
  </div>
  <div class="alert alert-light">
    <strong>Nền sáng!</strong> Bạn nên <a href="https://quantrimang.com/" class="alert-link">đọc thông báo này</a>.
  </div>
</div>

</body>
</html>

Khi di chuột qua link cảnh báo, bạn sẽ thấy link xuất hiện dưới cửa sổ trình duyệt như hình:

Đóng cảnh báo

Để đóng thông báo cảnh báo, bạn thêm class .alert-dismissible cho container alert. Rồi thêm class=”close” và data-dismiss=”alert” cho link hoặc phần tử button (nút mà bạn click vào sẽ đóng cảnh báo lại). Chúng ta sẽ tìm hiểu kỹ hơn về button tron Bootstrapp ở bài sau.

Dưới đây là ví dụ về đóng cảnh báo trong Bootstrap 4:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Quantrimang.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Đóng cảnh báo</h2>
   <div class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Thành công!</strong> Quantrimang.com chúc mừng bạn đã học xong Bootstrap.
  </div> 
</div>

</body>
</html>

Khi nhấp vào nút x ở bên phải cảnh báo, cảnh báo sẽ được đóng lại:

Mẹo nhỏ: &times; (×) là một thực thể HTML được sử dụng rất phổ biến cho các nút đóng thay vì chữ X.

Tạo cảnh báo động

Nếu bạn thêm class .fade và .show sẽ tạo hiệu ứng mờ dần khi đóng cảnh báo. Cách dùng y như trên, bạn thêm fade và show vào thẻ div, giả sử mình cần đóng alert thông báo một hành động đã thực hiện thành công thì sẽ như dưới đây:

<div class="alert alert-success alert-dismissible fade show">

Khi đó ta có file .html này:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Quantrimang.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Đóng cảnh báo</h2>
   <div class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Thành công!</strong> Chúc mừng bạn đã học xong Bootstrap.
  </div> 
</div>

</body>
</html>

Code này cho kết quả hệt như bên trên, chỉ khi click vào nút đóng mới hiện hiệu ứng nên mình không chụp hình nữa nha.