Bootstrap: Thông báo (Alerts)

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
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.

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
<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".

×CloseWarning! Better check yourself, you're not looking too good.
<div class="alert alert-warning alert-dismissable" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</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.

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
<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

 
» Tiếp: Thanh tiến trình (Progress bars)
« Trước: Thumbnail
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!