Bootstrap学习笔记（9）--模态框（登录/注册弹框）
说明：
1. 上来一个ul先把登录和注册两个链接扔进去，ul的类nav,navbar-nav是导航条，navbar-right让他固定在右侧。每个li的里面，data-toggle="modal"是点击出现一个modal模组，data-target="#register"是点击之后出现的弹框的id，再里面的span是那个小人图标。
2. 接下来就是一个大div装着这个注册的弹框，id="register"，用来上面的data-target找到目标，class="modal fade"是说这是个modal模态框，fade是渐入效果，如果不加就是点击注册，直接出现，没有从上面慢慢滑下的效果， tabindex="-1"，让esc键起作用，按esc后弹框消失，这个tabindex设置任何值或空的都起作用，不明白原理是啥。
3. 再里面，先是一个class="modal-dialog"，算是个对话框，没有的话四周紧贴边框不好看，里面就是class="modal-content"内容了。
4. 内容分为三个部分，分别是class="modal-header"，class="modal-body"，class="modal-footer"，有点像HTML的标签。
5. header和footer都会带一条横线，不太好看，虽然footer会让两个按钮右侧对齐，不过还是不用比较好。
6. 其实还有一个class="modal-title"，可以作为题目，字体大，用class="text-center"可以居中。
7. 右上角那个叉号，放在了一个class="modal-body"的按钮里面，这个body可以到处用，还不错。class="close"是一个样式，让这个叉号按钮好看一点，并且位于右上角。 data-dismiss="modal"是指点击后关闭这个模态框。<span>×</span>是叉号的转义字符。
8. 然后中间的class="modal-body"就是一个普通的form表单，每个项目用class="form-group"，input用class="form-control"改变一下样式就好了。
9. 最后的两个提交和取消的按钮，外面加一个div，class="text-right"就可以右对齐了。
10. 下面加了个a链接，让两个弹框互相切换，data-toggle="modal"点击出现模态框， data-dismiss="modal"点击关闭当前模态框， data-target="#login"点击后出现的目标模态框id。
11. 后面那个登录弹框一毛一样，不说了。
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script> <style>
body{
background-color: #C7EDCC;
font-family: "microsoft yahei";
/*min-width: 800px;*/
}
img{
width: 100%;
/*height: 462px;*/
}
.navbar{
/*margin-bottom: -10px;*/
}
#myppt{
margin-top: -20px; }
</style>
</head>
<body>
<ul class="nav navbar-nav navbar-right">
<li><a data-toggle="modal" data-target="#register" href=""><span class="glyphicon glyphicon-user"></span> 注册</a></li>
<li><a data-toggle="modal" data-target="#login" href=""><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
</ul>
<!-- 注册窗口 -->
<div id="register" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-title">
<h1 class="text-center">注册</h1>
</div>
<div class="modal-body">
<form class="form-group" action="">
<div class="form-group">
<label for="">用户名</label>
<input class="form-control" type="text" placeholder="6-15位字母或数字">
</div>
<div class="form-group">
<label for="">密码</label>
<input class="form-control" type="password" placeholder="至少6位字母或数字">
</div>
<div class="form-group">
<label for="">再次输入密码</label>
<input class="form-control" type="password" placeholder="至少6位字母或数字">
</div>
<div class="form-group">
<label for="">邮箱</label>
<input class="form-control" type="email" placeholder="例如:123@123.com">
</div>
<div class="text-right">
<button class="btn btn-primary" type="submit">提交</button>
<button class="btn btn-danger" data-dismiss="modal">取消</button>
</div>
<a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">已有账号？点我登录</a>
</form>
</div>
</div>
</div>
</div>
<!-- 登录窗口 -->
<div id="login" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-title">
<h1 class="text-center">登录</h1>
</div>
<div class="modal-body">
<form class="form-group" action="">
<div class="form-group">
<label for="">用户名</label>
<input class="form-control" type="text" placeholder="">
</div>
<div class="form-group">
<label for="">密码</label>
<input class="form-control" type="password" placeholder="">
</div>
<div class="text-right">
<button class="btn btn-primary" type="submit">登录</button>
<button class="btn btn-danger" data-dismiss="modal">取消</button>
</div>
<a href="" data-toggle="modal" data-dismiss="modal" data-target="#register">还没有账号？点我注册</a>
</form>
</div>
</div>
</div>
</div> </body>
</html>
Bootstrap学习笔记（9）--模态框（登录/注册弹框）的更多相关文章
- Bootstrap 学习笔记7 模态框插件
网站弹出框使用: 基本使用: <!-- 模态框的声明 --> <div class="modal" id="myModal" tabindex ...
- Bootstrap 学习笔记2 栅格系统 辅助类下拉框
辅助类和响应式工具: 颜色和字体相同 响应式工具: 图标菜单按钮组件: btn-group 按钮式下拉菜单
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
- Python3+Selenium3+webdriver学习笔记8（单选、复选框、弹窗处理）
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...
- Bootstrap学习笔记博客
本片博客用于记录之后要用到Bootstrap的学习笔记 概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...
随机推荐
- TensorFlow进阶（六）---模型保存与恢复、自定义命令行参数
模型保存与恢复.自定义命令行参数. 在我们训练或者测试过程中,总会遇到需要保存训练完成的模型,然后从中恢复继续我们的测试或者其它使用.模型的保存和恢复也是通过tf.train.Saver类去实现,它主 ...
- IOS NSNotification Center 通知中心的使用
通知中心,它是IOS程序内部的一种消息广播机制,通过它,可以实现无引用关系的对象之间的通信.通知中心他是基于观察者模式,它只能进行程序内部通信,不能跨应用程序进程通信.当通知中心接受到消息后会根据设置 ...
- C经典之9-system,if,do,while---ShinePans
#include <stdio.h> #include <conio.h> #include <stdlib.h> //system(); 这个指令须要用到此头文件 ...
- 编写nios-shell时想到的问题-回车vs换行
在编写nios上类shell用户交互代码时.由于要检測终端输入字符.所以想到了这个问题,故分析之. 回车符的ascii码,ASCII码13 '\r' 换行符的ascii码.ASCII码10 '\n' ...
- ASP.NET HTTP404错误怎么办
如图所示,HTTP404错误. 这是由于没有安装ASP.NET导致的.我们在控制面板->打开或关闭windows功能->Internet信息服务->万维网服务->应用程序开发功 ...
- Spring @Autowired、@Resource、@Required、@Component、@Repository、@Service、@Controller注解的用法和作用
Spring @Autowired,@Resource,@Required注解的用法和作用 Spring中 @Autowired标签与 @Resource标签 的区别 Spring注解@Compone ...
- 转载【微信支付】jsapi支付之传参问题（使用微信官方SDK之PHP版本） V3之WxpayPubHelper 亲测有效，V3WxpayAPI_php_v3.zip版未测试，理论上也是一样的。
本文转载至:http://blog.csdn.net/geeklx/article/details/51146151 (微信支付现在分为v2版和v3版,2014年9月10号之前申请的为v2版,之后申请 ...
- visio扩大画布的大小
鼠标移到画布的边界按住Ctrl,即可扩大画布的大小
- Android SDK中 tools 工具介绍
Android SDK包含了各种各样的定制工具,简介如下: Android模拟器(Android Emulator ) 它是在你的计算机上运行的一个虚拟移动设备.你可以使用模拟器来在一个实际的Andr ...
- centos下 安装jdk
JDK 1.7下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html JDK ...