Bootstrap 信息提示框


信息提示框

Bootstrap 可以很容易实现信息提示框:

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

提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning or .alert-danger 类来实现:

实例

<div class="alert alert-success">
  <strong>成功!</strong> 此警告框表示成功或积极的行动。
</div>

<div class="alert alert-info">
  <strong>信息!</strong> 此警告框表示中性信息更改或操作。
</div>

<div class="alert alert-warning">
  <strong>警告!</strong> 此警告框表示可能需要注意的警告。
</div>

<div class="alert alert-danger">
  <strong>危险!</strong> 此警告框表示危险或潜在的负面行为。
</div>
亲自试一试 »


提示框添加链接

提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接:

成功!您应该阅读此消息
信息!您应该阅读此消息
警告!您应该阅读此消息
危险!您应该阅读此消息

实例

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

关闭提示框

× 单击右侧的"x"符号关闭提示框。

我们可以在提示框中的 div 中添加 .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-* 属性和 &times; 解释

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

&times; (×) 是一个HTML实体,是关闭按钮的首选图标,而不是字母 "x"。
有关所有HTML实体的列表,请访问 HTML 实体参考


提示框动画

× 单击右侧的"x"符号关闭。 将会"淡出"。

.fade.in 类用于设置提示框在关闭时的淡出和淡入效果:

实例

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

学习训练

练习题:

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

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

开始实验


完整 Bootstrap 提示框参考

有关提示框的完整参考,请访问我们 Bootstrap 提示框参考