说明：

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>&times;</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>&times;</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>&times;</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）--模态框（登录/注册弹框）的更多相关文章

  1. Bootstrap 学习笔记7 模态框插件

    网站弹出框使用: 基本使用: <!-- 模态框的声明 --> <div class="modal" id="myModal" tabindex ...

  2. Bootstrap 学习笔记2 栅格系统 辅助类下拉框

    辅助类和响应式工具: 颜色和字体相同 响应式工具: 图标菜单按钮组件: btn-group 按钮式下拉菜单

  3. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  4. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  5. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  6. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  7. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  8. Python3+Selenium3+webdriver学习笔记8（单选、复选框、弹窗处理）

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...

  9. Bootstrap学习笔记博客

    本片博客用于记录之后要用到Bootstrap的学习笔记   概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...

随机推荐

  1. 算法导论-矩阵乘法-strassen算法

    目录 1.矩阵相乘的朴素算法 2.矩阵相乘的strassen算法 3.完整测试代码c++ 4.性能分析 5.参考资料 内容 1.矩阵相乘的朴素算法 T(n) = Θ(n3) 朴素矩阵相乘算法,思想明了 ...

  2. grafana-zabbix图形简单配置

    连接zabbix数据库 加入dashboard Home--Add--加入dashboad 设置dashboad 设置名字,和标签tag,tag可在输入后回车加入多个 加入简单的一张图,測试能否获取到 ...

  3. Configure Trusted Roots and Disallowed Certificates

    Configure Trusted Roots and Disallowed Certificates Updated: May 5, 2014 Applies To: Windows 8.1, Wi ...

  4. [Grunt] External Config

    Let's combine uglifying, watching, and config stuff into one Grunt file to make it more of a standar ...

  5. Linq 使用注意

    今天在使用Linq的时候,查询很慢.仔细查看在知道,在in的后面跟的是个方法,这个方法返回一个集合. Linq只是语法糖,内部进行了封装.内部的实现也是遍历集合,找到满足条件的元素. 在in的后面使用 ...

  6. phpnow 在win7下遇到“安装服务[apache_pn]失败”问题的一种解决办法

    安装PHPnow时如果遇到下列问题: 安装服务[apache_pn]失败.可能原因如下: 1. 服务名已存在,请卸载或使用不同的服务名. 2. 非管理员权限,不能操作 Windows NT 服务. 将 ...

  7. js正则表达式test方法、exec方法与字符串search方法区别

    1.正则表达式test方法 test() 方法用于检测一个字符串是否匹配某个模式 返回值: 如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 fal ...

  8. CSS命名规范 BEM

    良好的代码结构,HTML和css元素之间的关系,对于项目交付是很重要的! BEM解释: (1).block 是BEM的区块(B),包含内容和风格.如bootstrap框架的.container. (2 ...

  9. myql基准测试工具Sysbench

    一.Sysbench介绍 SysBench是一个模块化的.跨平台.多线程基准测试工具,主要用于评估测试各种不同系统参数下的数据库负载情况.它主要包括以下几种方式的测试: 1.cpu性能 2.磁盘io性 ...

  10. 去哪网实习总结：递归构建“流程运行顺序”的XML文件（JavaWeb）

    本来是以做数据挖掘的目的进去哪网的,结构却成了系统开发... 只是还是比較认真的做了三个月,老师非常认同我的工作态度和成果.. . 实习立即就要结束了,总结一下几点之前没有注意过的变成习惯和问题.分享 ...