Alert trong bootstrap 5

11/12
Thạch
Bootstrap 5
0
189

Để tạo cảnh báo (alert) 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.

Bài 8: Jumbotron trong Bootstrap 5
Trong bài viết này, chúng ta sẽ cùng học về các class mà Bootstrap cung cấp cho người dùng nhằm tạo các cảnh báo (Alert). Cảnh báo là các định dạng thông báo cho người dùng.

Alert cơ bản

Bạn có thể thêm một cảnh báo cơ bản bằng cách tạo một khối <div> kèm thêm các lớp .alert kết hợp với 6 lớp ngữ cảnh .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light hay .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 - Sinitc.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <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>
</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 - Sinitc.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.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://Sinitc.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://Sinitc.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://Sinitc.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://Sinitc.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://Sinitc.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://Sinitc.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://Sinitc.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://Sinitc.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 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 5:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Sinitc.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Đóng cảnh báo</h2>
   <div class="alert alert-success alert-dismissible">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>Thành công!</strong> Sinitc.com chúc mừng bạn đã học xong Bootstrap.
  </div> 
  <div class="alert alert-info alert-dismissible">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>Thông tin!</strong> Bạn sẽ học được nhiều bài học hay về Bootstrap trên Sinitc.com.
  </div>
</div>

</body>
</html>

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

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 - Sinitc.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Đóng cảnh báo</h2>
   <div class="alert alert-success alert-dismissible fade show">
     <button type="button" class="btn-close" data-bs-dismiss="alert"></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.

Lưu ý: Trên Bootstrap 4, bạn sẽ phải dùng thêm kí tự × ở giữa thẻ mở và đóng Button. Lúc này, nút đóng trên Bootstrap 4 sẽ có nội dung như sau:

<button type="button" class="close" data-dismiss="alert">&times;</button>

× (×) 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.

Kết thúc bài này, các bạn đã có thể tùy biến định dạng cho mình một cảnh báo/thông báo trên website để người dùng có thể lưu ý rồi đó. Hãy tiếp tục theo doxic ác loạt bài sau nhé