好看的 Bootstrap Toastr 插件
时间: 2023-09-08 09:09:58 浏览: 41
Bootstrap Toastr 插件本身就是基于 Bootstrap 样式的,所以它的样式已经很好看了。不过,如果你想要自定义它的样式,可以参考以下步骤:
1. 在你的项目中引入 Toastr 的 CSS 文件和 JavaScript 文件。
```html
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
```
2. 在你的 JavaScript 代码中设置 Toastr 的样式选项。
```javascript
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
```
3. 在你的 JavaScript 代码中调用 Toastr 的方法来显示消息。
```javascript
toastr.success('Hello, World!', 'Success Message');
```
在上述步骤中,你可以根据自己的需要来自定义 Toastr 的样式选项,例如更改位置、颜色、动画效果等属性。同时,你也可以通过添加自定义 CSS 来进一步美化 Toastr 的样式。