编辑于 Github

警报

使用少量可用且灵活的警报消息为典型的用户操作提供上下文反馈消息。

例子

警报可用于任何长度的文本，以及可选的关闭按钮。 要获得正确的样式，请使用八个必需的上下文类之一（例如，.alert-success）。 对于内联解雇，请使用[alerts jQuery plugin]（＃dismissing）。

<div class="alert alert-primary" role="alert">
  这是一个 主 警报-看看这个!
</div>
<div class="alert alert-info" role="alert">
  这是一个 信息 警报-看看这个!
</div>
<div class="alert alert-success" role="alert">
  这是一个 成功 警报-看看这个!
</div>
<div class="alert alert-danger" role="alert">
  这是一个 危险 警报-看看这个!
</div>
<div class="alert alert-warning" role="alert">
  这是一个 警告 警报-看看这个!
</div>
<div class="alert alert-default" role="alert">
  这是一个 默认 警报-看看这个!
</div>

链接颜色

使用.alert-link实用程序类可以在任何警报中快速提供匹配的彩色链接。

<div class="alert alert-primary" role="alert">
  这是一个 主 警惕
    <a href="#" class="alert-link">一个示例链接</a>.
  如果你愿意，可以点击一下。
</div>
<div class="alert alert-info" role="alert">
  这是一个 信息 警惕
    <a href="#" class="alert-link">一个示例链接</a>.
  如果你愿意，可以点击一下。
</div>
<div class="alert alert-success" role="alert">
  这是一个 成功 警惕
    <a href="#" class="alert-link">一个示例链接</a>.
  如果你愿意，可以点击一下。
</div>
<div class="alert alert-danger" role="alert">
  这是一个 危险 警惕
    <a href="#" class="alert-link">一个示例链接</a>.
  如果你愿意，可以点击一下。
</div>
<div class="alert alert-warning" role="alert">
  这是一个 警告 警惕
    <a href="#" class="alert-link">一个示例链接</a>.
  如果你愿意，可以点击一下。
</div>
<div class="alert alert-default" role="alert">
  这是一个 默认 警惕
    <a href="#" class="alert-link">一个示例链接</a>.
  如果你愿意，可以点击一下。
</div>

驳回

使用警报JavaScript插件，可以内联任何警报。 这是如何做：

  • 确保已加载警报插件或已编译的Bootstrap JavaScript。
  • 如果你是从源代码构建我们的JavaScript，它[需要util.js]（{{site.baseurl}} docs {{site.docs_version}} get-started javascript
  • 添加一个dismiss按钮和.alert -dismissible类，它在警报的右侧添加额外的填充并定位.close按钮。
  • 在dismiss按钮上，添加data-dismiss =“alert”属性，该属性触发JavaScript功能。 请务必使用<button>元素在所有设备上正确行为。

你可以通过现场演示看到这个:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>神圣的鳄梨酱！</strong> 您应该检查其中一些字段
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

如果您想查看更多示例和属性，请查看官方 Bootstrap Documentation.