如何创建 Bootstrap Dismissible Alert？

Bootstrap Dismissible Alert 是一种能够在页面顶部或底部显示的信息框，用户可以手动关闭这个信息框，具有良好的用户体验和友好的交互方式。在本文中，我们将介绍如何使用 Bootstrap 创建 Dismissible Alert。

步骤 1：引入 Bootstrap

Bootstrap 是一种流行的前端框架，它可以非常方便地实现不同的样式和组件。在开始创建 Dismissible Alert 之前，我们需要先引入 Bootstrap。可以通过下面的代码片段引入 Bootstrap：

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

这段代码会从 CDN 服务器上引入最新版本的 Bootstrap。

步骤 2：创建 Dismissible Alert

创建 Dismissible Alert 非常简单，只需要在页面中增加如下代码：

<div class="alert alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

这段代码将会创建一个带有关闭按钮的 Dismissible Alert。

• alert 类用于设置信息框的样式。
• alert-dismissible 类表示 Dismissible Alert。
• fade 类用于实现淡入淡出效果。
• show 类表示在页面加载时显示这个信息框。
• close 类用于设置关闭按钮的样式。
• data-dismiss="alert" 表示点击关闭按钮时关闭这个 Dismissible Alert。

步骤 3：自定义 Dismissible Alert

如果希望自定义 Dismissible Alert，可以增加一些属性或者自定义样式，例如：

<div class="alert alert-warning alert-dismissible fade show" role="alert" style="background-color: #ffcc33; color: #333;">
  <strong>Warning!</strong> This is a custom alert with custom styles.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

• alert-warning 类表示警告类型的信息框。
• 在 style 属性中可以自定义样式。

总结

通过上述步骤，我们可以非常方便地创建 Dismissible Alert。Bootstrap 提供了丰富的组件和样式，使得页面开发更加快捷、高效。