在本教程中，我们将学习有关Bootstrap中的Alert

警报用于根据用户操作提供反馈。
因此，我们可以在成功时提示成功警报，也可以向用户发出信息警报以告知某些信息。

创建Alert

为了创建警报，我们使用.alert类。
然后，我们添加以下类来设置警报样式。

• .alert-success成功
• .alert-info信息
• .alert-danger危险
• .alert-warning警告

<!-- success alert -->
<div class="alert alert-success">
  <p>This is a success alert.</p>
</div>

<!-- info alert -->
<div class="alert alert-info">
  <p>This is an info alert.</p>
</div>

<!-- danger alert -->
<div class="alert alert-danger">
  <p>This is a danger alert.</p>
</div>

<!-- warning alert -->
<div class="alert alert-warning">
  <p>This is a warning alert.</p>
</div>

可忽略的警报

我们甚至可以通过添加可选的.alert-dismissible类和关闭按钮来创建可忽略的警报。

需要JavaScript警报插件。

<!-- success alert -->
<div class="alert alert-success alert-dismissible">
  <button type="button"
          class="close"
          data-dismiss="alert"
          aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <p>This is a success alert.</p>
</div>

带有链接的警报

我们甚至可以使用锚标记并添加.alert-link类在警报内部包含链接。

<div class="alert alert-success" role="alert">
  <p><a href="#" class="alert-link">Click here</a> to continue.</p>
</div>