Hướng dẫn what are bootstrap alerts - cảnh báo bootstrap là gì

• Trung Nguyen

• 05/04/2022

  Nội dung chính Show

  • Tạo thông báo cảnh báo với Bootstrap
  • Mẹo: Các lớp
    Primary! This is a simple primary alert box.
    Secondary! This is a simple secondary alert box.
    Dark! This is a simple dark alert box.
    Light! This is a simple light alert box.
    6 và
    Primary! This is a simple primary alert box.
    Secondary! This is a simple secondary alert box.
    Dark! This is a simple dark alert box.
    Light! This is a simple light alert box.
    7 trên phần tử
    Primary! This is a simple primary alert box.
    Secondary! This is a simple secondary alert box.
    Dark! This is a simple dark alert box.
    Light! This is a simple light alert box.
    8 kích hoạt hiệu ứng chuyển tiếp mờ dần trong khi đóng các hộp cảnh báo. Nếu bạn không muốn hiệu ứng chỉ cần loại bỏ các lớp này. Ngoài ra, lớp
    Primary! This is a simple primary alert box.
    Secondary! This is a simple secondary alert box.
    Dark! This is a simple dark alert box.
    Light! This is a simple light alert box.
    9 được yêu cầu trên phần tử
    Primary! This is a simple primary alert box.
    Secondary! This is a simple secondary alert box.
    Dark! This is a simple dark alert box.
    Light! This is a simple light alert box.
    8 để định vị nút
    Success! Your message has been sent successfully.
    Error! A problem has been occurred while submitting your data.
    Warning! There was a problem with your network connection.
    Info! Please read the comments carefully.
    1 thích hợp. Nếu cảnh báo của bạn không có nút đóng, bạn có thể bỏ qua lớp này.
  • Đây là bốn cảnh báo Bootstrap còn lại có thể được sử dụng cho các mục đích khác nhau.
  • Đây là bốn cảnh báo Bootstrap còn lại có thể được sử dụng cho các mục đích khác nhau.
  • Mẹo: Các lớp
    Primary! This is a simple primary alert box.
    Secondary! This is a simple secondary alert box.
    Dark! This is a simple dark alert box.
    Light! This is a simple light alert box.
    6 và
    Primary! This is a simple primary alert box.
    Secondary! This is a simple secondary alert box.
    Dark! This is a simple dark alert box.
    Light! This is a simple light alert box.
    7 trên phần tử
    Primary! This is a simple primary alert box.
    Secondary! This is a simple secondary alert box.
    Dark! This is a simple dark alert box.
    Light! This is a simple light alert box.
    8 kích hoạt hiệu ứng chuyển tiếp mờ dần trong khi đóng các hộp cảnh báo. Nếu bạn không muốn hiệu ứng chỉ cần loại bỏ các lớp này. Ngoài ra, lớp
    Primary! This is a simple primary alert box.
    Secondary! This is a simple secondary alert box.
    Dark! This is a simple dark alert box.
    Light! This is a simple light alert box.
    9 được yêu cầu trên phần tử
    Primary! This is a simple primary alert box.
    Secondary! This is a simple secondary alert box.
    Dark! This is a simple dark alert box.
    Light! This is a simple light alert box.
    8 để định vị nút
    Success! Your message has been sent successfully.
    Error! A problem has been occurred while submitting your data.
    Warning! There was a problem with your network connection.
    Info! Please read the comments carefully.
    1 thích hợp. Nếu cảnh báo của bạn không có nút đóng, bạn có thể bỏ qua lớp này.
  • Bạn cũng có thể đặt các phần tử HTML bổ sung như tiêu đề, đoạn văn và dấu phân chia bên trong một cảnh báo. Để quản lý khoảng cách giữa các phần tử, bạn có thể sử dụng các lớp tiện ích lề, như sau:
  • Bạn có thể áp dụng lớp tiện ích
    Success! Your message has been sent successfully.
    Error! A problem has been occurred while submitting your data.
    Warning! There was a problem with your network connection.
    Info! Please read the comments carefully.
    2 cho các liên kết bên trong bất kỳ hộp cảnh báo nào để nhanh chóng tạo các liên kết có màu phù hợp, như thể hiện trong ví dụ dưới đây:
  • Đóng cảnh báo qua thuộc tính data
  • Chỉ cần thêm thuộc tính
    Success! Your message has been sent successfully.
    Error! A problem has been occurred while submitting your data.
    Warning! There was a problem with your network connection.
    Info! Please read the comments carefully.
    3 vào nút đóng và nó sẽ tự động cho phép loại bỏ hộp thông báo cảnh báo chứa nó. Ngoài ra, hãy thêm lớp
    Primary! This is a simple primary alert box.
    Secondary! This is a simple secondary alert box.
    Dark! This is a simple dark alert box.
    Light! This is a simple light alert box.
    9 vào phần tử
    Primary! This is a simple primary alert box.
    Secondary! This is a simple secondary alert box.
    Dark! This is a simple dark alert box.
    Light! This is a simple light alert box.
    8 để định vị nút
    Success! Your message has been sent successfully.
    Error! A problem has been occurred while submitting your data.
    Warning! There was a problem with your network connection.
    Info! Please read the comments carefully.
    1 phù hợp.
  • Đóng cảnh báo qua JavaScript
  • Các phương pháp của Bootstrap Alert
  • Phương thức này đóng một cảnh báo bằng cách xóa nó khỏi DOM. Nếu các lớp
    Primary! This is a simple primary alert box.
    Secondary! This is a simple secondary alert box.
    Dark! This is a simple dark alert box.
    Light! This is a simple light alert box.
    6 và
    Primary! This is a simple primary alert box.
    Secondary! This is a simple secondary alert box.
    Dark! This is a simple dark alert box.
    Light! This is a simple light alert box.
    7 có trên phần tử, cảnh báo sẽ mờ dần trước khi nó bị xóa.

