Bootstrap 警告

警告框（Alert）用来向用户传递需要关注的信息：操作成功、参数出错、功能提示等。Bootstrap 提供四种情景样式，还支持在警告框右上角放一个"×"按钮一键关闭（关闭动作依赖 Bootstrap 的 JavaScript 插件）。

基本警告框与情景色

在容器上加 .alert 并搭配一个情景类即可生成警告框：

<div class="alert alert-success">操作成功，数据已保存。</div>
<div class="alert alert-info">提示：本功能将于下周上线。</div>
<div class="alert alert-warning">警告：磁盘剩余空间不足。</div>
<div class="alert alert-danger">错误：用户名或密码不正确。</div>

效果：自上而下出现绿、蓝、黄、红四个带浅色底和同色描边的横条，仅靠颜色就能传达不同的信息级别。

可关闭的警告框

在容器上追加 .alert-dismissible，并在内部放一个带 data-dismiss="alert" 的关闭按钮：

<div class="alert alert-warning alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <strong>注意！</strong>关闭前请先保存您的修改。
</div>

效果：警告条右上角出现一个"×"按钮，点击后整条警告平滑消失；此交互由 Bootstrap 的警告框插件提供，页面需引入 bootstrap.js。

警告框中的链接

在警告框内部给链接加 .alert-link，链接会采用与警告框一致的配色，视觉上融为一体：

<div class="alert alert-success">
  退款已成功，<a href="#" class="alert-link">查看订单详情</a>。
</div>

效果：链接不再是默认的蓝色，而是继承绿色警告框的配色，鼠标移上时颜色加深，仍保留链接的可点击性。

小结：.alert 负责信息提醒，颜色由 success/info/warning/danger 四种情景类决定；需要"可关闭"或"内嵌链接"时分别追加 .alert-dismissible 与 .alert-link。