Bootstrap: Thông báo (Alerts)
Giải phóng thời gian, khai phóng năng lực
Cung cấp các tin nhắn theo ngữ cảnh tương ứng với các hành động đặc trưng của người dùng bằng cách sử dụng các tin nhắn thông báo linh hoạt và dễ sử dụng. Để hủy tin nhắn, hãy them khảo plugin thông báo.
Các ví dụ
Hãy bọc text bất kỳ và nút hủy tin nhắn (nếu có) bằng .alert
cùng với một trong bốn class theo ngữ cảnh (e.g., .alert-success
) để hiển thị các tin nhắn thông báo một cách cơ bản nhất.
Không có class mặc định
Các tin nhắn thông báo không có class mặc định, chỉ có class cơ sở và các class tùy chỉnh. Một tin nhắn thông báo có màu xám mặc định không có ý nghĩa gì cả, vì thế hãy luôn xác định rõ loại tin nhắn thông qua các class theo ngữ cảnh. Các class đó tương ứng với bốn loại tin nhắn: Thành công, thông tin, cảnh báo hoặc nguy hiểm.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
Hủy tin nhắn thông báo
Bạn có thể thêm nút "hủy tin nhắn" bằng cách thêm .alert-dismissable
vào tin nhắn và sử dụng nút "đóng".
<div class="alert alert-warning alert-dismissable" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Đảm bảo hoạt động tốt trên tất cả các loại thiết bị
Hãy luôn sử dụng phần tử <button>
cùng với thuộc tính dữ liệu data-dismiss="alert"
.
Liên kết trong tin nhắn
Hãy sử dụng class .alert-link
để nhanh chóng đổi màu liên kết một cách phù hợp trong tin nhắn.
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
Thanh tiến trình
Giải phóng thời gian, khai phóng năng lực