Hướng dẫn alert = bootstrap

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- Bootstrap Alert

Alert là một thành phần giao diện được xây dựng sẵn của Bootstrap, nó là một vùng không gian trang (page) hiển thị một thông diệp (message), thông điệp có thể là một thông tin hoặc một cảnh báo lỗi, ... (info, warning, danger,..).
Khác với thành phần Model, Alert không hiển thị như một cửa sổ, nó là một vùng trên trang nhưng có thể có nút "x" giúp bạn có thể đóng vùng không gian này lại.

alert-example.html

   
      
      
      
   
   
      


         

            Hi Tran! Welcome back!
            x
         


         
Bootstrap Tutorials
         

            
Bootstrap Buttons
            
Bootstrap Form Groups
         
      

      
      
      

   

Sử dụng lớp .alert kết hợp với một trong các lớp .alert-info, .alert-warning, .alert-danger, .. để tạo ra một Alert phù hợp với ngữ cảnh của bạn.

.alert-primary
.alert-secondary
.alert-success
.alert-danger
.alert-warning
.alert-info
.alert-dark

.alert-link

Có thể bên trong một Alert bạn có sử dụng các thẻ (tag) , bạn nên sử dụng lớp .alert-link cho thẻ này. Lớp .alert-link sẽ thiết lập mầu sắc cho thẻ khớp với ngữ cảnh của Alert.

.alert-link

   Success! You should 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

   
      
      
      
   
   
      


         

            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.