Source警报
使用少量可用且灵活的警报消息为典型用户操作提供上下文反馈消息。
例子
警报可用于任何长度的文本,以及可选的关闭按钮。要获得正确的样式,请使用八个必需的上下文类之一(例如,.alert-success
)。对于内联解雇,请使用alerts jQuery 插件。
一个简单的主要警报——检查一下!
一个简单的辅助警报——检查一下!
一个简单的成功警报——检查一下!
一个简单的危险警报——检查一下!
一个简单的警告警报——检查一下!
一个简单的信息警报——检查一下!
一个简单的灯光警报——检查一下!
一个简单的黑暗警报——检查一下!
向辅助技术传达意义
使用颜色来添加含义仅提供视觉指示,不会传达给辅助技术的用户 - 例如屏幕阅读器。确保由颜色表示的信息在内容本身(例如可见文本)中是显而易见的,或者通过替代方式包含在内,例如隐藏在.sr-only
类中的附加文本。
链接颜色
使用.alert-link
实用程序类在任何警报中快速提供匹配的彩色链接。
附加内容
警报还可以包含额外的 HTML 元素,如标题、段落和分隔符。
做得好!
哇,是的,您成功阅读了这条重要的警报消息。此示例文本将运行更长的时间,以便您可以看到警报中的间距如何与此类内容一起使用。
每当您需要时,请务必使用边距实用程序来保持整洁。
解雇
使用警报 JavaScript 插件,可以消除内联的任何警报。就是这样:
- 确保您已加载警报插件或已编译的 Bootstrap JavaScript。
- 如果您从源代码构建我们的 JavaScript,它需要
util.js
. 编译的版本包括这个。
- 添加关闭按钮和
.alert-dismissible
类,这会在警报右侧添加额外的填充并定位.close
按钮。
- 在关闭按钮上,添加
data-dismiss="alert"
触发 JavaScript 功能的属性。确保将<button>
元素与它一起使用,以便在所有设备上保持正确的行为。
- 要在解除警报时为警报设置动画,请务必添加
.fade
和.show
类。
您可以通过现场演示看到这一点:
JavaScript 行为
触发器
启用通过 JavaScript 解除警报:
或者在 alertdata
中的按钮上使用属性,如上所示:
请注意,关闭警报会将其从 DOM 中删除。
方法
方法 |
描述 |
$().alert() |
使警报侦听具有该data-dismiss="alert" 属性的后代元素上的单击事件。(使用 data-api 的自动初始化时不需要。) |
$().alert('close') |
通过从 DOM 中删除警报来关闭它。如果元素上存在.fade 和.show 类,则警报将在被删除之前淡出。 |
$().alert('dispose') |
破坏元素的警报。 |
活动
Bootstrap 的警报插件公开了一些用于连接警报功能的事件。
事件 |
描述 |
close.bs.alert |
close 调用实例方法时立即触发此事件。 |
closed.bs.alert |
当警报关闭时触发此事件(将等待 CSS 转换完成)。 |