Bootstrap 组件：警告框组件的使用

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

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

实例

将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert类是必须要设置的，另外还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息。

注意：警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。

类	状态
.alert-succes	成功
.alert-info	消息
.alert-warning	警告
.alert-danger	危险

用法如下：

<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库。

<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工具类，它可以确保为链接设置与当前警告框相符的颜色。

<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>

---

就先分享到这里!! 😄 后续继续更新!!