参考 http://www.bootcss.com/javascript.html#alerts

不过这里没有动态alert的例子

于是再参考http://stackoverflow.com/questions/10082330/dynamically-create-bootstrap-alerts-box-through-javascript

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8" />

  <link href="../css/bootstrap.css" rel="stylesheet">

  <script src="../js/jquery-1.8.0.min.js" type="text/javascript"></script>

  <script src="../js/bootstrap.js" type="text/javascript"></script>

</head>

<body>

  <div style="height:200px;"></div>

  <!-- alert-error 是红色警告 -->

  <div class="alert alert-block alert-error fade in" style="height:0px">

    <button type="button" class="close" data-dismiss="alert">×</button>

    <h4 class="alert-heading">Error!</h4>

    <p>Error!Error!Error!Error!Error!Error!Error!Error!

    </p>

    <p>

      <a class="btn btn-danger" href="#">Take this action</a>

      <a class="btn" href="#" data-dismiss="alert" >Or do this</a>

    </p>

  </div>

  <div style="padding:50px;margin:50px;"></div>

  <input type = "button" id = "clickme" value="Click me!"/>

  <div id = "alert_placeholder"></div>

  <script type="text/javascript">

  $(function(){

    //$(".alert").animate({height:"121px"},1500);

    $(".alert").alert();

  });

  </script>

  <script>

  bootstrap_alert = function() {}

  bootstrap_alert.warning = function(message) {

    $('#alert_placeholder').html('<div class="alert"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>')

  }

  $('#clickme').on('click', function() {

    bootstrap_alert.warning('Your text goes here');

  });

</script>​

</body>

</html>

Bootstrap Alert 使用的更多相关文章

  1. bootstrap插件学习-bootstrap.alert.js

    我们先看bootstrap.alert.js的结构 var dismiss = '[data-dismiss="alert"]' //自定义属性 Alert = function ...

  2. Bootstrap Alert Auto Close

    http://stackoverflow.com/questions/23101966/bootstrap-alert-auto-close http://jsfiddle.net/mfX57/ $( ...

  3. 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】

    https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...

  4. angularjs 指令详解 - template, restrict, replace

    通过指令机制,angularjs 提供了一个强大的扩展系统,我们可以通过自定义指令来扩展自己的指令系统. 怎样定义自己的指令呢? 我们通过 Bootstrap UI来学习吧.这个项目使用 angula ...

  5. 具备 jQuery 经验的人如何学习AngularJS（附：学习路径）

    这是一个来自stackoverflow的问答,三哥直接把最佳回答搬过来了. 都说AngularJS的学习曲线异常诡异~~~ Q: “Thinking in AngularJS” if I have a ...

  6. [译]用AngularJS构建大型ASP.NET单页应用（三）

    原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single A ...

  7. Javascript 插件统一的实现步骤

    步骤: // 1. 定义立即调用的函数 +function($){ "use strict"; //使用严格模式ES5支持 //后续步骤 // 2. xx 插件类及原型方法的定义 ...

  8. 关于js中this的疑问

    学习bootstrap.js源码中被js里边的this绕的有点晕 /* ================================================================ ...

  9. Yii 设置 flash消息 创建一个渐隐形式的消息框

    /*适用情况:比如提交一个表单,提交完成之后在页面展示一条提示消息. 控制器里面这样写: 单条消息: */ \Yii::$app->getSession()->setFlash('erro ...

随机推荐

  1. Linux下安装Oracle的过程和涉及的知识点-系列4

    10.使用rpm安装包 假设本地有现成的相关包,能够直接使用rpm安装.rpm rpm包名,但有时会出现它须要其他包的支持,这时若须要忽略此提示.强行安装,运行rpm -i --force --nod ...

  2. .NET平台和C#语言

    .NET平台的作用C#语言通过.NET平台来编写 部署 运行.NET应用程序. 为什么学习.NET语言1. C#语言是为.NET平台而生的.2. C#语言是完全面向对象的语言,所以一般情况下我们用C# ...

  3. 栈的实现 -- 数据结构与算法的javascript描述 第四章

    栈 :last-in-first-out 栈有自己特殊的规则,只能 后进入的元素 ,最先被推出来,我们只需要模拟这个规则,实现这个规则就好. peek是返回栈顶元素(最后一个进入的). /** * 栈 ...

  4. SQL学习之使用视图

    1.简介:视图是虚拟的表.与包含的数据不一样,视图只包含使用时动态检索数据的查询.重点:视图是一个查询,不是一个表!

  5. 亲测的一款在线作图神器：ProcessOn

    本人近日发现一款作图神器:ProcessOn 它是一款在线的作图工具,完全国产,前台是用HTML5  Canvas加javascript做绘图,后台用java实现数据处理和图片生成, 整站UI基本类似 ...

  6. ;(function( $, window, undefined ){ }(jQuery,window))为何需要往里面传$,window,undefined这些参数

    (function( $, jQuery , undefined ) {})(jQuery); 为什么要将window和undefined作为参数传给它? 因为 ecmascript 执行JS代码是从 ...

  7. return和break的区别

    /* Name:return和break的区别 Copyright: By.不懂网络 Author: Yangbin Date:2014年2月25日 02:13:22 Description:以下代码 ...

  8. Unix/Linux笔记全集

    1:Unix/Linux操作系统概述 要求:理解应用软件和操作系统的区别,掌握系统的Kernel(核心)和shell(外壳)之间的关系以及各自的作用 Solaris:Solaris 是Sun Micr ...

  9. openStack开源云repo db local or on-line 实战部署之Ruiy王者归来

    preface/pre,获取OpenStack核心模块组件及其子组件包(当前仅针对centos6*)及其依赖包 eg,picture

  10. Java基础：容器

    转载请注明出处:jiq•钦's technical Blog 一.Collection:存放独立元素 Collection中的接口都是可选操作,事实上现类 并不一定实现了其全部接口,这是为了防止&qu ...