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() {/* ... */} });