警告框（Alerts）
為典型用戶操作提供上下文反饋消息，并提供少量可用且靈活的警報消息。
On this page
Examples
警報可用于任何長度的文本，以及可選的關閉按鈕。要獲得正確的樣式，請使用八個必需的上下文類之一（例如，.alert-success）。對于內聯移除，請使用alerts JavaScript插件。
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!
<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>向輔助技術傳達意義
使用顏色來增加意義只會提供一種視覺指示，而不會傳達給輔助技術（如屏幕閱讀器）的用戶。確保由顏色表示的信息在內容本身（例如可見文本）中是明顯的，或者通過其他方式包含，例如使用 .visually-hidden類隱藏的其他文本。
鏈接顏色
使用 .alert-link 實用程序類可以在任何警報中快速提供匹配的彩色鏈接。
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.
<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>附加內容
警報還可以包含其他HTML元素，如標題、段落和分隔符。
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.
<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>移除
使用alert JavaScript插件，可以關閉任何內聯警報。方法如下：
- 確保已加載警報插件或已編譯的引導JavaScript。
- 添加一個關閉按鈕和
.alert-dismissible類，該類在警報的右側添加額外的填充，并定位關閉按鈕。 - 在close按鈕上，添加code>data-bs-dismiss="alert"屬性，該屬性觸發JavaScript功能。一定要使用button元素在所有設備上進行正確的操作。
- 要在解除警報時設置警報動畫，請確保添加.fade和.show類。
您可以在現場演示中看到這一點：
Holy guacamole! You should check in on some of those fields below.
<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>
當警報解除時，元素將從頁面結構中完全移除。如果鍵盤用戶使用“關閉”按鈕解除警報，他們的焦點將突然丟失，并根據瀏覽器的不同，重置為頁面/文檔的開頭。因此，我們建議包含額外的JavaScript來偵聽closed.bs.alert 事件并以編程方式將focus（）設置到頁面中最合適的位置。如果您計劃將焦點移動到通常不接收焦點的非交互元素，請確保將
tabindex="-1"添加到該元素。
Sass
Variables
$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
Variant mixin
Used in combination with $theme-colors to create contextual modifier classes for our alerts.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Loop
Loop that generates the modifier classes with the 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);
}
}
JavaScript behavior
Triggers
Enable dismissal of an alert via JavaScript:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Or with data attributes on a button within the alert, as demonstrated above:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Note that closing an alert will remove it from the DOM.
Methods
You can create an alert instance with the alert constructor, for example:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
This makes an alert listen for click events on descendant elements which have the
data-bs-dismiss="alert" attribute. (Not necessary when using the data-api’s auto-initialization.)
| Method | Description |
|---|---|
close
|
Closes an alert by removing it from the DOM. If the .fade and .show classes are
present on the element, the alert will fade out before it is removed.
|
dispose
|
Destroys an element's alert. (Removes stored data on the DOM element) |
getInstance
|
Static method which allows you to get the alert instance associated to a DOM element, you can use it like
this: bootstrap.Alert.getInstance(alert)
|
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Events
Bootstrap’s alert plugin exposes a few events for hooking into alert functionality.
| Event | Description |
|---|---|
close.bs.alert |
Fires immediately when the close instance method is called.
|
closed.bs.alert |
Fired when the alert has been closed and CSS transitions have completed. |
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()
})