Alert trong Bootstrap 5:
Trong Bootstrap 5, “Alerts” là các thành phần được sử dụng để hiển thị các thông báo hoặc thông tin cho người dùng một cách rõ ràng và thuận tiện. Các “Alerts” có thể được sử dụng để cảnh báo về các tình huống quan trọng, hiển thị thông tin hoặc gửi các tin nhắn ngắn cho người dùng. Dưới đây là một ví dụ về cách sử dụng “Alerts” trong Bootstrap 5:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<title>Bootstrap 5 Alert Example</title>
</head>
<body>
<div class="container mt-5">
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
This is an info alert—check it out!
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Trong ví dụ trên:
- Chúng tôi sử dụng các lớp
alert alert-{type}để tạo các “Alerts” với các loại khác nhau nhưalert-primary,alert-success,alert-danger,alert-warning,alert-info. - Mỗi “Alert” được đặt trong một
<div>với lớpalertvà thuộc tínhrole="alert". - Nội dung của “Alert” được đặt bên trong thẻ
<div>.
Vui lòng lưu ý rằng bạn cần thêm liên kết đến tệp CSS và JavaScript của Bootstrap để chạy đúng cách.