W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Bootstrap 警告



警告框

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

× Success! This alert box indicates a successful or positive action.
× Info! This alert box indicates a neutral informative change or action.
× Warning! This alert box indicates a warning that might need attention.
× Danger! This alert box indicates a dangerous or potentially negative action.

Example

<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>
尝试一下 »

可关闭的警告框

Example

<div class="alert alert-success">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>
尝试一下 »
Note 确保在所有设备上的正确行为,务必给 <button> 元素添加 data-dismiss="alert" 属性。

动画的警告框

当关闭警告框时 .fade.in 类可产生褪色效果:

Example

<div class="alert alert-success fade in">
尝试一下 »

警告框中的链接

.alert-link 工具类,可以为链接设置与当前警告框相符的颜色。


Complete Bootstrap Alert Reference

For a complete reference of all alert options, methods and events, go to our Bootstrap JS Alert Reference.