README

❗❗❗ Bootstrap 5 更新即将推出！❗❗❗

Notify Bootstrap

时尚现代的通知 - 基于 Bootstrap 和 Font Awesome 的轻量级 jQuery 插件

基于 Bootstrap 5 的新版本即将推出！

状态

查看 DEMO

快速开始

提供多种选项

下载最新版本。
克隆仓库： git clone https://github.com/the-muda-organization/notify-bootstrap.git
使用 Composer 安装： composer require the-muda-organization/notify-bootstrap

包含内容

在下载中，您将找到以下目录和文件，逻辑上分组常见资源，并提供编译和最小化版本。您将看到如下内容

存在一些依赖项。有关安装指南和如何使用的更多信息，请参阅下方。

notify-bootstrap/
 │
 └─ dist/
    │
    ├── css/
    │   ├── notify.css
    │   └── notify.min.css
    │
    └── js/
        ├── notify.js
        └── notify.min.js

错误和功能请求

有错误或功能请求？在打开新的问题之前，先搜索现有和已关闭的问题。如果您的 problemas idea 尚未解决，请打开新的问题。

安装

下载并将文件复制到您的项目中
安装依赖项
- Bootstrap CSS（必需）
- Bootstrap JS（popper.js 不是必需的）
- Font Awesome（推荐 - 然而，您可以轻松使用自己的图标集进行自定义）
您可以轻松自定义 CSS 和 JS（颜色、位置、通知可见时间、品牌图标等）
将 CSS 和 JS 添加到您的项目中

    <link href="https://example.com/notify-bootstrap/1.x.x/css/notify.min.css" rel="stylesheet">
    <script src="https://example.com/notify-bootstrap/1.x.x/js/notify.min.js"></script>

如何使用

Notify 使用简单。调用函数并传入类型、标题和消息

notify(type, title, message);

使用 jQuery 的示例

$('#button-1').on('click',function(){
    notify('bell','Title of the message!','This is a sample message! Lorem ipsum!');
});

使用 JavaScript 的示例

myElement.addEventListener('click',function(){
    notify('shield-check','Title of the message!','This is a sample message! Lorem ipsum!');
});

Notify 的样式独立于 Bootstrap toast。您可以使用 notify 和 bootstrap toast 组件同时使用。

Notify JavaScript 100% 依赖于 Bootstrap。查看 Bootstrap toast 组件

功能

位置

在 CSS 的第 13 和 14 行设置。使用 top:0 或 bottom:0 AND left:0 或 right:0

类型

您可以添加所需类型，每种类型都可以有自定义样式。

类型是必需的。如果您留空，则不会显示图标，但您将看到一个来自 Font Awesome 的占位符，指示图标错误。

Notify 在几个类别中默认添加了几个类型

GENERAL:
- info
- warning
- error
- success
- other

BRANDS:
- facebook
- github
- instagram
- linkedin
- paypal
- skype
- twitter
- wikipedia
- youtube

CUSTOM:
- spinner

FONT AWESOME:
- Any icon can be added. Just use icon name as type: 'times', 'ban', 'user' etc.
- If you want to use other icon type (regular, duotone, light or brand) change line 53 in js file.

要添加更多类型，请在新 JavaScript switch 中的 case 'newCustomType': 添加新类型，并设置自定义 CSS 为 .toast[data-type="newCustomType"]{}

标题

可以将任何内容添加到标题，但推荐使用文本。标题可以留空。

消息

可以将任何内容添加到消息，但推荐使用文本。消息以及标题都可以留空。

自动隐藏

通知可以在您点击关闭按钮或经过一段时间后隐藏。

Notify JS Line 60 - autohide - set true or false
Notify JS Line 61 - custom time to hide notification. Currently it's 5000ms.

动画

没有自定义动画。Notify 使用 Bootstrap 来显示和隐藏提示框。您可以自由添加自己的动画。

自定义提示框

Notify 使用自定义 CSS，因此可以与 Bootstrap 一起使用。所有自定义样式均基于 [data-type]，类型应在每个通知中声明。

自定义功能

Notify 只提供基本选项，因此您可以轻松地自定义所有代码。您可以添加每个通知的定制时间、图片、带链接的按钮，等等。在 Notify 的第 7 行添加更多事件对象，并使用 notify(); 函数调用它们！

CSS 类

JavaScript 定制

第 25 行 - 关闭按钮 svg - 现在是 Font Awesome 的 fas fa-times 图标
第 29-54 行 - 不同通知类型（成功、错误、信息、品牌等）的图标。Font Awesome 图标内联显示，以确保正确无误且无延迟。
第 53 行 - 您可以更改默认的 Font Awesome 图标样式（实心、常规、浅色、双色、品牌等）
第 61 行 - 设置 autohide (true|false) 以在一段时间后隐藏通知
第 61 行 - 设置通知应显示的持续时间。目前是 5000ms。
第 67 行 - 包含提示框内容模板

版本控制

Notify Bootstrap 将尽可能地遵循语义版本控制指南。版本号将按照以下格式编号：<major>.<minor>.<patch>

变更日志

有关最新版本，请参阅详细的变更日志。

团队

雅库布·穆达

行为准则

如果您行为端正，我们将行为端正。有关详细信息，请参阅我们的行为准则.md。

版权和许可

代码根据 MIT 许可证发布。

the-muda-organization / notify-bootstrap

维护者

详细信息