bootstrap 提示框插件 bootstrap-growl 和bootstrap-notify用法简介

最新推荐文章于 2025-05-24 16:14:59 发布

原创最新推荐文章于 2025-05-24 16:14:59 发布 · 1.3w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #插件 #前端框架 #提示框

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了Bootstrap中的两个提示插件：bootstrap-growl和bootstrap-notify.min.js。详细展示了这两个插件的使用方法及配置选项，并提供了插件的GitHub地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近期项目接触到bootstrap,原谅我孤陋寡闻从来都没有听过bootstrap前端框架（o(╯□╰)o 前前段时间接触到的EasyUI也没有听过）,哎，废话不多说了，把bootstrap的两个提示插件做一个简要的介绍

1. 插件 bootstrap-growl ,插件github地址：https://github.com/ifightcrime/bootstrap-growl

以下是说明以及效果图：

bootstrap-growl这个插件比较简单，源码也就只有一点点（我就不贴源码了。反正贴了也不会看），介绍一下用法

$.bootstrapGrowl("My message");

$.bootstrapGrowl("another message, yay!", {
  ele: 'body', // which element to append to  绑定到某个元素
  type: 'info', // (null, 'info', 'danger', 'success')  提示的类型
  offset: {from: 'top', amount: 20}, // 'top', or 'bottom' 相对顶部或者底部的距离
  align: 'right', // ('left', 'right', or 'center')    位置 左右居中
  width: 250, // (integer, or 'auto') 宽度
  delay: 4000, // Time while the message will be displayed. It's not equivalent to the *demo* timeOut!  自动消失时间设置
  allow_dismiss: true, // If true then will display a cross to close the popup. 是否出现小叉叉点击就取消提示框
  stackup_spacing: 10 // spacing between consecutively stacked growls. 这是嘛不太懂 说啥间距嘛的 
});

效果图：

2.插件 bootstrap-notify.min.js 插件github地址 https://github.com/mouse0270/bootstrap-notify

因为这个插件内容很多，你能想到的基本都有，所以只做一些简单说明（我也只用到这一点点）

            function errorMesg(mess){
                $.notify({
                	title: '<strong>Prompt!</strong>',
                	message: mess
                },{
                	type: 'danger'
                });
            }

其实还有很多用法，比如说Icon-提示框带图片，url-链接路径，animate-动画等等，更多请

查看 Demon http://bootstrap-notify.remabledesigns.com/

优快云下载链接： bootstrap-notify http://download.youkuaiyun.com/detail/u013361445/9119241

bootstrap-growl http://download.youkuaiyun.com/detail/u013361445/9119247