Trong 1 trang web các thông điệp hay cảnh báo (alert) dùng để truyền đạt thông tin đến người dùng. Thông in đó có thể là tình trạng của web hoặc kết quả của một hành động tương tác nào giữa người sử dụng và web. Trong Bootstrap 4 cung cấp cho chúng ta rất nhiều loại cảnh báo khác nhau đi kèm với các màu sắc khác nhau, các cảnh báo đó sẽ được trình bày ngay dưới bài viết này các bạn cùng theo dõi nhé.
Alert trong Bootstrap 4
Bootstrap 4 cung cấp một cách dễ dàng để tạo các thông báo cảnh báo được xác định trước:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</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.2/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.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Các cảnh báo (Alerts)</h2> <p>Cảnh báo được tạo bởi lớp .alert, theo sau là các lớp bối cảnh chứa màu sắc khác nhau:</p> <div class="alert alert-success"> <strong>Thành công!</strong> Lớp alert-success. </div> <div class="alert alert-info"> <strong>Thông tin!</strong> Lớp alert-info. </div> <div class="alert alert-warning"> <strong>Báo động!</strong> Lớp alert-warning. </div> <div class="alert alert-danger"> <strong>Nguy hiểm!</strong> Lớp alert-danger. </div> <div class="alert alert-primary"> <strong>Chính!</strong> Lớp alert-primary. </div> <div class="alert alert-secondary"> <strong>Phụ!</strong> Lớp alert-secondary. </div> <div class="alert alert-dark"> <strong>Màu tối!</strong> Lớp alert-dark. </div> <div class="alert alert-light"> <strong>Sáng!</strong> Lớp alert-light. </div> </div> </body> </html>
Cảnh báo được tạo bằng lớp .alert, theo sau là một trong các lớp theo ngữ cảnh .alert-success, .alert-info, .alert-warning, .alert-risk, .alert-primary, .alert-Secondary, .alert-light hoặc .alert-dark:
Liên kết cảnh báo
Thêm lớp liên kết cảnh báo .alert-link vào bất kỳ liên kết nào bên trong hộp cảnh báo để tạo "liên kết màu phù hợp":
<div class="container"> <div class="alert alert-success"> <strong>Thành công!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-info"> <strong>Thông tin!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-warning"> <strong>Báo động!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-danger"> <strong>Nguy hiểm!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-primary"> <strong>Chính!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-secondary"> <strong>Phụ!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-dark"> <strong>Màu tối!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-light"> <strong>Sáng!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> </div>
Đóng Thông báo (Closing Alert)
Để đóng thông báo cảnh báo, hãy thêm lớp .alert-dismissible vào vùng chứa cảnh báo. Sau đó thêm class = "close" và data-dismiss="alert" vào một liên kết hoặc một phần tử nút (khi bạn nhấp vào hộp này, hộp cảnh báo sẽ biến mất).
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</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.2/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.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="alert alert-success alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button><strong>Thành công!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-info alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button><strong>Thông tin!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-warning alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button><strong>Báo động!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-danger alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button><strong>Nguy hiểm!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-primary alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button><strong>Chính!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-secondary alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button><strong>Phụ!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-dark alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button><strong>Màu tối!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-light alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button><strong>Sáng!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> </div> </body> </html>
× (×) là một thực thể HTML là biểu tượng được ưu tiên cho các nút đóng, thay vì chữ cái "x".
Hiệu ứng hoạt hình cho cảnh báo (Animated Alert)
Các lớp .fade và .show thêm hiệu ứng mờ dần khi đóng thông báo cảnh báo:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</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.2/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.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="alert alert-success alert-dismissible fade show"> <button type="button" class="close" data-dismiss="alert">×</button><strong>Thành công!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-info alert-dismissible fade show"> <button type="button" class="close" data-dismiss="alert">×</button><strong>Thông tin!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-warning alert-dismissible fade show"> <button type="button" class="close" data-dismiss="alert">×</button><strong>Báo động!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-danger alert-dismissible fade show"> <button type="button" class="close" data-dismiss="alert">×</button><strong>Nguy hiểm!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-primary alert-dismissible fade show"> <button type="button" class="close" data-dismiss="alert">×</button><strong>Chính!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-secondary alert-dismissible fade show"> <button type="button" class="close" data-dismiss="alert">×</button><strong>Phụ!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-dark alert-dismissible fade show"> <button type="button" class="close" data-dismiss="alert">×</button><strong>Màu tối!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> <div class="alert alert-light alert-dismissible fade show"> <button type="button" class="close" data-dismiss="alert">×</button><strong>Sáng!</strong> Bạn nên <a href="#" class="alert-link">đọc tin nhắn này</a>. </div> </div> </body> </html>
Lời kết:
Các bạn thấy đấy việc tạo các cảnh báo (alert) trong Bootstrap 4 rất đơn giản phải không nào. Chúng ta có thể sử dụng linh hoạt các cảnh báo này để tương tác tốt hơn với người dùng trên giao diện web. Chúc các bạn thành công!
