Bootstrap 3 之 Bootstrap 警告

在 Bootstrap 中，警告（Alerts）是用来向用户显示重要信息或警告的组件。警告可以在页面的顶部或底部展示，并且可以包含一个关闭按钮供用户关闭。

使用警告

要创建一个警告，我们可以使用以下 HTML 代码结构：

<div class="alert alert-warning">
  <strong>警告！</strong> 这是一个警告消息。
</div>

在上面的代码中，我们使用了 alert 和 alert-warning 类来创建一个黄色警告框，并在其中包含了一个加粗的标题和警告消息。

警告类型

Bootstrap 提供了多种不同颜色和样式的警告类型，包括：

• alert-success：绿色成功警告
• alert-info：蓝色信息警告
• alert-warning：黄色警告
• alert-danger：红色危险警告

我们可以根据需要选择合适的警告类型来展示不同的信息。

关闭警告

警告框中还可以包含一个关闭按钮，让用户可以手动关闭警告框。要在警告框中添加关闭按钮，可以使用以下代码：

<div class="alert alert-danger alert-dismissible">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>警告！</strong> 这是一个需要关闭的警告消息。
</div>

在上面的代码中，我们在警告框中添加了一个关闭按钮，并使用了 alert-dismissible 类来实现关闭功能。

总结

警告是 Bootstrap 中一个常用的组件，可以用来向用户显示重要信息或警告。通过选择不同的警告类型和添加关闭按钮，我们可以灵活地展示各种不同类型的警告信息。在设计页面时，可以根据具体的需求来选择合适的警告类型和样式来提高用户体验。