Các thông điệp cảnh báo (alert) dùng để truyền thông tin đến người dùng về tình trạng của trang web hay kết quả của một hành động tương tác nào đó. Trong Bootstrap, các cảnh báo mặc định có gồm nhiều loại khác nhau và cũng như mỗi cảnh báo đều có màu sắc khác nhau.
Để sử dụng các cảnh báo, bạn có thể dùng lớp .alert, theo sau là cách lớp bối cảnh: .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light và .alert-dark.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ví dụ Bootstrap --- dammio.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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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>
Liên kết cảnh báo
Nếu bạn muốn tạo liên kết cảnh báo bên trong thông điệp cảnh báo, bạn có thể dùng lớp .alert-link như sau.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ví dụ Bootstrap --- dammio.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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Liên kết cảnh báo --- dammio.com</h2>
<p>Thêm lớp .alert-link để tạo ra một liên kết cảnh báo.</p>
<div class="alert alert-success">
<strong>Thành công!</strong> Đây là <a href="#" class="alert-link">liên kết cảnh báo</a>.
</div>
</div>
</body>
</html>
Đóng cảnh báo
Nếu bạn để ý, mỗi cảnh báo đều có dấu “x”, tức là bạn có đóng cảnh báo hay nhấn vào đó cảnh báo sẽ mất đi. Để làm được như vậy, bạn chỉ cần thêm lớp .alert-dismissible vào phần tử div chứa cảnh báo. Sau đó, thêm thuộc tính class=”close” và data-dismiss=”alert” vào một phần tử nút nhấn (button).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ví dụ Bootstrap 4 --- dammio.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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Cảnh báo --- dammio.com</h2>
<p>Nút cảnh báo với lớp .close và thuộc tính data-dismiss="alert" dùng để tạo hộp cảnh báo.</p>
<p>Lớp alert-dismissible dùng để thêm vào div để thêm padding vào nút đóng cảnh báo.</p>
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
</div>
</body>
</html>
Thêm hiệu ứng hoạt hình vào cảnh báo
Trong lúc nhấn nút “x” đóng cảnh báo, bạn có thể thêm 1 số hiệu ứng hoạt hình làm cảnh báo dần mờ đi bằng cách thêm lớp .fade và .show theo ví dụ sau.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ví dụ Bootstrap 4 --- dammio.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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Hiệu ứng hoạt hình ở cảnh báo</h2>
<p>Lớp .fade và .show classes thêm hiệu ứng mờ dần (fade) khi nhấn nút đóng cảnh báo.</p>
<div class="alert alert-success alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Thành công!</strong> Cảnh báo thành công!
</div>
</div>
</body>
</html>
Kết luận
Như vậy, bạn đã học về cách tạo các cảnh báo (alert) trong Bootstrap thông qua các ví dụ. Bạn có thể dùng các cảnh báo này để tương tác về mặt thông tin với người dùng tốt hơn trên giao diện Web. Mời bạn theo dõi bài tiếp theo.
- APA:
Dammio. (2018). [Bootstrap 4] Phần 9: Các cảnh báo (Alerts) trong Bootstrap. https://www.dammio.com/2018/10/24/bootstrap-4-phan-9-cac-canh-bao-alerts-trong-bootstrap. - BibTeX:
@misc{dammio,
author = {Dammio},
title = {[Bootstrap 4] Phần 9: Các cảnh báo (Alerts) trong Bootstrap},
year = {2018},
url = {https://www.dammio.com/2018/10/24/bootstrap-4-phan-9-cac-canh-bao-alerts-trong-bootstrap},
urldate = {2024-12-05}
}
![[Bootstrap 4] Phần 1: Giới thiệu về Bootstrap 4](https://www.dammio.com/wp-content/uploads/2018/06/BS4-410x260.jpg "[Bootstrap 4] Phần 1: Giới thiệu về Bootstrap 4")
![[Bootstrap 4] Phần 11: Nhóm nút nhấn](https://www.dammio.com/wp-content/uploads/2019/08/bootstrap-social-410x260.png "[Bootstrap 4] Phần 11: Nhóm nút nhấn")
![[Bootstrap] Phần 27: Scrollspy](https://www.dammio.com/wp-content/uploads/2016/11/no-image-410x260.png "[Bootstrap] Phần 27: Scrollspy")
![[Bootstrap 4] Phần 14: Spinner (Con quay) trong Bootstrap 4](https://www.dammio.com/wp-content/uploads/2019/12/bootstrap_4_screen-410x260.jpg "[Bootstrap 4] Phần 14: Spinner (Con quay) trong Bootstrap 4")
trungvu.net
Mạng xã hội vũ htps://trungvu.net