## 警告框 警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。 **实例** 将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，`.alert`类是必须要设置的，另外还提供了有特殊意义的4个类（例如，`.alert-success`），代表不同的警告信息。 注意：警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。 | 类 | 状态 | | --- | --- | | `.alert-succes` | 成功 | | `.alert-info` | 消息 | | `.alert-warning` | 警告 | | `.alert-danger` | 危险 | 用法如下： ```html <div class="alert alert-success" role="alert"> <p>成功信息</p> </div> <div class="alert alert-info" role="alert"> <p>提示信息</p> </div> <div class="alert alert-warning" role="alert"> <p>警告信息</p> </div> <div class="alert alert-danger" role="alert"> <p>危险信息</p> </div> ```  ***** **可关闭的警告框** 为警告框添加一个可选的`.alert-dismissible`类和一个关闭按钮。 注意：依赖警告框 JavaScript 插件，如果需要为警告框组件提供关闭功能，需要在头部引用 jQuery 库与 bootstrap 相应的 js库。 ```html <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> <p>警告信息</p> </div> ```  注意：确保在所有设备上可以正确展示。必须给`<button>`元素添加`data-dismiss="alert"`属性。 ***** **警告框中的链接** 有时候你可能想在警告框中加入链接，以便让用户可以跳转到某个地方或新的页面。如果警告框中包含链接，请为链接使用`.alert-link`工具类，它可以确保为链接设置与当前警告框相符的颜色。 ```html <div class="alert alert-success" role="alert"> <p class="alert-link">成功信息 <a href="##" class="alert-link">go</a></p> </div> <div class="alert alert-info" role="alert"> <p class="alert-link">提示信息 <a href="##" class="alert-link">go</a></p> </div> <div class="alert alert-warning" role="alert"> <p class="alert-link">警告信息 <a href="##" class="alert-link">go</a></p> </div> <div class="alert alert-danger" role="alert"> <p class="alert-link">危险信息 <a href="##" class="alert-link">go</a></p> </div> ```