Cảnh báo
Cung cấp các 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ố ít các thông báo cảnh báo có sẵn và linh hoạt.
Các ví dụ
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 (ví dụ .alert-success
:). Để loại bỏ nội tuyến, hãy sử dụng plugin JavaScript cảnh báo .
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
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 một dấu hiệu trực quan, điề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 hiển thị rõ ràng từ chính nội dung (ví dụ: văn bản hiển thị) hoặc được đưa vào thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung bị ẩn với .visually-hidden
lớp.
Ví dụ trực tiếp
Nhấp vào nút bên dưới để hiển thị một cảnh báo (ẩn với các kiểu nội tuyến để bắt đầu), sau đó loại bỏ (và hủy) nó bằng nút đóng được tích hợp sẵn.
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
Chúng tôi sử dụng JavaScript sau để kích hoạt bản demo cảnh báo trực tiếp của chúng tôi:
var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')
function alert(message, type) {
var wrapper = document.createElement('div')
wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'
alertPlaceholder.append(wrapper)
}
if (alertTrigger) {
alertTrigger.addEventListener('click', function () {
alert('Nice, you triggered this alert message!', 'success')
})
}
Màu sắc liên kết
Sử dụng .alert-link
lớp tiện ích để 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.
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
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 chia.
Làm tốt!
Rất tiếc, 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 cách khoảng cách trong cảnh báo hoạt động với loại nội dung này.
Bất cứ khi nào bạn cần, hãy đảm bảo sử dụng các tiện ích ký quỹ để giữ cho mọi thứ gọn gàng và đẹp mắt.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>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.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
Biểu tượng
Tương tự, bạn có thể sử dụng các tiện ích flexbox và Biểu tượng Bootstrap để tạo cảnh báo với các biểu tượng. Tùy thuộc vào các 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.
<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
<div>
An example alert with an icon
</div>
</div>
Cần nhiều hơn một biểu tượng cho cảnh báo của bạn? Cân nhắc sử dụng nhiều Biểu tượng Bootstrap hơn và tạo biểu tượng SVG cục bộ như vậy để dễ dàng tham chiếu lặp lại các biểu tượng giống nhau.
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
<symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</symbol>
<symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
</svg>
<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
<div>
An example alert with an icon
</div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
<div>
An example success alert with an icon
</div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div>
An example warning alert with an icon
</div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div>
An example danger alert with an icon
</div>
</div>
Loại bỏ
Sử dụng plugin JavaScript cảnh báo, có thể loại bỏ bất kỳ cảnh báo nội dòng nào. Đây là cách thực hiện:
- Đảm bảo bạn đã tải plugin cảnh báo hoặc JavaScript Bootstrap đã biên dịch.
- Thêm nút đóng và
.alert-dismissible
lớp, 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
data-bs-dismiss="alert"
thuộc tính, thuộc tính này sẽ kích hoạt chức năng JavaScript. Đảm bảo sử dụng<button>
phần tử 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ác cảnh báo khi loại bỏ chúng, hãy đảm bảo thêm
.fade
và.show
các lớp.
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:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
closed.bs.alert
sự kiện và đặt theo chương trình
focus()
đến 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
tabindex="-1"
vào phần tử đó.
Sass
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
Mixin biến thể
Được sử dụng kết hợp với $theme-colors
để tạo các lớp bổ trợ 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 ra các lớp bổ trợ với alert-variant()
mixin.
// 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
Khởi tạo
Khởi tạo các phần tử dưới dạng cảnh báo
var alertList = document.querySelectorAll('.alert')
var alerts = [].slice.call(alertList).map(function (element) {
return new bootstrap.Alert(element)
})
Với mục đích duy nhất là loại bỏ cảnh báo, không cần thiết phải khởi tạo thành phần theo cách thủ công thông qua JS API. Bằng cách sử dụng data-bs-dismiss="alert"
, thành phần sẽ được khởi tạo tự động và loại bỏ đúng cách.
Xem phần kích hoạt để biết thêm chi tiết.
Gây nên
Loại bỏ có thể đạt được với data
thuộc tính trên một nút trong cảnh báo như được minh họa bên dưới:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
hoặc trên một nút bên ngoài cảnh báo bằng cách sử dụng data-bs-target
như minh họa bên dưới:
<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>
Lưu ý rằng việc đóng một cảnh báo sẽ xóa nó khỏi DOM.
Phương pháp
Phương pháp | Sự mô tả |
---|---|
close |
Đóng một cảnh báo bằng cách xóa nó khỏi DOM. Nếu các lớp .fade và .show có trên phần tử, cảnh báo sẽ mờ dần trước khi nó bị xóa. |
dispose |
Hủy cảnh báo của một phần tử. (Xóa dữ liệu được lưu trữ trên phần tử DOM) |
getInstance |
Phương thức tĩnh cho phép bạn nhận được phiên bản cảnh báo được liên kết với một phần tử DOM, bạn có thể sử dụng nó như sau:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Phương thức static trả về một phiên bản cảnh báo được liên kết với một phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nó chưa được khởi tạo. Bạn có thể sử dụng nó như thế này:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Sự kiện
Plugin cảnh báo của Bootstrap cho thấy một vài sự kiện để kết nối với chức năng cảnh báo.
Biến cố | Sự mô tả |
---|---|
close.bs.alert |
Kích hoạt ngay lập tức khi close phương thức thể hiện được gọi. |
closed.bs.alert |
Kích hoạt khi cảnh báo đã được đóng và quá trình chuyển đổi CSS đã hoàn tất. |
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
// do something, for instance, explicitly move focus to the most appropriate element,
// so it doesn't get lost/reset to the start of the page
// document.getElementById('...').focus()
})