警告提示框(Alert)

警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供常见的上下反馈消息和提示。

示例

警报是一组颜色控件(共八个颜色样式),可用于任何长度的文本,以及可选的关闭按钮,系统提供8个可用的正确的样式(如,.alert-success),如你还可以使用jQuery插件方法来解除内联元素。

警告提示框(Alerts)  - 图1

  1. <div class="alert alert-primary" role="alert">
  2. A simple primary alert—check it out!
  3. </div>
  4. <div class="alert alert-secondary" role="alert">
  5. A simple secondary alert—check it out!
  6. </div>
  7. <div class="alert alert-success" role="alert">
  8. A simple success alert—check it out!
  9. </div>
  10. <div class="alert alert-danger" role="alert">
  11. A simple danger alert—check it out!
  12. </div>
  13. <div class="alert alert-warning" role="alert">
  14. A simple warning alert—check it out!
  15. </div>
  16. <div class="alert alert-info" role="alert">
  17. A simple info alert—check it out!
  18. </div>
  19. <div class="alert alert-light" role="alert">
  20. A simple light alert—check it out!
  21. </div>
  22. <div class="alert alert-dark" role="alert">
  23. A simple dark alert—check it out!
  24. </div>

网页中传达辅助技术及其背后的意义

使用颜色添加意义只提供一个视觉指示,这不会传达给需要辅助技术(如盲人、听力障碍者)的用户,也就决定了诸如屏幕阅读器并不能读出颜色本身的意义。一般推荐确保由颜色表示的信息从内容本身(例如可见文本)中显而易见,或者通过替代方法,例如隐藏在.sr-only该类中的附加文本来创造更多的辅助传达技术。

.sr-only,全称 screen reader only,意为:(仅供)屏幕阅读器,这个 class 主要用于增强 accessbility(可访问性),有时候 UI 上会出现一些仅供视觉识别的元素,比如说“菜单按钮”,只有视力正常的人才能清楚辨识这些元素的作用。而残障人士,比如弱势或盲人是不可能知道这些视觉识别元素是什么的。他们上网使用的是屏幕阅读器,也就是 screen reader(sr),屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。问题是图形元素怎么可能“读出来”呢?因此我们还要写上这些元素的文本说明,但是又不需要展示给普通用户看到,于是加上 sr-only 的意义就在于能保证屏幕阅读器正确读取且不会影响 UI 的视觉呈现(译者补充)。

链接颜色

使用 .alert-link 类可以为带颜色的警告文本框中的链接加上合适的颜色(BootStrap已经内置了相应的颜色解决方案,会自动对应有一个优化后的链接颜色方案-译者注)。

警告提示框(Alerts)  - 图2

  1. <div class="alert alert-primary" role="alert">
  2. This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  3. </div>
  4. <div class="alert alert-secondary" role="alert">
  5. This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  6. </div>
  7. <div class="alert alert-success" role="alert">
  8. This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  9. </div>
  10. <div class="alert alert-danger" role="alert">
  11. This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  12. </div>
  13. <div class="alert alert-warning" role="alert">
  14. This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  15. </div>
  16. <div class="alert alert-info" role="alert">
  17. This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  18. </div>
  19. <div class="alert alert-light" role="alert">
  20. This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  21. </div>
  22. <div class="alert alert-dark" role="alert">
  23. This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  24. </div>

额外附加内容

警报还可以包含其他HTML元素,如标、段落和分隔符。

警告提示框(Alerts)  - 图3

  1. <div class="alert alert-success" role="alert">
  2. <h4 class="alert-heading">Well done!</h4>
  3. <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>
  4. <hr>
  5. <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
  6. </div>

关闭警告(小贴士效果)

使用.alert结合JavaScript,可以实现警报效果,贴在页面上,并可以自由关闭,其要点如下:

  • 确保你正确加载了.alert警报组件,或者是编译后的 Bootstrap JavaScript代码组。
  • 如果你要自行编译JavaScript组件,请将必须的 util.js包括进去。
  • 可以在右上角定义一个.close关闭按钮效果,则需要在容器中引用 .alert-dismissible 类。
  • 警告按钮上要增加data-dismiss="alert" 触发 JavaScript 动作,同时使用<button>元素,以确保在所有设备上都能获得正确的行为响应。
  • 要在关闭警报时生成警报提示,请确保添加.fade.show样式。
    实际效果展示:

警告提示框(Alerts)  - 图4

  1. <div class="alert alert-warning alert-dismissible fade show" role="alert">
  2. <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  3. <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  4. <span aria-hidden="true">&times;</span>
  5. </button>
  6. </div>

JavaScript行为

触发

使用JavaScript插件解除警报:

  1. $(".alert").alert()

或者使用 警报控件中的data 属性,如下所示:

  1. <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  2. <span aria-hidden="true">&times;</span>
  3. </button>

请注意,关闭警报会将其从DOM中移除。

方法

方法描述
$().alert()Makes an alert listen for click events on descendant elements which have the data-dismiss="alert" attribute. (Not necessary when using the data-api’s auto-initialization.)
$().alert('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.
$().alert('dispose')Destroys an element’s alert.
  1. $(".alert").alert('close')

事件

Bootstrap警报插件提供额外的事件,可以直接取得调用方法和函式。

事件描述
close.bs.alertThis event fires immediately when the close instance method is called.
closed.bs.alertThis event is fired when the alert has been closed (will wait for CSS transitions to complete).
  1. $('#myAlert').on('closed.bs.alert', function () {
  2. // do something…
  3. })