【bootstrap】Bootstrap Notify的使用步骤

简介: Bootstrap Notify说明文档:http://bootstrap-notify.remabledesigns.com/Bootstrap Notify的GitHub地址:https://github.

Bootstrap Notify说明文档:http://bootstrap-notify.remabledesigns.com/

Bootstrap Notify的GitHub地址:https://github.com/mouse0270/bootstrap-notify

自己使用步骤:

  1.引入js【需要提前引入jQuery和bootstrap的js】

<script src="../static/js/admin/bootstrap-notify.min.js"></script>

  2.引入动画css【需要提前引入bootstrap的css】

<link href="../static/css/login/animate.css" rel="stylesheet" />

  3.使用

 //按钮点击事件
    $(".seachA").click(function(){
       var notify= notifyMsg("德玛西亚");
    });


    function notifyMsg(msg){
       var notify =  $.notify({
            // options
            icon: 'glyphicon glyphicon-warning-sign',
            title: '警告',
            message: msg,
            target: '_blank'
        },{
            // settings
            element: 'body',
            position: null,
            type: "warning",
            allow_dismiss: true,
            newest_on_top: true,
            showProgressbar: false,
            placement: {
                from: "bottom",
                align: "center"
            },
            offset: 20,
            spacing: 10,
            z_index: 1031,
            delay: 5000,
            timer: 1000,
            url_target: '_blank'
        });

       return notify;
    }

  4.效果

 

相关文章
|
前端开发
bootstrap
bootstrap
52 0
|
移动开发 前端开发 JavaScript
Bootstrap4
Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap4 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。
112 0
|
开发框架 前端开发 JavaScript
教你快速安装Bootstrap
教你快速安装Bootstrap
|
前端开发
Bootstrap——安装
Bootstrap——安装
121 0
|
前端开发
1、Bootstrap
1、Bootstrap
117 0
|
前端开发 JavaScript CDN
Bootstrap教程(2)--安装Bootstrap
本文目录 1. 版本选择 2. 使用方式 3. 安装方法 4. 验证下
364 0
Bootstrap教程(2)--安装Bootstrap
|
前端开发 容器
一篇文章学会使用BootStrap
一篇文章学会使用BootStrap
261 0
一篇文章学会使用BootStrap
|
Web App开发 前端开发 JavaScript
Bootstrap系列 -- 1. 如何使用Bootstrap
一. Bootstrap 简介   Bootstrap 是一个前端框架,使用Bootstrap可以做出很多漂亮的页面,中文官网:http://www.bootcss.com/    二. Bootstrap核心    Bootstrap核心是Bootstrap.
1248 0
|
前端开发
|
编解码 前端开发 JavaScript
Bootstrap的用法
一、介绍 Bootstrap,来自 Twitter,是目前比较受欢迎的前端框框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
1602 0