码农教程 - 一技在手,衣食无忧! tools

Bootstrap .alert

❮ 上一节 下一节 ❯

警报

Bootstrap 提供了一种创建预定义警报消息的简单方法：

× 成功！此警报框表示操作成功或积极。
× 信息！此警报框表示中性信息更改或操作。
× 警告！此警报框表示可能需要注意的警告。
× 危险！此警报框表示危险或潜在的负面操作。

警报是通过以下方式创建的.alert类，然后是四个上下文类之一.alert-success,.alert-info,.alert-warning或者.alert-danger:

示例

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
亲自试一试 »

警报链接

添加alert-link类到警报框中的任何链接以创建"matching colored links"：

成功！你应该 阅读此消息。
信息！你应该 阅读此消息。
警告！你应该 阅读此消息。
危险！你应该 阅读此消息。

示例

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
亲自试一试 »

关闭提醒

×单击右侧的 "x" 符号即可关闭我。

要关闭警报消息，请添加.alert-dismissible警报容器的类。然后加class="close"和data-dismiss="alert"链接或按钮元素（当您单击此元素时，警报框将消失）。

示例

<div class="alert alert-success alert-dismissible">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>
亲自试一试 »

aria-* 属性和 ×解释

为了帮助提高使用屏幕阅读器的用户的可访问性，您应该在创建关闭按钮时包含 aria-label="close" 属性。

× (×) 是一个 HTML 实体，它是关闭按钮的首选图标，而不是字母 "x"。
对于所有 HTML 实体的列表，访问我们的 HTML 实体参考。

动画提醒

×单击右侧的 "x" 符号即可关闭我。我会 "fade" 出去。

这个.fade和.in关闭警报消息时，classes 添加淡入淡出效果：

示例

<div class="alert alert-danger fade in">
亲自试一试 »

通过练习测试一下

练习:

添加 Bootstrap "alert" 类以显示成功操作的结果。

<div class="">
  Success!
</div>

开始练习

完整的Bootstrap警报参考

有关所有警报选项、方法和事件的完整参考，请访问我们的Bootstrap JS 警报参考。


❮ 上一节 下一节 ❯