Bootstrap迁移系列 - Modal
对jQuery的依赖
请注意，所有JavaScript插件都依赖jQuery，在页面中的引入顺序可以参考基本模版。 bower.json中列出了Bootstrap所支持的jQuery版本。
3.x需要JQuery1.9.0以上版本，推荐V1.9.1(支持IE6+)
模态框组件（V3.0）的HTML结构发生了很大的改变。.modal-header、.modal-body和.modal-footer部分目前包含在了.modal-content和.modal-dialog中，为的是增强移动设备上的样式和行为特性。
在2.x中的实现效果
实现代码：
<!DOCTYPE html>
<html>
<head>
<title>登录框</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body style="background: #555;"> <div class="modal show" role="dialog">
<div class="modal-header">
<h3>登录</h3>
<p>请输入E-mail和密码</p>
</div>
<div class="modal-body">
<form action="admin/user/login" method="post" accept-charset="utf-8">
<table class="table">
<tr>
<td>Email</td>
<td><input type="text" name="email" value="" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" value="" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="login" value="登入" class="btn btn-primary" /></td>
</tr>
</table>
</form>
</div>
<div class="modal-footer">
© xiaobin_hlj80
</div>
</div> <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
在3.x中的实现效果
实现代码：
<!DOCTYPE html>
<html>
<head>
<title>登录框</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body style="background: #555;"> <div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>登录</h3>
<p>请输入E-mail和密码</p>
</div>
<div class="modal-body">
<form action="admin/user/login" method="post" accept-charset="utf-8">
<table class="table">
<tr>
<td>Email</td>
<td><input type="text" name="email" value="" class="form-control" placeholder="请输入你的E-mail" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="密码" value="" class="form-control" placeholder="请输入你的密码" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="login" value="登入" class="btn btn-primary btn-lg btn-block" /></td>
</tr>
</table>
</form>
</div>
<div class="modal-footer">
© xiaobin_hlj80
</div>
</div>
</div> <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
.modal-header、
.modal-body和
.modal-footer部分目前包含在了
.modal-content和
.modal-dialog中，为的是增强移动设备上的样式和行为特性。
Bootstrap迁移系列 - Modal的更多相关文章
- Bootstrap迁移系列 - Navbar
在V2.3.2版本中一个标准的导航栏模版如下: <div class="navbar"> <div class="navbar-inner"& ...
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- bootstrap中的modal 模态弹出框不能放在 form_for里面，一弹出modal会自动submit掉form
bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Bootstrap模态框(modal)垂直居中
http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...
- bootstrap模态框modal使用remote动态加载内容，第二次加载显示相同内容解决办法
bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容 ...
- Bootstrap插件系列——Bootstrap-table初始化、分页、客户端搜索、服务端搜索
又好久不写博客,最近项目都是用的bootstrap的样式,不出意外,应该是要在bootstrap的道路上越走越远了,所以下定决心,把bootstrap的插件都好好学学. 昨天写了boostrap-ta ...
- bootstrap 多个 modal 相互遮挡
当一个页面有多个modal时,他们的z-index都是相同的,会产生一个模态框被另一个挡住,失去焦点 此时在模态框的div上加入style="display: none;"就可以.
- Bootstrap组件系列之福利篇几款好用的组件(推荐)
引用 :http://www.jb51.net/article/87189.htm 一.时间组件 bootstrap风格的时间组件非常多,你可以在github上面随便搜索“datepicker”关键字 ...
随机推荐
- iOS边练边学--transform的简单介绍并且用transform实现键盘处理
一.transform:形变属性,能完成功能:平移,缩放,旋转 <平移> // 根据给的移动距离平移 self.tempView.transform = CGAffineTransform ...
- Java 构造方法的执行过程（猜测）
先说明一点,这篇帖子的内容都是我自己思考的结果,如有误,请务必及时告诉我,非常感谢. 起由: public class NewThread implements Runnable{ Thread t; ...
- csv导入mysql提示错误[Error Code] 1290 - The MySQL server is running with the --secure-file-priv option
解决方法: 1.进入mysql查看secure_file_prive的值 mysql>SHOW VARIABLES LIKE "secure_file_priv"; secu ...
- 将ORACLE数据库更改为归档模式；写出步骤
解答:具体步骤如下: 1),以exp方式在线备份数据库到指定位置: 2),观察当前数据库是以服务器参数文件(spfile)方式启动还是以参数文件(pfile)方式启动: SQL> show pa ...
- javascript中call、apply、argument、callee、caller
1.Call方法 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, [,.argN]]]]]) thisObj 可选项.将被用作当前对象的对 ...
- markdown 转 pdf 方法
(1)Mou: (macosx 系统下的markdown编辑器,转pdf完美,推荐) http://25.io/mou/ (2)Chrome 打印 (打印得很好看,缺点是转好的pdf上的文字有时候不能 ...
- c++ 的vector、array和数组的比较
ref: http://blog.csdn.net/haust_wang/article/details/49848169
- XP 终端服务组件 恢复补丁包 terminal service patch
terminal 终端服务组件恢复包 下载地址(点击) winconnect server xp软件 下载地址(点击)
- WPF: 把引用的dll移动到自定义路径
需求: 有A.exe和B.exe, 都引用了 C.dll, output路径都是 W:\Debug. A和B都添加了对C的引用,正常情况下C会被复制到 output 里面. C这样子的dll很多,不想 ...
- mysql中" ' "和 " ` "的区别
http://blog.csdn.net/yang3290325/article/details/3349907