Cảnh báo bootstrap là gì và bạn sẽ tạo chúng như thế nào?

Cảnh báo đáp ứng được xây dựng với Bootstrap 5 mới nhất. Cảnh báo cung cấp thông báo phản hồi theo ngữ cảnh cho các hành động thông thường của người dùng với một số hộp cảnh báo linh hoạt và có trách nhiệm

Cung cấp thông báo phản hồi theo ngữ cảnh cho các hành động thông thường của người dùng với một số thông báo cảnh báo có sẵn và linh hoạt

Ghi chú. Đọc tab API để tìm tất cả các tùy chọn khả dụng và tùy chỉnh nâng cao


ví dụ cơ bản

Nhấp vào nút để khởi chạy cảnh báo

Sơ cấp Phụ thành công Thông tin cảnh báo nguy hiểm Sáng tối

        
            
            
            Primary
            Secondary
            Success
            Danger
            Warning
            Info
            Light
            Dark

            
            

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

        
            
            const triggers = [
              'primary',
              'secondary',
              'success',
              'danger',
              'warning',
              'info',
              'light',
              'dark',
            ];
            const basicInstances = [
              'alert-primary',
              'alert-secondary',
              'alert-success',
              'alert-danger',
              'alert-warning',
              'alert-info',
              'alert-light',
              'alert-dark',
            ];

            triggers.forEach((trigger, index) => {
              let basicInstance = mdb.Alert.getInstance(document.getElementById(basicInstances[index]));
              document.getElementById(trigger).addEventListener('click', () => {
                basicInstance.show();
              });
            });
          
        
    


ví dụ tĩnh

Sử dụng

        
            
            

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

1, tiếp theo là một trong các lớp theo ngữ cảnh
        
            
            

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

2,
        
            
            

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

3,
        
            
            

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

4,
        
            
            

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

5,
        
            
            

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

6,
        
            
            

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

7,
        
            
            

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

8 hoặc
        
            
            

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

9 để tạo cảnh báo

Cảnh báo chính đơn giản—hãy kiểm tra

Một cảnh báo phụ đơn giản—hãy kiểm tra

Một cảnh báo thành công đơn giản—hãy kiểm tra

Cảnh báo nguy hiểm đơn giản—hãy kiểm tra

Cảnh báo cảnh báo đơn giản—hãy kiểm tra

Cảnh báo thông tin đơn giản—hãy kiểm tra

Một cảnh báo ánh sáng đơn giản—hãy kiểm tra

Cảnh báo tối đơn giản—hãy kiểm tra

        
            
            

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!


Màu sắc liên kết

Sử dụng lớp

        
            
            

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

0 để tạo các liên kết có màu phù hợp bên trong hộp cảnh báo

Một cảnh báo thông tin đơn giản với. Hãy cho nó một cú nhấp chuột nếu bạn thích

Một cảnh báo tối đơn giản với. Hãy cho nó một cú nhấp chuột nếu bạn thích

        
            
            

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.


Biểu tượng

Sử dụng Font Awesome Icons để tạo cảnh báo với các biểu tượng. Tùy thuộc vào biểu tượng và nội dung của bạn, bạn có thể muốn thêm nhiều tiện ích hoặc kiểu tùy chỉnh

Cảnh báo chính đơn giản—hãy kiểm tra

Một cảnh báo phụ đơn giản—hãy kiểm tra

Một cảnh báo thành công đơn giản—hãy kiểm tra

Cảnh báo nguy hiểm đơn giản—hãy kiểm tra

Cảnh báo cảnh báo đơn giản—hãy kiểm tra

Cảnh báo thông tin đơn giản—hãy kiểm tra

Một cảnh báo ánh sáng đơn giản—hãy kiểm tra

Cảnh báo tối đơn giản—hãy kiểm tra

        
            
            

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!


Nội dung bổ sung

Cảnh báo có thể chứa các yếu tố bổ sung như tiêu đề, đoạn văn và dải phân cách

Tốt lắm

