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”关键字 ...
随机推荐
- PHP 之前后端交互
今天想实现一个很简单的功能,前端上面一个按键去控制 板子里面的一个LED灯,就这么一个简单的问题,困扰了一天. 以前搞底层的时候,没有服务端和客户端的深刻概念,网页不同,分在客户端运行的 html 代 ...
- USB 转LAN AX88772B 模块驱动添加记录
使用 AX88772B 模块进行扩展百兆网口. 资料地址: http://www.asix.com.tw/cs/products.php?op=pItemdetail&PItemID=105; ...
- 修改jdk
(一)修改jdk的path: (二)修改eclipse里面的jre环境 (三)修改具体项目的jre环境 build path -> config build path (四)修改服务运行环境
- YARN : Architecture of Next Generation Apache Hadoop MapReduceFramework
转自:http://blog.csdn.net/colorant/article/details/9146201 == 目标问题 == 下一代的Hadoop框架,支持10,000+节点规模的Hadoo ...
- hbase权威指南阅读随手笔记二之过滤器
转自:http://blog.csdn.net/saint1126/article/details/8257941 base过滤器的比较操作符: LESS <LESS_OR_EQUAL & ...
- selenium测试（Java）--上传文件（十五）
1. 当页面中是通过input标签实现上传功能时,可以使用selenium来上传功能. 如下: package com.test.upload; import java.io.File; import ...
- numpy库中的知识点——积累
下面是一些杂碎的知识点: 首先我们说说多维数组: 数组的属性: ndarray.ndim, 表示数组的秩是多少: ndarray.shape,返回数组的形状: ndarray.size,数组元素的总个 ...
- e652. Getting the Font Faces for a Font Family
To create a Font object to draw text, it is necessary to specify the font face name. This example de ...
- 使用ffmpeg的av_read_frame,如何控制连接超时
最近使用ffmpeg来做一个rtsp的客户端,这过程也遇到不少问题,不过相应都比较好,一路走下来.不过到项目结尾时,且遇到一个比较纠结的问题.那就是客户端在使用的过程中,把rtsp服务器的网断了.这时 ...
- 转载：mysql 操作总结 INSERT和REPLACE
转自:http://www.jb51.net/article/19411.htm 用于操作数据库的SQL一般分为两种,一种是查询语句,也就是我们所说的SELECT语句,另外一种就是更新语句,也叫做 ...