bootstrap4 通知_bootstrap 通知 - CSDN
精华内容
参与话题
  • 这是一款基于bootstrap4的jQuery消息通知插件。该消息通知插件使用简单,可生成多种主题的toast消息通知,可设置为自动消失或固定时间消失等,非常实用。
  • bootstrap-toastr 消息通知

    千次阅读 2018-09-21 18:27:28
    bootstrap-toastr 消息通知插 首先需要引入toastr.css和toastr.min.js <link rel="stylesheet" href="../assets/plugins/bootstrap-toastr/toastr.css">...

    bootstrap-toastr 消息通知插

    首先需要引入toastr.css和toastr.min.js

    下载链接 https://download.csdn.net/download/super__code/10681693

    <link rel="stylesheet" href="../assets/plugins/bootstrap-toastr/toastr.css">
    <script  src="../assets/plugins/bootstrap-toastr/toastr.min.js"></script>
    

    使用起来也非常方便 ,有success、info、warning、error、remove等方法。使用如下:
    success

       toastr.success("祝贺你成功了");
    

    在这里插入图片描述
    warning

       toastr.warning("警告你别来烦我了")
    

    在这里插入图片描述
    info

    toastr.info("这是一个提示信息");
    

    在这里插入图片描述

    error

       toastr.error("出现错误,请更改");
    

    在这里插入图片描述

    这个是清除信息弹框(有动画,动画执行完删除)

      toastr.clear();
    

    这个是删除信息弹框(没有动画,立即删除)

    toastr.remove()
    

    也可以调整弹框弹出位置和大小,如:

     	$("#success").click(function(){
              toastr.options = {
                  "positionClass": "toast-top-full-width",//弹出窗的位置
              };
              toastr.success("祝贺你成功了")
        });
    

    在这里插入图片描述

    展开全文
  • bootstrap-notifications, Bootstrap 框架的通知组件 用于 3的 通知组件 要开始,请查看 http://skywalkapps.github.io/bootstrap-notifications ...快速启动通知组件是为 Bootstrap 3构建的。 你有以下安装选项:下载
  • Bootstrap智能消息提示框

    千次阅读 2015-12-26 15:54:51
    Bootstrap智能消息提示框

    Bootstrap智能消息提示框。

    “我觉得操作成功后,需要一个弹出提示框”,客户说。
    “需要吗?我觉得没必要,错误的时候提示,成功时自动跳转就行了!”,我弱弱的答。
    “你那样不人性化,听我的,加一个”,客户继续说。
    “那好吧!”我继续弱弱的答。

    第一关

    其实客户的要求,一点都难不倒我,看我的:

    ajaxDoneSuccess("订单已支付", "/mem/initDeal/2");

    这串代码就是把消息传递到前端。

    function tabAjaxDone(json) {
        YUNM.debug("tab ajaxdone回调函数");
    
        YUNM.ajaxDone(json);
    
        if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok || json[YUNM.keys.statusCode] == YUNM.statusCode.info) {
            var msg = json[YUNM.keys.message];
            // 弹出消息提示
            YUNM.debug(msg);
    
            var thenfunc = null;
            if ("forward" == json.callbackType) {
                thenfunc = function() {
                    if (json.forwardURL) {
                        location.href = json.forwardURL;
                    }
                };
            }
    
            $.showInfo(msg, thenfunc);
    
        }
    }


    1. 页面回调函数执行时,获取服务端传递的消息,同时将后续操作加入到thenfunc中。
    2. 紧接着,通过showInfo函数将消息输出。
    3. 你想看到showInfo方法,没问题。

    $.showInfo = function(str, func) {
        $.weeboxs.open(str, {
            boxid : 'yunm_info_box',
            contentType : 'text',
            showButton : true,
            showCancel : false,
            showOk : true,
            title : '提示 ',
            type : 'wee',
            onclose : func
        });
    };

    打开一个weebox弹出框,然后弹出框关闭的时候执行后续函数func。

    这里写图片描述

    然后你点击确定或者X号就会执行回调函数跳转。

    第二关

    “你这不够人性化,不是所有的执行成功都想弹出消息。”客户说。
    “好,明白”,我答。

    这依然很简单:

    ajaxDoneSuccess("", "/mem/initDeal/2");
    if (msg) {
    $.showInfo(msg, thenfunc, YUNM._set.timeout);
    } else {
        thenfunc();
    }

    第三关

    “你这还不够人性化,我不想点击确定、关闭,就能够跳转。”客户说。
    “好,你想它多长时间自动关闭,才能让你’dont make me wait’”,我喃喃道。
    “什么?”,客户把头朝向我,若有所思的问。
    “哦,没啥,一会就好”,我懒得给他啰嗦。

    这也没啥,不就是加一个timeout嘛,weebox本身就有这个参数。

    if (msg) {
        $.showInfo(msg, thenfunc, YUNM._set.timeout);
    } else {
        thenfunc();
    }
    $.showInfo = function(str, func, timeout) {
        $.weeboxs.open(str, {
            boxid : 'yunm_info_box',
            contentType : 'text',
            showButton : true,
            showCancel : false,
            showOk : true,
            title : '提示 ' + timeout + "秒后自动关闭",
            type : 'wee',
            onclose : func,
            timeout : timeout
        });
    };

    笑对现实的无奈,不能后退的时候,不再傍徨的时候,永远向前 路一直都在──陈奕迅《路一直都在》
    本文出自:【沉默王二的博客

    展开全文
  • bootstrap-toastr 消息通知插件

    千次阅读 2019-04-26 15:50:29
    点击按钮后,显示一个提示信息,然后自动消失 首先需要引入toastr.css和toastr.min.js 下载地址: 版本:latest 复制 标签 复制链接 https://cdn.bootcss.com/toastr.js/latest/css/toastr.css 复制 标签 复制链接 ...

    点击按钮后,显示一个提示信息,然后自动消失

    首先需要引入toastr.css和toastr.min.js

    下载地址: 版本:latest 复制 标签 复制链接 https://cdn.bootcss.com/toastr.js/latest/css/toastr.css 复制 标签 复制链接 https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css 复制

    toastr.success(“祝贺你成功了”);
    在这里插入图片描述
    toastr.warning(“警告你别来烦我了”)
    toastr.info(“这是一个提示信息”);
    toastr.error(“出现错误,请更改”);
    这个是清除信息弹框(有动画,动画执行完删除)
    toastr.clear();
    这个是删除信息弹框(没有动画,立即删除)
    toastr.remove()

    也可以调整弹框弹出位置和大小,如:

    toastr.options = {
    
            "closeButton": false, //是否显示关闭按钮
    
            "debug": false, //是否使用debug模式
    
            "positionClass": "toast-center-center",//弹出窗的位置
    
            "showDuration": "300",//显示的动画时间
    
            "hideDuration": "1000",//消失的动画时间
    
            "timeOut": "5000", //展现时间
    
            "extendedTimeOut": "1000",//加长展示时间
    
            "showEasing": "swing",//显示时的动画缓冲方式
    
            "hideEasing": "linear",//消失时的动画缓冲方式
    
            "showMethod": "fadeIn",//显示时的动画方式
    
            "hideMethod": "fadeOut" //消失时的动画方式
        };
    

    positionClass官方给的可选属性是,发现并没有水平垂直居中的
    toast-top-left 顶端左边
    toast-top-right 顶端右边
    toast-top-center 顶端中间
    toast-top-full-width 顶端,宽度铺满整个屏幕
    toast-botton-right
    toast-bottom-left
    toast-bottom-center
    toast-bottom-full-width
    现在要在它的原css文件中自定义一个css样式

    .toast-center-center {
    top: 30%;
    left: 50%;
    margin-top: -30px;
    margin-left: -150px;

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • bootstrap标签、消息提示

    千次阅读 2019-06-17 11:27:04
    <!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">...bootstrap</title> <style type="text/css"> span.label{ position: relative; top...
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>bootstrap</title>
    	<style type="text/css">
    		span.label{
    			position: relative;
    			top:20px;
    			left:20px;		
    			margin:10px;
    		}
    	</style>
    </head>
    <body>
    	<script src="jquery.min.js"></script>
    	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap/3.3.6/bootstrap.min.css">
    	<script src="bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    	
    	<span class="label label-default">默认</span><!--各类标签-->
    	<span class="label label-primary">强调</span>
    	<span class="label label-success">成功</span>
    	<span class="label label-info">通知</span>
    	<span class="label label-warning">警告</span>
    	<span class="label label-danger">危险</span><br><br>
    	<br><br>
    	<a href="#">新的消息<span class="badge">42</span></a><br><br><br><!--超链-->
    	<button class="btn btn-primary">
    		未读消息<span class="badge">4</span>
    	</button>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 基于Bootstrap的垂直滚动新闻特效
  • BootStrap实现全页滚动效果

    千次阅读 2019-08-04 23:09:33
    BootStrap: <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <!--jquery--&...
  • 标签<span class="label label-default"> Label <span class="label label-default label-success"> Label <span class="label label-default label-danger" > Label <span class="label label-de
  • bootstrap扩展插件bootstrap-notify的使用

    千次阅读 2019-04-26 17:46:11
    1.准备工具: bootstrap-notify的GitHub下载地址:https://github.com/mouse0270/bootstrap-notify bootstrap-notify的官方文档:...bootstrap-notify依赖的css及js文件: jquery : ...
  • bootstrap之notification消息提示应用

    万次阅读 2015-12-28 14:46:34
    在web页面开发中,会用到很多信息弹出的提示,notification就是其中比较好的一款,在开发中用到,特此记录下 $.smallBox({ title : title, ... color : "#CC0033", icon: "fa fa-exclamation-circle bounce ...
  • 一套bootstrap的页面,可以直接拿来用,兼容性自然不用说了,肯定是兼容各个版本的,注意是一套
  • bootstrapbootstrap&type样式

    千次阅读 2017-11-06 23:24:30
    一、前言现在开始介绍bootstrap的基础和排序(type)样式。二、源码1、bootstrap.less1.1、bootstrap.less源码 /*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed...
  • http://www.bootcss.com/p/messenger/ 具体效果下载插件查看 转载于:https://www.cnblogs.com/hgj123/p/5784429.html
  • 如下是我写的基于bootstrap的左侧导航栏,代码如下:此demo所需的js和css插件链接点击打开链接1、left.html&lt;!--左侧核心代码,使用freemarker标签--&gt;&lt;div id="left" &gt; &...
  • bootstrap横向滚动条

    千次阅读 2016-12-08 17:45:34
    在使用bootstrap的时候,手机端的页面出现横向滚动条, 查看row类的css样式内容为: .row{ margin-left:15px; margin-right:15px; } 因此确定就是由于这两个样式引起的。 故重写row类的css样式,即 .row{ ...
  • bootstrap自定义提示框

    千次阅读 2016-06-30 09:22:28
    bootstrap自定义提示框 http://www.runoob.com/bootstrap/bootstrap-tutorial.html bootstrap菜鸟教程 bootstrap的Tooltip插件,显示自定义提示框不好用,... 鼠标移入,显示自定义提示框; custom tip...
  • sing-app-vue-dashboard (sing-app-vue-dashboard) Sing App Vue Dashboard - free and open source admin dashboard. Sing App Vue仪表板-免费和开源的管理仪表板。 Responsive admin dashboard template built ...
  • http://www.bootcss.com/p/sco.js/#message
1 2 3 4 5 ... 20
收藏数 18,945
精华内容 7,578
关键字:

bootstrap4 通知