Bootstrap Alert 使用
参考 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 使用的更多相关文章
- bootstrap插件学习-bootstrap.alert.js
我们先看bootstrap.alert.js的结构 var dismiss = '[data-dismiss="alert"]' //自定义属性 Alert = function ...
- Bootstrap Alert Auto Close
http://stackoverflow.com/questions/23101966/bootstrap-alert-auto-close http://jsfiddle.net/mfX57/ $( ...
- 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】
https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...
- angularjs 指令详解 - template, restrict, replace
通过指令机制,angularjs 提供了一个强大的扩展系统,我们可以通过自定义指令来扩展自己的指令系统. 怎样定义自己的指令呢? 我们通过 Bootstrap UI来学习吧.这个项目使用 angula ...
- 具备 jQuery 经验的人如何学习AngularJS(附:学习路径)
这是一个来自stackoverflow的问答,三哥直接把最佳回答搬过来了. 都说AngularJS的学习曲线异常诡异~~~ Q: “Thinking in AngularJS” if I have a ...
- [译]用AngularJS构建大型ASP.NET单页应用(三)
原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single A ...
- Javascript 插件统一的实现步骤
步骤: // 1. 定义立即调用的函数 +function($){ "use strict"; //使用严格模式ES5支持 //后续步骤 // 2. xx 插件类及原型方法的定义 ...
- 关于js中this的疑问
学习bootstrap.js源码中被js里边的this绕的有点晕 /* ================================================================ ...
- Yii 设置 flash消息 创建一个渐隐形式的消息框
/*适用情况:比如提交一个表单,提交完成之后在页面展示一条提示消息. 控制器里面这样写: 单条消息: */ \Yii::$app->getSession()->setFlash('erro ...
随机推荐
- Tomcat从零开始(十一)WebappLoader概述
好的,我们先看看这个WebappLoader到底在开始的时候做了什么,先看看他的start()方法. public void start() throws LifecycleException { / ...
- Swift 委托/代理设计模式
Swift 中的委托/代理模式(以下简称"代理模式")与object-c的代理模式基本一致. 代理模式的基本思想就是将我(类或者结构体等)需要来完成的工作交给(委托给)另一个有我所 ...
- 关于Apacheserver的訪问控制
Apache的訪问控制指对不论什么资源的不论什么方式的訪问控制. 一.基于主机或者IP地址的控制 这样的訪问控制基于訪问者的主机名或者IP地址,通过使用 Deny 和 Allow 指令.实现同意或者禁 ...
- xcode - 移动手势
#import "ViewController.h" @interface ViewController () /** 创建一个UIView */ @property(nonato ...
- 用css控制一个DIV画图标。
在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样 ...
- mysql innodb init function error
150414 16:23:07 [ERROR] Plugin 'InnoDB' init function returned error. 150414 16:23:07 [ERROR] Plugin ...
- mysql errno:13
新装的mysql,创建表时报错误 errno:13,网上查了一下是权限问题.解决方式如下: 到mysql的数据目录下:即启动进程中:--datadir=/data/soft/mysql/mysqlda ...
- 用U盘和iso镜像文件重装系统
工具: 1.硬件: 容量最好在2.5G以上u盘(比如这次是2.3G的winows_7_32位_中文专业版ISO,我的U盘容量是不到8G). 2.软件: a.Ultraiso软件,来制作u盘启动项 b. ...
- CSS文本
CSS文字及文本 导航:1.文字及文本2.例子 1.文字及文本文字: 单个字符文本: 多个字符的组合体 2.例子2.1.文字的颜色颜色属性被用来设置文字的颜色格式: color:色值颜色是通过CSS最 ...
- iOS开发的准备
一.程序设计语言 上一讲已经说到:要想开发一款软件,首先得学习一些相应的程序设计语言.至于iOS开发,需要学习的语言主要有:C.C++.Objective-C. 二.是否需要计算机专业知识 可能很多人 ...