bootstrap.alert.js是一个jQuery插件，它使您能够使用bootstrap 5警报组件动态创建通知栏。

有了这个插件，你可以很容易地在所有项目中创建通知栏。此外，这个插件的功能是responsevos，这意味着你的所有通知都能在所有设备上正确显示。

如何使用它:

1.在文档中加载最新的jQuery库、Bootstrap 5框架和Bootstrap图标（可选）。

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
 
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
 
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap-icons.min.css" />

2.加载jQuery bootstrap.alert.js插件的文件。

<link rel="stylesheet" href="css/jquery.bootstrap.alert.css" />
<script src="js/jquery.bootstrap.alert.js"></script>

3.调用函数引导程序警报在要放置通知栏的目标容器上。

$('#my-container').bootstrapAlert({
  // ...
});

4.在通知栏中添加您自己的内容和/或标题。

$('#my-container').bootstrapAlert({
  content: 'Notification Content',
  heading: 'Optional Heading'
});

5.设置通知类型。所有可用类型：

• 危险
• 黑暗的
• 信息
• 光线
• 主要（默认）
• 次要的
• 成功
• 警告

$('#my-container').bootstrapAlert({
  content: 'Notification Content',
  type: 'danger',
});

6.在通知栏中添加一个自定义图标。需要引导程序图标。

$('#my-container').bootstrapAlert({
  content: 'Notification Content',
  icon: 'bell-fill', // without the bi bi- prefix
});

7.确定是否在超时后自动关闭通知栏。默认值：false。

$('#my-container').bootstrapAlert({
  content: 'Notification Content',
  fadeout: true,
  duration: 3, // 3 seconds, default: 1
});

8.确定通知栏是否可关闭。默认值：true。

$('#my-container').bootstrapAlert({
  content: 'Notification Content',
  dismissible: false,
});

9.回调函数。

$('#my-container').bootstrapAlert({
  content: 'Notification Content',
  onShow() {/* ... */}
  onDismiss() {/* ... */}
});

预览截图

Bootstrap 5警报创建可自定义 通知栏