提醒框可以为用户提供醒目的操作提示。
提醒框可用于任何长度的内容,还可以选择性地加入关闭按钮。 要获得正确的展示效果,请使用 .alert-*
系列类,一共8个效果。
<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>
尽管上面的这些类可以对信息进行着色以提供视觉指示,但是这些指示不会传达给辅助技术的用户 - 例如屏幕阅读器。 因此如果某些内容很重要,请直接加入正文中,或者通过其他方式引用,例如使用 .sr-only
类隐藏这些必要的内容。
使用.alert-link
使用 .alert-link 来快速为提醒框中的链接增添合适的色彩.
<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 元素,比如标题、段落以及分隔线。
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>
使用提醒框的 JavaScript 插件,他能够将提醒框关闭,方法如下:
.alert-dismissible
类就可以了。 如果你要将按钮放在右上角的位置可以使用 .close
将按钮的位置进行调整。data-dismiss="alert"
属性用来触发 JavaScript 函数。另外尽量使用 <button>
元素来创建按钮,这可以在所有设备上提供正确的效果。.fade
和 .show
类来调整提醒框的显示或隐藏。你可以查看下面的实例:
<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="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
通过 JavaScript 插件启用关闭提醒框:
$('.alert').alert()
或者用提醒框內 按鈕上的 data
的属性, 如下所示:
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
请注意,关闭提醒框会将其从 DOM 中删除
方法 | 描述 |
---|---|
$().alert() |
发出提醒框,监听具有data-dismiss="alert" 属性的后代元素上的点击事件。 (使用 data-api 的自动初始化时不需要) |
$().alert('close') |
从 DOM 中删除来关闭提醒框。如果元素上出现.fade 和 .show 则在删除之前该提醒框将淡出. |
$().alert('dispose') |
销毁一个元素的提醒框 |
$(".alert").alert('close')
Bootstrap 提醒框插件提供额外的事件,可以直接调用提醒框函数。
事件 | 描述 |
---|---|
close.bs.alert |
当调用 close 实例方法时,此事件会立即触发。 |
closed.bs.alert |
提醒框关闭时,会触发此事件(等待CSS转换完成)。 |
$('#myAlert').on('closed.bs.alert', function () {
// do something…
})