Cảnh báo được tạo với lớp .alert
, tiếp theo là một trong bốn lớp theo ngữ cảnh .alert-success
, .alert-info
, .alert-warning
hoặc .alert-danger
Ví dụ
Thành công. Biểu thị một hành động thành công hoặc tích cực
Thông tin. Biểu thị một thay đổi hoặc hành động mang tính thông tin trung lập
Cảnh báo. Cho biết một cảnh báo có thể cần chú ý
Sự nguy hiểm. Biểu thị một hành động nguy hiểm hoặc có khả năng tiêu cực
Liên kết cảnh báo
Thêm lớp alert-link
vào bất kỳ liên kết nào bên trong hộp cảnh báo để tạo "liên kết có màu phù hợp"
Ví dụ
Thành công. Bạn nên
Cảnh báo đóng cửa
Nhấp vào biểu tượng "x" ở bên phải để đóng tôi
Để đóng thông báo cảnh báo, hãy thêm lớp .alert-dismissible
vào vùng chứa cảnh báo. Sau đó, thêm class="close"
và data-dismiss="alert"
vào một liên kết hoặc phần tử nút [khi bạn nhấp vào hộp cảnh báo này sẽ biến mất]
Ví dụ
Thành công. Biểu thị một hành động thành công hoặc tích cực
Thuộc tính aria-* và giải thích ×
Để giúp cải thiện khả năng truy cập cho những người sử dụng trình đọc màn hình, bạn nên bao gồm thuộc tính aria-label="close" khi tạo nút đóng
× [×] là một thực thể HTML là biểu tượng ưu tiên cho các nút đóng, thay vì chữ "x"
Để biết danh sách tất cả các Thực thể HTML, hãy truy cập Tài liệu tham khảo về Thực thể HTML của chúng tôi
Cảnh báo động
Nhấp vào biểu tượng "x" ở bên phải để đóng tôi. Tôi sẽ "phai" ra
Các lớp .alert
0 và .alert
1 thêm hiệu ứng mờ dần khi đóng thông báo cảnh báo
Kiểm tra bản thân với các bài tập
Bài tập
Thêm một lớp Bootstrap "alert" để hiển thị kết quả của một hành động thành công
Success!
Cung cấp câu trả lời "
bắt đầu bài tập
Toàn bộ tài liệu tham khảo cảnh báo Bootstrap
Để có tham khảo đầy đủ về tất cả các tùy chọn, phương thức và sự kiện cảnh báo, hãy truy cập Tham khảo cảnh báo Bootstrap JS của chúng tôi
Cảnh báo có sẵn cho bất kỳ độ dài văn bản nào, cũng như nút đóng tùy chọn. Để tạo kiểu phù hợp, hãy sử dụng một trong tám lớp ngữ cảnh bắt buộc [e. g. ,
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]. Để loại bỏ nội tuyến, hãy sử dụngCả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!
Truyền đạt ý nghĩa cho các công nghệ hỗ trợ
Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp dấu hiệu trực quan, dấu hiệu này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ – chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc rõ ràng từ chính nội dung [e. g. văn bản hiển thị], hoặc được bao gồm thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung ẩn với 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.
5Màu sắc liên kết
Sử dụng lớp tiện í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.
6 để nhanh chóng cung cấp các liên kết có màu phù hợp trong bất kỳ cảnh báo nào
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.
Nội dung bổ sung
Cảnh báo cũng có thể chứa các phần tử HTML bổ sung như tiêu đề, đoạn văn và dấu phân cách
Làm tốt
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.
Biểu tượng
Tương tự, bạn có thể sử dụng tiện ích flexbox và Biểu tượng Bootstrap để tạo cảnh báo bằng 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
Một ví dụ cảnh báo với một biểu tượng
An example alert with an icon
Cần nhiều hơn một biểu tượng cho cảnh báo của bạn?
Một ví dụ cảnh báo với một biểu tượng
Một cảnh báo thành công ví dụ với một biểu tượng
Một ví dụ cảnh báo cảnh báo với một biểu tượng
Một ví dụ về cảnh báo nguy hiểm với một biểu tượng
________số 8_______
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
7, bổ sung thêm phần đệm ở bên phải của cảnh báo và định vị nút đóngA 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
8 để kích hoạt chức năng JavaScript. Đảm bảo sử dụng phần tử với nó để có hành vi phù hợp trên tất cả các thiết bị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 động cho các cảnh báo khi loại bỏ chúng, hãy đảm bảo thêm các lớp
9 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.
0Well 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.
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.
Khi cảnh báo bị loại bỏ, phần tử sẽ bị xóa hoàn toàn khỏi cấu trúc trang. Nếu người dùng bàn phím loại bỏ cảnh báo bằng nút đóng, tiêu điểm của họ sẽ đột ngột bị mất và tùy thuộc vào trình duyệt, được đặt lại về đầu trang/tài liệu. Vì lý do này, chúng tôi khuyên bạn nên bao gồm JavaScript bổ sung lắng nghe sự kiện
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.
1 và đặt
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.
2 theo chương trình vào vị trí thích hợp nhất trong trang. Nếu bạn định di chuyển tiêu điểm đến một phần tử không tương tác thường không nhận được tiêu điểm, hãy đảm bảo thê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.
3 vào phần tử đóngổ ngáo
Biến
$alert-padding-y: $spacer;
$alert-padding-x: $spacer;
$alert-margin-bottom: 1rem;
$alert-border-radius: $border-radius;
$alert-link-font-weight: $font-weight-bold;
$alert-border-width: $border-width;
$alert-bg-scale: -80%;
$alert-border-scale: -70%;
$alert-color-scale: 40%;
$alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x plus default padding on either side
hỗn hợp biến thể
Được sử dụng kết hợp với
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.
4 để tạo các lớp sửa đổi theo ngữ cảnh cho các cảnh báo của chúng tôi@mixin alert-variant[$background, $border, $color] {
color: $color;
@include gradient-bg[$background];
border-color: $border;
.alert-link {
color: shade-color[$color, 20%];
}
}
Vòng
Vòng lặp tạo các lớp sửa đổi với mixin
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.
5// Generate contextual modifier classes for colorizing the alert.
@each $state, $value in $theme-colors {
$alert-background: shift-color[$value, $alert-bg-scale];
$alert-border: shift-color[$value, $alert-border-scale];
$alert-color: shift-color[$value, $alert-color-scale];
@if [contrast-ratio[$alert-background, $alert-color] < $min-contrast-ratio] {
$alert-color: mix[$value, color-contrast[$alert-background], abs[$alert-color-scale]];
}
.alert-#{$state} {
@include alert-variant[$alert-background, $alert-border, $alert-color];
}
}
hành vi JavaScript
Gây nên
Cho phép loại bỏ cảnh báo qua JavaScript
var alertList = document.querySelectorAll['.alert']
alertList.forEach[function [alert] {
new bootstrap.Alert[alert]
}]
Hoặc với các thuộc tính
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.
6 trên một nút trong cảnh báo, như minh họa ở trên
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.
0Lưu ý rằng việc đóng cảnh báo sẽ xóa cảnh báo đó khỏi DOM
phương pháp
Ví dụ, bạn có thể tạo một thể hiện cảnh báo bằng hàm tạo cảnh báo
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Điều này làm cho một cảnh báo lắng nghe các sự kiện nhấp chuột trên các phần tử con cháu có 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. [Không cần thiết khi sử dụng tính năng khởi tạo tự động của data-api. ]