Aww yeah, bạn đã đọc thành công thông báo cảnh báo quan trọng này. Văn bản ví dụ này sẽ chạy lâu hơn một chút để bạn có thể thấy khoảng cách trong cảnh báo hoạt động như thế nào với loại nội dung này


Bất cứ khi nào bạn cần, hãy nhớ sử dụng các tiện ích ký quỹ để giữ mọi thứ gọn gàng và ngăn nắp

        
            
            

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.


sa thải

Sử dụng plugin JavaScript cảnh báo, có thể loại bỏ mọi cảnh báo nội tuyến. Đây là cách

  • Hãy chắc chắn rằng bạn đã tải plugin cảnh báo hoặc JavaScript Bootstrap đã biên dịch
  • Thêm một nút đóng và lớp
            
                
                

    A simple primary alert with an example link. Give it a click if you like.

    A simple secondary alert with an example link. Give it a click if you like.

    A simple success alert with an example link. Give it a click if you like.

    A simple danger alert with an example link. Give it a click if you like.

    A simple warning alert with an example link. Give it a click if you like.

    A simple info alert with an example link. Give it a click if you like.

    A simple light alert with an example link. Give it a click if you like.

    A simple dark alert with an example link. Give it a click if you like.

    1, bổ sung thêm phần đệm ở bên phải của cảnh báo và định vị nút đóng
  • Trên nút đóng, hãy thêm thuộc tính
            
                
                

    A simple primary alert with an example link. Give it a click if you like.

    A simple secondary alert with an example link. Give it a click if you like.

    A simple success alert with an example link. Give it a click if you like.

    A simple danger alert with an example link. Give it a click if you like.

    A simple warning alert with an example link. Give it a click if you like.

    A simple info alert with an example link. Give it a click if you like.

    A simple light alert with an example link. Give it a click if you like.

    A simple dark alert with an example link. Give it a click if you like.

    2 để kích hoạt chức năng JavaScript. Đảm bảo sử dụng phần tử
            
                
                

    A simple primary alert with an example link. Give it a click if you like.

    A simple secondary alert with an example link. Give it a click if you like.

    A simple success alert with an example link. Give it a click if you like.

    A simple danger alert with an example link. Give it a click if you like.

    A simple warning alert with an example link. Give it a click if you like.

    A simple info alert with an example link. Give it a click if you like.

    A simple light alert with an example link. Give it a click if you like.

    A simple dark alert with an example link. Give it a click if you like.

    3 với nó để có hành vi phù hợp trên tất cả các thiết bị
  • Để tạo hiệu ứng cho cảnh báo khi loại bỏ chúng, hãy đảm bảo thêm
            
                
                

    A simple primary alert with an example link. Give it a click if you like.

    A simple secondary alert with an example link. Give it a click if you like.

    A simple success alert with an example link. Give it a click if you like.

    A simple danger alert with an example link. Give it a click if you like.

    A simple warning alert with an example link. Give it a click if you like.

    A simple info alert with an example link. Give it a click if you like.

    A simple light alert with an example link. Give it a click if you like.

    A simple dark alert with an example link. Give it a click if you like.

    4 và
            
                
                

    A simple primary alert with an example link. Give it a click if you like.

    A simple secondary alert with an example link. Give it a click if you like.

    A simple success alert with an example link. Give it a click if you like.

    A simple danger alert with an example link. Give it a click if you like.

    A simple warning alert with an example link. Give it a click if you like.

    A simple info alert with an example link. Give it a click if you like.

    A simple light alert with an example link. Give it a click if you like.

    A simple dark alert with an example link. Give it a click if you like.

    5

Bạn có thể thấy điều này đang hoạt động với một bản demo trực tiếp

Guacamole thánh. Bạn nên kiểm tra một số lĩnh vực dưới đây

        
            
            

Holy guacamole! You should check in on some of those fields below.


Trình diễn

Bạn có thể hiển thị cảnh báo theo cách thủ công bằng phương pháp

        
            
            

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

6

        
            
            

