警告框（Alerts）

為典型用戶操作提供上下文反饋消息，并提供少量可用且靈活的警報(bào)消息。

On this page

Examples

警報(bào)可用于任何長(zhǎng)度的文本，以及可選的關(guān)閉按鈕。要獲得正確的樣式，請(qǐng)使用八個(gè)必需的上下文類之一（例如，.alert-success）。對(duì)于內(nèi)聯(lián)移除，請(qǐng)使用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>

向輔助技術(shù)傳達(dá)意義

使用顏色來增加意義只會(huì)提供一種視覺指示，而不會(huì)傳達(dá)給輔助技術(shù)（如屏幕閱讀器）的用戶。確保由顏色表示的信息在內(nèi)容本身（例如可見文本）中是明顯的，或者通過其他方式包含，例如使用 .visually-hidden類隱藏的其他文本。

鏈接顏色

使用 .alert-link 實(shí)用程序類可以在任何警報(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.

<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)容

警報(bào)還可以包含其他HTML元素，如標(biāo)題、段落和分隔符。

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插件，可以關(guān)閉任何內(nèi)聯(lián)警報(bào)。方法如下：

確保已加載警報(bào)插件或已編譯的引導(dǎo)JavaScript。
添加一個(gè)關(guān)閉按鈕和.alert-dismissible類，該類在警報(bào)的右側(cè)添加額外的填充，并定位關(guān)閉按鈕。
在close按鈕上，添加code>data-bs-dismiss="alert"屬性，該屬性觸發(fā)JavaScript功能。一定要使用button元素在所有設(shè)備上進(jìn)行正確的操作。
要在解除警報(bào)時(shí)設(shè)置警報(bào)動(dòng)畫，請(qǐng)確保添加.fade和.show類。

您可以在現(xiàn)場(chǎng)演示中看到這一點(diǎn)：

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>

當(dāng)警報(bào)解除時(shí)，元素將從頁面結(jié)構(gòu)中完全移除。如果鍵盤用戶使用“關(guān)閉”按鈕解除警報(bào)，他們的焦點(diǎn)將突然丟失，并根據(jù)瀏覽器的不同，重置為頁面/文檔的開頭。因此，我們建議包含額外的JavaScript來偵聽closed.bs.alert 事件并以編程方式將focus（）設(shè)置到頁面中最合適的位置。如果您計(jì)劃將焦點(diǎn)移動(dòng)到通常不接收焦點(diǎn)的非交互元素，請(qǐng)確保將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()
})