Bootstrap 5 警报

Bootstrap 5 是一个非常流行的前端框架，提供了很多常用的 UI 组件，其中警报组件就是一个非常常用的组件，本文将为程序员介绍 Bootstrap 5 警报。

什么是警报？

警报是在页面上以突出的方式向用户显示一条重要的信息。Bootstrap 5 提供了4种类型的警报：success（成功）、info（信息）、warning（警告）和danger（危险）。

如何使用 Bootstrap 5 警报？

警报非常容易使用，只需要在 HTML 代码中添加相应的 CSS 类即可。

<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>

<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>

<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>

<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>

上述代码中，alert 类用于确定我们正在创建一个警报，alert-{type} 类用于确定警报的类型。

此外，警报还可以包含更详细的内容。例如，我们可以在 alert 标签内添加一个 heading 标题，以及 p 标签用于显示详细内容。

<div class="alert alert-danger" role="alert">
  <h4 class="alert-heading">Danger!</h4>
  <p>
    This is a danger alert with an example link. Give it a click if you like.
  </p>
  <a href="#" class="btn btn-danger">Example link</a>
</div>

警报的选项

我们可以通过 Javascript 或者直接添加属性来控制警报的行为。

<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Success!</strong> This alert box could indicate a successful or positive action.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

上述代码中，我们添加了 alert-dismissible, fade 和 show, alert-dismissible 用于添加一个可被关闭的 x 按钮，fade 可以让警报渐变消失，show 则可以让警报显示出来。

在 Javascript 中，我们可以使用 Dismiss 方法来手动关闭警报。使用以下代码将在5秒钟后关闭警报。

var myAlert = document.querySelector('#myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
setTimeout(() => {
  bsAlert.close()
}, 5000)

总结

以上就是如何使用 Bootstrap 5 警报的介绍，警报是一个非常常用的 UI 组件，相信掌握了警报的使用之后，你会写出更漂亮的页面。