原来项目是使用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. python 提示 AttributeError: module 'json' has no attribute 'dumps'

    最近在学习python解析json的时候遇到问题, 提示 AttributeError: module 'json' has no attribute 'dumps' (模块没有dumps属性的意思) ...

  2. /dev/sdxx is apparently in use by the system; will not make a filesystem here! 解决方法

    在存储上共享了一个500G的空间,映射到Linux系统提供上,环境由2个节点组成. 一． 测试一: 直接mount 用fdisk 格式化之后如下: [root@rac1 u01]# fdisk -l ...

  3. ★ java删除代码注释

    package com.witwicky.util; import java.io.BufferedReader; import java.io.BufferedWriter; import java ...

  4. laravel 视图与传参

    1:先建立好一个控制器HgjController,其中index方法 return  view('hgj'); 2: 建立视图 在resources/views/hgj.blad.php <ht ...

  5. [随想感悟] 面试时，问哪些问题能试出一个 Android 应用开发者真正的水平？【转自知乎】

    这几年面过的各种Android开发也有三位数了,failed的不敢说,pass的基本都没有看走眼,来得晚了也想说说我的体会. 一般面试时间短则30分钟,多则1个小时,这么点时间要全面考察一个人难度很大 ...

  6. ES学习2

    1:es中的分页 一般搜索引擎中的分页都不会提供很大的页面查询,因为查询的页码越大,查询效率越低. 例子: 我们就先预想一下我们在搜索一个拥有5个主分片的索引.当我们请求第一页搜索的时 候,每个分片产 ...

  7. Spring 4 官方文档学习（十）数据访问之DAO支持

    1.介绍 Spring 中 Data Access Object (DAO)支持 的目标是以一种一致的方式更简单的使用JDBC.Hibernate.JPA或JDO等数据访问技术.可以在前面说的几种数据 ...

  8. 创建以API为中心的Web应用(转）

    英文原文:Creating an API-Centric Web Application 引言 API——API是Application Programming Interface(应用编程接口)的简 ...

  9. 原生js版ajax请求

    function getXMLHttpRequest() { var xhr; if(window.ActiveXObject) { xhr= new ActiveXObject("Micr ...

  10. oracle的loop等循环语句的几个用法小例子[转]

    --loop循环用法 (输出1到10) declare v_num number(2) := 0; begin loop v_num := v_num + 1; exit when v_num > ...