参考 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. ThreadPool.QueueUserWorkItem的性能问题

    在WEB开发中,为了降低页面等待时间提高用户体验,我们往往会把一些浪费时间的操作放到新线程中在后台执行. 简单的实现代码就是: //代码一 new Thread(()=>{ //do somet ...

  2. Android流式布局实现

    查看我的所有开源项目[开源实验室] 欢迎增加我的QQ群:[201055521],本博客client下载[请点击] 摘要 新项目用到了一种全新布局----Android标签流式布局的功能,正好一直说给大 ...

  3. gridview合并相同的行

    #region 方法:合并Gridview行    /// <summary>    /// 合并GridView指定行单元格    /// </summary>    /// ...

  4. 用js获取周、月第一天和最后一天（转载）

    var getCurrentWeek = function (day) { var days = ["周日", "周一", "周二", &q ...

  5. JavaScript之Ajax

    简介:AJax是在2005年被Adaptive Path的Jesse James Garrett发明的,用户概括异步加载页面内容的技术---说通俗点,Ajax就是实现局部页面通过JavaScript与 ...

  6. 解决URL请求中的中文乱码问题

    解决URL提交中文出现乱码有两种办法:1.请求端的中字符有encodeURI进行一次转码,如: var url="/getUser?name="+encodeURI(name);服 ...

  7. if和switch

    在 JavaScript 中,我们可使用以下条件语句:if 语句 -                        只有当指定条件为 true 时,使用该语句来执行代码if...else 语句 -   ...

  8. atan(正切函数)

    atan函数:返回数值的余切值 原型:double atan(double x) <pre name="code" class="cpp">#inc ...

  9. Hibernate学习之Hibernate流程

    Hibernate的核心组件 在基于MVC设计模式的JAVA WEB应用中,Hibernate可以作为模型层/数据访问层.它通过配置文件(hibernate.properties或hibernate. ...

  10. SQL Server 数据类型陷阱

    1. bit 类型:bit(1) 不要以为它只占一个位,事实上它要占一个字节!也就是说当n < 8 时都是这样的! 2. varchar(n)  这里的n不能大于8000,如果想要比8000大你 ...