Bootstrap 5 | 关闭按钮

在 Bootstrap 5 中，关闭按钮被设计为一种可以关闭元素或警告的小型可交互按钮。它们通常被用于模态框、警告框、弹出窗口和提示框中。

如何使用关闭按钮

关闭按钮由一个包含 "x" 的按钮和一些额外样式组成，如下所示：

<button type="button" class="btn-close" aria-label="Close"></button>

要使用关闭按钮，只需将上述代码放在需要关闭的元素中。例如：

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

在上面的示例中，通过将关闭按钮包含在警告框中，我们可以在单击关闭按钮时关闭警告框。

自定义关闭按钮

我们可以使用 .btn-close 类将 Bootstrap 5 的默认关闭按钮样式应用于任何按钮。这样，我们就可以使用自己的按钮，但保留标准关闭按钮的外观和感觉：

<button type="button" class="btn-close" style="color: red;">
  <span aria-hidden="true">&times;</span>
</button>

在上面的示例中，我们定义了一个红色按钮，并使用 .btn-close 类将其转换为 Bootstrap 5 的关闭按钮。我们还在按钮中添加了 aria-hidden="true" 属性来避免屏幕阅读器将 "x" 读出。

关闭按钮附加到警告框上

在警告框中使用关闭按钮时，我们可以使用 data-bs-dismiss="alert" 属性将关闭按钮与警告框相关联。这样，当用户单击关闭按钮时，警告框将自动关闭。

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

在上面的示例中，我们定义了一个警告框，并使用 .btn-close 类将其转换为 Bootstrap 5 的关闭按钮。我们还使用 data-bs-dismiss="alert" 属性将关闭按钮与警告框相关联。

结论

关闭按钮是一种非常有用的交互元素，可以使用户关闭弹出窗口、警告框、模态框或其他包含一些信息的元素。在 Bootstrap 5 中，我们可以使用 .btn-close 类轻松创建和自定义关闭按钮。