• 10 min read

Trong hướng dẫn này, bạn sẽ học cách tạo thông báo cảnh báo bằng Bootstrap Alert.

Tạo thông báo cảnh báo với Bootstrap

Hộp cảnh báo (alert) được sử dụng khá thường xuyên để làm nổi bật các thông tin cần sự chú ý ngay lập tức của người dùng cuối như thông báo cảnh báo, lỗi hoặc xác nhận.

Với Bootstrap, bạn có thể dễ dàng tạo các thông báo cảnh báo thanh lịch cho các mục đích khác nhau bằng cách thêm các lớp ngữ cảnh (ví dụ:

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

Bootstrap cung cấp tổng cộng 8 loại cảnh báo khác nhau. Ví dụ sau đây sẽ cho bạn thấy các cảnh báo thường được sử dụng nhất, đó là: thành công, lỗi hoặc nguy hiểm, thông tin và cảnh báo.

    Success! Your message has been sent successfully.
    




    Error! A problem has been occurred while submitting your data.
    




    Warning! There was a problem with your network connection.
    




    Info! Please read the comments carefully.
    

Kết quả của ví dụ trên sẽ giống như sau:

Đây là bốn cảnh báo Bootstrap còn lại có thể được sử dụng cho các mục đích khác nhau.

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

Kết quả của ví dụ trên sẽ giống như sau:

Đây là bốn cảnh báo Bootstrap còn lại có thể được sử dụng cho các mục đích khác nhau. Các lớp

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

6 và

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

7 trên phần tử

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

8 kích hoạt hiệu ứng chuyển tiếp mờ dần trong khi đóng các hộp cảnh báo. Nếu bạn không muốn hiệu ứng chỉ cần loại bỏ các lớp này. Ngoài ra, lớp

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

9 được yêu cầu trên phần tử

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

8 để định vị nút

    
    Success! Your message has been sent successfully.
    




    
    Error! A problem has been occurred while submitting your data.
    




    
    Warning! There was a problem with your network connection.
    




    
    Info! Please read the comments carefully.
    

1 thích hợp. Nếu cảnh báo của bạn không có nút đóng, bạn có thể bỏ qua lớp này.

Mẹo: Các lớp

Primary! This is a simple primary alert box.

Secondary! This is a simple secondary alert box.

Dark! This is a simple dark alert box.

Light! This is a simple light alert box.

6 và

Primary! This is a simple primary alert box.

Secondary! This is a simple secondary alert box.

Dark! This is a simple dark alert box.

Light! This is a simple light alert box.

7 trên phần tử

Primary! This is a simple primary alert box.

Secondary! This is a simple secondary alert box.

Dark! This is a simple dark alert box.

Light! This is a simple light alert box.

8 kích hoạt hiệu ứng chuyển tiếp mờ dần trong khi đóng các hộp cảnh báo. Nếu bạn không muốn hiệu ứng chỉ cần loại bỏ các lớp này. Ngoài ra, lớp

Primary! This is a simple primary alert box.

Secondary! This is a simple secondary alert box.

Dark! This is a simple dark alert box.

Light! This is a simple light alert box.

9 được yêu cầu trên phần tử

Primary! This is a simple primary alert box.

Secondary! This is a simple secondary alert box.

Dark! This is a simple dark alert box.

Light! This is a simple light alert box.

8 để định vị nút

Success! Your message has been sent successfully.

Error! A problem has been occurred while submitting your data.

Warning! There was a problem with your network connection.

Info! Please read the comments carefully.

1 thích hợp. Nếu cảnh báo của bạn không có nút đóng, bạn có thể bỏ qua lớp này.

Thêm icon vào cảnh báo Bootstrap

    
    Success! Your message has been sent successfully.
    




    
    Error! A problem has been occurred while submitting your data.
    




    
    Warning! There was a problem with your network connection.
    




    
    Info! Please read the comments carefully.
    

Kết quả của ví dụ trên sẽ giống như sau:

Đây là bốn cảnh báo Bootstrap còn lại có thể được sử dụng cho các mục đích khác nhau.

Mẹo: Các lớp

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

    
    Success! Your message has been sent successfully.
    




    
    Error! A problem has been occurred while submitting your data.
    




    
    Warning! There was a problem with your network connection.
    




    
    Info! Please read the comments carefully.
    

    
 Oops! Something went wrong.
    
Please enter a valid value in all the required fields before proceeding. If you need any help just place the mouse pointer above info icon next to the form field.
    

    
Once you have filled all the details, click on the 'Next' button to continue.
    

Kết quả của ví dụ trên sẽ giống như sau:

Đây là bốn cảnh báo Bootstrap còn lại có thể được sử dụng cho các mục đích khác nhau.

Mẹo: Các lớp

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

    
    Success! Your message has been sent successfully.
    




    
    Error! A problem has been occurred while submitting your data.
    




    
    Warning! There was a problem with your network connection.
    




    
    Info! Please read the comments carefully.
    

    Warning! A simple warning alert with an example link.
    

Kết quả của ví dụ trên sẽ giống như sau:

Đây là bốn cảnh báo Bootstrap còn lại có thể được sử dụng cho các mục đích khác nhau.

    Success! A simple success alert with an example link.
    




    Error! A simple danger alert with an example link.
    




    Warning! A simple warning alert with an example link.
    




    Info! A simple info alert with an example link.
    




    Primary! A simple primary alert with an example link.
    




    Secondary! A simple secondary alert with an example link.
    




    Dark! A simple dark alert with an example link.
    




    Light! A simple light alert with an example link.
    

Mẹo: Các lớp

Primary! This is a simple primary alert box.

Secondary! This is a simple secondary alert box.

Dark! This is a simple dark alert box.

Light! This is a simple light alert box.

6 và

Primary! This is a simple primary alert box.

Secondary! This is a simple secondary alert box.

Dark! This is a simple dark alert box.

Light! This is a simple light alert box.

7 trên phần tử

Primary! This is a simple primary alert box.

Secondary! This is a simple secondary alert box.

Dark! This is a simple dark alert box.

Light! This is a simple light alert box.

8 kích hoạt hiệu ứng chuyển tiếp mờ dần trong khi đóng các hộp cảnh báo. Nếu bạn không muốn hiệu ứng chỉ cần loại bỏ các lớp này. Ngoài ra, lớp

Primary! This is a simple primary alert box.

Secondary! This is a simple secondary alert box.

Dark! This is a simple dark alert box.

Light! This is a simple light alert box.

9 được yêu cầu trên phần tử

Primary! This is a simple primary alert box.

Secondary! This is a simple secondary alert box.

Dark! This is a simple dark alert box.

Light! This is a simple light alert box.

8 để định vị nút

Success! Your message has been sent successfully.

Error! A problem has been occurred while submitting your data.

Warning! There was a problem with your network connection.

Info! Please read the comments carefully.

1 thích hợp. Nếu cảnh báo của bạn không có nút đóng, bạn có thể bỏ qua lớp này.

Thêm icon vào cảnh báo Bootstrap

Bạn cũng có thể đặt các icon bên trong cảnh báo Bootstrap. Bạn có thể sử dụng các icon Bootstrap hoặc các icon của bên thứ ba như Font Awesome. Hãy xem ví dụ sau:

    Note! This is a simple example of dismissible alert.
    

Thêm nội dung vào bên trong cảnh báo Bootstrap

Bạn cũng có thể đặt các phần tử HTML bổ sung như tiêu đề, đoạn văn và dấu phân chia bên trong một cảnh báo. Để quản lý khoảng cách giữa các phần tử, bạn có thể sử dụng các lớp tiện ích lề, như sau:

Tạo màu liên kết bên trong cảnh báo Bootstrap

Bạn có thể áp dụng lớp tiện ích

Success! Your message has been sent successfully.

Error! A problem has been occurred while submitting your data.

Warning! There was a problem with your network connection.

Info! Please read the comments carefully.

2 cho các liên kết bên trong bất kỳ hộp cảnh báo nào để nhanh chóng tạo các liên kết có màu phù hợp, như thể hiện trong ví dụ dưới đây:

Tương tự, bạn có thể tạo màu phù hợp cho các liên kết bên trong các hộp cảnh báo khác. Hãy thử ví dụ sau:

Đóng cảnh báo qua thuộc tính data

Thuộc tính data cung cấp một cách đơn giản và dễ dàng để thêm chức năng đóng các hộp cảnh báo.

Chỉ cần thêm thuộc tính

Success! Your message has been sent successfully.

Error! A problem has been occurred while submitting your data.

Warning! There was a problem with your network connection.

Info! Please read the comments carefully.

3 vào nút đóng và nó sẽ tự động cho phép loại bỏ hộp thông báo cảnh báo chứa nó. Ngoài ra, hãy thêm lớp

Primary! This is a simple primary alert box.

Secondary! This is a simple secondary alert box.

Dark! This is a simple dark alert box.

Light! This is a simple light alert box.

9 vào phần tử

Primary! This is a simple primary alert box.

Secondary! This is a simple secondary alert box.

Dark! This is a simple dark alert box.

Light! This is a simple light alert box.

8 để định vị nút

Success! Your message has been sent successfully.

Error! A problem has been occurred while submitting your data.

Warning! There was a problem with your network connection.

Info! Please read the comments carefully.

1 phù hợp.

Sử dụng phần tử

    
    Success! Your message has been sent successfully.
    




    
    Error! A problem has been occurred while submitting your data.
    




    
    Warning! There was a problem with your network connection.
    




    
    Info! Please read the comments carefully.
    

Đóng cảnh báo qua JavaScript

Bạn cũng có thể loại bỏ một cảnh báo qua JavaScript. Hãy thử một ví dụ và xem nó hoạt động như thế nào:

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

Các phương pháp của Bootstrap Alert

Đây là các phương pháp chuẩn của bootstrap Alert:

Phương thức này đóng một cảnh báo bằng cách xóa nó khỏi DOM. Nếu các lớp

Primary! This is a simple primary alert box.

Secondary! This is a simple secondary alert box.

Dark! This is a simple dark alert box.

Light! This is a simple light alert box.

6 và

Primary! This is a simple primary alert box.

Secondary! This is a simple secondary alert box.

Dark! This is a simple dark alert box.

Light! This is a simple light alert box.

7 có trên phần tử, cảnh báo sẽ mờ dần trước khi nó bị xóa.

dispose

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

Các sự kiện của Bootstrap Alert

    Primary! This is a simple primary alert box.
    




    Secondary! This is a simple secondary alert box.
    




    Dark! This is a simple dark alert box.
    




    Light! This is a simple light alert box.
    

Lớp alert của Bootstrap bao gồm một số sự kiện để kết nối với chức năng cảnh báo.Comdy hữu ích và giúp bạn tiết kiệm thời gian

Sự kiệntắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.