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”关键字 ...
随机推荐
- Hadoop的体系结构之MapReduce的体系结构
MapReduce的体系结构 Hadoop MapReduce是一个使用简易的软件框架,基于它写出来的应用程序能够运行在上千个商用机器组成的大型集群上,并以一种可靠容错的方式并行处理上TB的数据集. ...
- kafkaStream执行过程中出现TimeoutException异常退出
日志中出现以下异常信息,程序中断退出. 目前参考别人的修改下面的配置,原来使用的hostname,改成IP,再观察观察. advertised.listeners=PLAINTEXT://192.1 ...
- iOS彩票项目--第一天，自定义TabBar控制器和自定义TabBar，自定义导航控制器
一.环境配置,和项目层次搭建 二.自定义TabBar 项目中TabBar中的导航按钮美工给的图片太大,图片中包含了图片和文字.最主要的是TabBar上面的按钮图片尺寸是有规定的,当高度大于44的时候, ...
- Juint测试
添加"Juint测试"组件: 之后不用写在main方法里面便可以直接测试:
- VMWare 回收磁盘空间
两部分内容: 1) 实际操作体验下在vmware player里回收guest vm的磁盘空间,还给host: 2)顺便把之前的笔记翻出来关于vmware unmap/reclaim, 对照总结. 1 ...
- 利用VBA宏批量解决Word中图片大小、居中设置
需求:经常阅读网上的研报(没钱买排版漂亮的高质量研报),有些需要保存的复制下来到word里,图片很大都超出word的边界了,也没有居中,手工一张张调整不现实,上百页的研报,几十张图片. 解决方案:利用 ...
- Navicat连接Oracle11g 错误的解决办法
一.换成32位的Navicat!!! 二.去Oracle官网下载你要连接数据版本的client. 注意:需要下载两个文件,以11.2.0.4.0版本为例,需要下载 instantclient-sqlp ...
- wamp5多站点配置教程
wamp5多站点配置教程 第一要做的是安装第二个apache服务一.找到Apache2的htppd.conf文件.例如:我的wamp是安装在G盘的,我的就是G:\wamp\Apache2\conf目录 ...
- 严格控制GOTO语句
注意事项 1,使用顺序.选择.循环等有限的基本结构表示程序逻辑. 2,选用的控制结构只准许有一个入口和一个出口 3,程序语句组成容易识别的块,每块只有一个入口和一个出口. 4,复杂结构应该用基本控制结 ...
- linux ffmpeg编译配置安装详解
http://www.111cn.net/sys/linux/53039.htm ffmpeg是一开源的可跨平台使用的一个图形处理插件,这可以进行录制.转换以及流化音视频,同时可以对视频进行截图,下面 ...