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
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áoCả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áoMộ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
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ắpTốt lắm
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.
- 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.
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.
- Để 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.
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.
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[];
}];
}];
0vị 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.
8Chọn căn ngang/dọc
Vị trí hiện tại. trên cùng bên phảiTrì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[];
}];
}];
2Thù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