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">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
亲自试一试 »
aria-* 属性和 × 解释
为了帮助提高使用屏幕阅读器的用户的可访问性，在创建关闭按钮时，应该包括 aria-label="close" 属性。
× (×) 是一个HTML实体，是关闭按钮的首选图标，而不是字母 "x"。
有关所有HTML实体的列表，请访问 HTML 实体参考。
提示框动画
×
单击右侧的"x"符号关闭。 将会"淡出"。
.fade 和 .in 类用于设置提示框在关闭时的淡出和淡入效果:
完整 Bootstrap 提示框参考
有关提示框的完整参考，请访问我们 Bootstrap 提示框参考。
