警告提示框

为平常的用户操作提供上下文反馈消息，并提供少量可用且灵活的警报消息。

更新于: 2023-04-30 14:28:21 查看: 550

发布于: 2021-9-1 21:33 发布者: 大米

示例

警报可用于任何长度的文本，以及一个可选的关闭按钮。为了获得合适的样式，可以使用八个必须的上下文类中的一个(例如，.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>

链接颜色

使用 .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插件，可以内联解除任何警报。方法如下:

确保您已经加载了alert插件，或者已编译的引导程序JavaScript。
添加一个关闭按钮和 .alert-dismissible 类，该类在警报的右侧添加额外的填充并定位关闭按钮。
在关闭按钮上，添加 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行为

触发器

通过JavaScript启用取消警告:

var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})

或在警报内的按钮上使用 data 属性，如上所示:

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

注意当警报被解除时，元素将从页面结构中完全删除。

方法

你可以用alert构造函数创建一个alert实例，例如:

var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)

这使得有 data-bs-dismiss="alert" 属性的后代元素的点击事件的监听警报。(在使用data-api的自动初始化时不需要)

方法	描述
`close`	通过从DOM中删除它来关闭警告提示框。如果元素上存在 `.fade` 和 `.show` ，则警告提示框将在被删除之前会淡入淡出。
`dispose`	销毁元素的警告提示框。（删除DOM元素上存储的数据）
`getInstance`	允许您获取与DOM元素关联的警告实例的静态方法，可以像这样使用它： `bootstrap.Alert.getInstance(alert)`

var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

事件

Bootstrap的alert插件公开了一些事件来连接alert功能。

事件	描述
`close.bs.alert`	当调用 `close` 实例方法时立即触发。
`closed.bs.alert`	在警报关闭且CSS转换完成时触发。

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()
})

扫描二维码，手机查看

声明：部分数据/图片来源互联网，不代表Hluse Doc.,真实性请妥善甄别。