参考 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. 走进小作坊（十一）----移动web实现指南

    四.五年前智能手机行业刚刚兴起,差别于之前功能机阉割版的web开发方式,一些学者就開始探索移动web的UI方向了.从PC迁移到移动端的web设计现成可用的原则有,很多其它的则是依据移动端独有特点进行探 ...

  2. Java Dom解析xml

    Dom解析是将xml文件全部载入,组装成一颗dom树,然后通过节点以及节点之间的关系来解析xml文件,下面结合这个xml文件来进行dom解析. <?xml version="1.0&q ...

  3. POJ 2342 树形DP入门题

    有一个大学的庆典晚会,想邀请一些在大学任职的人来參加,每一个人有自己的搞笑值,可是如今遇到一个问题就是假设两个人之间有直接的上下级关系,那么他们中仅仅能有一个来參加,求请来一部分人之后,搞笑值的最大是 ...

  4. grivid中切换按钮，两个按钮交替

    给grivdView不要设值 button的url和 commandName 在rowDatabound中操作变换 protected void GVData_RowDataBound(object ...

  5. BZOJ 1297: [SCOI2009]迷路( dp + 矩阵快速幂 )

    递推式很明显...但是要做矩阵乘法就得拆点..我一开始很脑残地对于每一条权值v>1的边都新建v-1个节点去转移...然后就TLE了...把每个点拆成9个就可以了...时间复杂度O((9N)^3* ...

  6. MySQL学习系列一---命令行连接mysql和执行sql文件

    1.命令行连接mysql #mysql -h(主机) -u(用户名) -p (数据库名) mysql -hlocalhost -uroot -p testdb Enter password: **** ...

  7. c++ 学习笔记（常见问题与困惑）（转载）

    本问转自: http://www.cnblogs.com/maowang1991/p/3290321.html 1.struct成员默认访问方式是public,而 class默认访问方式是privat ...

  8. android基于XMPP的消息推送机制

    关于服务器端向Android客户端的推送,主要有三种方式:1.客户端定时去服务端取或者保持一个长Socket,从本质讲这个不叫推送,这是去服务端拽数据.但是实现简单,主要缺点:耗电等2.Google的 ...

  9. 把WinXP装进内存 性能飚升秒杀固态硬盘

    现在用户新配置的电脑,内存很少有小于2GB的,配置4GB内存的朋友也有不少.容量如此大的内存,我们在使用电脑的日常操作中绝对用不完.而目前制约系统性能最大的瓶颈就是硬盘的传输速度,所以,这里教你怎么把 ...

  10. Android 流媒体系列（一）

    Android   设置铃声分析 代码其实没有几行,这里简单记录下学习的过程. Android系统启动时会扫描系统与SD卡中的对媒体文件,分别存入数据库sqlite中,以contentProvider ...