原来项目是使用2.x完成的，现在需要使用3.x进行升级。

对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>
模态框组件的HTML结构发生了很大的改变。
.modal-header
、
.modal-body
和
.modal-footer
部分目前包含在了
.modal-content
和
.modal-dialog
中，为的是增强移动设备上的样式和行为特性。

Bootstrap迁移系列 - Modal的更多相关文章

  1. Bootstrap迁移系列 - Navbar

    在V2.3.2版本中一个标准的导航栏模版如下: <div class="navbar"> <div class="navbar-inner"& ...

  2. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  3. bootstrap中的modal 模态弹出框不能放在 form_for里面，一弹出modal会自动submit掉form

    bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form

  4. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. Bootstrap模态框(modal)垂直居中

    http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...

  6. bootstrap模态框modal使用remote动态加载内容，第二次加载显示相同内容解决办法

    bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容 ...

  7. Bootstrap插件系列——Bootstrap-table初始化、分页、客户端搜索、服务端搜索

    又好久不写博客,最近项目都是用的bootstrap的样式,不出意外,应该是要在bootstrap的道路上越走越远了,所以下定决心,把bootstrap的插件都好好学学. 昨天写了boostrap-ta ...

  8. bootstrap 多个 modal 相互遮挡

    当一个页面有多个modal时,他们的z-index都是相同的,会产生一个模态框被另一个挡住,失去焦点 此时在模态框的div上加入style="display: none;"就可以.

  9. Bootstrap组件系列之福利篇几款好用的组件(推荐)

    引用 :http://www.jb51.net/article/87189.htm 一.时间组件 bootstrap风格的时间组件非常多,你可以在github上面随便搜索“datepicker”关键字 ...

随机推荐

  1. C语言 · 递归求二进制表示位数

    算法训练 6-2递归求二进制表示位数   时间限制:10.0s   内存限制:256.0MB      问题描述 给定一个十进制整数,返回其对应的二进制数的位数.例如,输入十进制数9,其对应的二进制数 ...

  2. [app]Linux的setitimer和sleep冲突

    在Linux中使用setitimer和sleep会冲突,二者都是用信号 碰上一个头疼的问题,主程序在sleep的时候,总是被开的一个timer的signal callback所影响, 每当timer的 ...

  3. kernel printk信息显示级别

    涉及文件:kernel/printk.c include/linux/kernel.h用printk内核会根据日志级别把消息打印到当前控制台上.信息正常输出前提是--日志输出级别(msg_log_le ...

  4. java执行jar包

    一般运行包含manifest的jar包,可以使用 java -jar <jar-file-name>.jar 如果jar里没有 manifest,则可以使用 java -cp foo.ja ...

  5. 分布式下的session处理方式

    分布式下的session处理方式 现在的企业级别开发下,分布式的问题是随处可见.今天我们来看看分布式情况下session的处理. 目前的处理方式有以下几种: 1.session黏性.就是说,用户在访问 ...

  6. 使用 OpCache 提升 PHP 5.5+ 程序性能

    说明 PHP 5.5 以后内建了 OpCache , OpCache 的加速原理是把编译后的 bytecode 存储在内存里面, 避免重复编译 PHP 所造成的资源浪费. 引用 How To Enab ...

  7. 给border在加上图片

    .div_top .div_menu li a:hover{ border:2px; height:24px; border-image:url(../img/bg-line-1.png) 0 0 7 ...

  8. 【转】【C++】__stdcall、__cdcel和__fastcall三者的区别

    __stdcall.__cdecl和__fastcall是三种函数调用协议,函数调用协议会影响函数参数的入栈方式.栈内数据的清除方式.编译器函数名的修饰规则等.如下图所示,可以在IDE环境中设定所有函 ...

  9. 第二百九十六节，python操作redis缓存-Hash哈希类型，可以理解为字典类型

    第二百九十六节,python操作redis缓存-Hash哈希类型,可以理解为字典类型 Hash操作,redis中Hash在内存中的存储格式如下图: hset(name, key, value)name ...

  10. R read.table函数的check.names参数

    今天用cummeRbund 对cuffdiff的结果进行可视化, 一直报错,之前跑的好好的,找了半天原因, 原来出现在read.table这个函数上: read.table有一个参数check.nam ...