简介
bootstrap-notify 是一个基于 Bootstrap 的 JavaScript 消息通知插件，可以让开发者轻松地在页面中创建各种类型的通知，如成功信息、错误提示等。
安装
使用npm安装：
npm install bootstrap-notify
或者通过CDN链接引入：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-notify@0.2.0/dist/bootstrap-notify.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap-notify@0.2.0/dist/bootstrap-notify.min.js"></script>
使用方法
1. 引入依赖和样式文件
在需要使用的页面中，引入 Bootstrap 的 CSS 样式文件和 bootstrap-notify 的 JS 文件：
<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="path/to/bootstrap-notify/css/bootstrap-notify.min.css"> <script src="path/to/jquery/jquery.min.js"></script> <script src="path/to/bootstrap/js/bootstrap.min.js"></script> <script src="path/to/bootstrap-notify/js/bootstrap-notify.min.js"></script>
2. 创建通知
调用 $.notify 方法来创建通知。该方法接受两个参数：通知内容和配置选项。
$.notify("Hello World");上面代码将创建一个包含 "Hello World" 文本的默认通知。
可以通过配置选项来设置通知的样式、位置等属性，例如：
$.notify({
message: "This is a success message.",
type: 'success',
delay: 2000,
offset: { x: 20, y: 70 }
});上面代码将创建一个包含 "This is a success message." 文本的绿色成功通知，显示时延迟 2 秒，偏移量为 (20, 70)。
3. 支持的配置选项
bootstrap-notify 支持以下配置选项：
- message：要显示的消息内容
- type：消息类型，可选值包括 "info"、"success"、"warning" 和 "danger"
- delay：消息显示时间（毫秒）
- offset：消息位置，格式为 { x: number, y: number }
- align：消息文本对齐方式，可选值包括 "left"、"right" 和 "center"
- verticalAlign：消息垂直方向对齐方式，可选值包括 "top"、"bottom" 和 "middle"
- allow_dismiss：是否允许点击关闭按钮关闭消息，默认为 true
- newest_on_top：是否将最新的消息放在顶部，默认为 false
- mouse_over：鼠标悬停时是否暂停消息消失倒计时，默认为 true
- z_index：消息层级，数字越大显示越靠前
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------- ------------
----- ---------------- -------------------------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------------------------------
-------
------
-------------------- ---------
------- ------------------------ ---------------------
------- ------------------------ ---------------------
------- -------------------- ---------------------
------- ----------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------
--------
----------------------------- ---------- -
----------
-------- --------
---
----- ---------
---
---
----------------------------- ---------- -
----------
-------- --------------
---
----- ---------
---
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------