Hướng dẫn alert = bootstrap

read this message.

Info! You should read this message.
Warning! You should read this message.
Danger! You should read this message.

2- Alert với nút đóng

Để tạo một Alert có thể đóng được [closable], bạn cần sử dụng lớp .alert-dismissible cho Alert, và thêm các thuộc tính [attribute]: class="close" data-dismiss="alert" cho nút đóng. Nút đóng sẽ hiển thị ở góc trên bên phải của Alert, khi người dùng nhấn vào nút này Alert sẽ được ẩn đi.

closing-alert-example.html




   
      
      Alert Example
      
   
   
      
Hi Tran! Welcome back! ×

Bootstrap Tutorials

  • Bootstrap Buttons
  • Bootstrap Form Groups

Class/Attribute Mô tả
.alert-dismissible Bạn có thể không cần tới lớp này, vì nó không ảnh hưởng đến việc Alert có thể đóng được hay không. Nhưng nó giúp thiết lập padding cho .close.
data-dismiss="alert" Thuộc tính này cần được thêm vào cho nút đóng [x], Bootstrap tự động đăng ký hàm xử lý cho sự kiện người dùng nhấn vào nút này. Khi người dùng nhấn vào nút đóng [x], Alert sẽ được ẩn đi.

3- Tùy biến Alert

Bạn có thể tạo ra một Alert tùy biến, với nội dung HTML phức tạp, hãy nhớ rằng Bootstrap cung cấp cho bạn một lớp .alert-heading để áp dụng cho "phần mở đầu" [heading] của Alert.

.alert-heading


Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Chủ Đề