Hidden alert!

        
            
            mdb.Alert.getInstance(document.getElementById('show-example')).show();
          
        
    


Ẩn giấu

Bạn có thể ẩn cảnh báo theo cách thủ công bằng phương pháp

        
            
            

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

7

        
            
            

Hide me!

        
            
            const triggers = [
              'primary',
              'secondary',
              'success',
              'danger',
              'warning',
              'info',
              'light',
              'dark',
            ];
            const basicInstances = [
              'alert-primary',
              'alert-secondary',
              'alert-success',
              'alert-danger',
              'alert-warning',
              'alert-info',
              'alert-light',
              'alert-dark',
            ];

            triggers.forEach((trigger, index) => {
              let basicInstance = mdb.Alert.getInstance(document.getElementById(basicInstances[index]));
              document.getElementById(trigger).addEventListener('click', () => {
                basicInstance.show();
              });
            });
          
        
    
0


vị trí

Bạn có thể đặt vị trí của mọi cảnh báo bằng thuộc tính

        
            
            

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

8

Chọn căn ngang/dọc

Vị trí hiện tại. trên cùng bên phải

Trình diễn

Chỉ cho tôi bất cứ nơi nào bạn muốn

        
            
            const triggers = [
              'primary',
              'secondary',
              'success',
              'danger',
              'warning',
              'info',
              'light',
              'dark',
            ];
            const basicInstances = [
              'alert-primary',
              'alert-secondary',
              'alert-success',
              'alert-danger',
              'alert-warning',
              'alert-info',
              'alert-light',
              'alert-dark',
            ];

            triggers.forEach((trigger, index) => {
              let basicInstance = mdb.Alert.getInstance(document.getElementById(basicInstances[index]));
              document.getElementById(trigger).addEventListener('click', () => {
                basicInstance.show();
              });
            });
          
        
    
1

        
            
            const triggers = [
              'primary',
              'secondary',
              'success',
              'danger',
              'warning',
              'info',
              'light',
              'dark',
            ];
            const basicInstances = [
              'alert-primary',
              'alert-secondary',
              'alert-success',
              'alert-danger',
              'alert-warning',
              'alert-info',
              'alert-light',
              'alert-dark',
            ];

            triggers.forEach((trigger, index) => {
              let basicInstance = mdb.Alert.getInstance(document.getElementById(basicInstances[index]));
              document.getElementById(trigger).addEventListener('click', () => {
                basicInstance.show();
              });
            });
          
        
    
2


Thùng đựng hàng

Bạn có thể hiển thị cảnh báo ở bất cứ đâu. Chỉ cần đặt nó vào phần tử đích của bạn và điền vào thuộc tính

        
            
            

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

9 với id hoặc lớp cha

Bạn sẽ tạo cảnh báo loại bỏ bootstrap như thế nào?

Chúng tôi cần thêm trường lớp và vai trò dưới dạng cảnh báo . Sau đó, phần tử sẽ hoạt động như một Cảnh báo. Bây giờ, chúng tôi sẽ tạo một nút để loại bỏ cảnh báo. Chúng ta có thể tạo cảnh báo bên trong phần tử bằng cách sử dụng trường loại bỏ dữ liệu của nút dưới dạng cảnh báo hoặc bên ngoài vùng chứa một hàm javascript.

Làm cách nào để thêm cảnh báo bootstrap trong HTML?

Đây là cách. .
Đảm bảo bạn đã tải plugin cảnh báo hoặc JavaScript Bootstrap đã biên dịch
Nếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, nó yêu cầu sử dụng. js. .
Thêm một nút loại bỏ và. lớp có thể loại bỏ cảnh báo, bổ sung thêm phần đệm ở bên phải của cảnh báo và định vị. nút đóng

Những lớp bootstrap 4 nào có thể được sử dụng để tạo cảnh báo thành công?

Bootstrap 4 cung cấp một cách dễ dàng để tạo thông báo cảnh báo được xác định trước. × Thành công. Hộp cảnh báo này cho biết một hành động thành công hoặc tích cực.