说明：

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. C#和Java交互相关研究

    之前总觉得C#和Java可以交互应用,但是由于时间以及其他方面的原因,一直没有调研.今天抽空搜了一下,终于折腾出来了. 以下是我自己就C#和Java整合的一些提问和分析,如果有不对的地方,请路过的各位 ...

  2. Sql从一张表中更改另一张表数据

    语法: update table1 set table1.列=table2.列 from table2 where table2.列=table1.列update dbo.PATIENT     se ...

  3. 使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验

    在线演示 在线演示 大家在开发基于web的网站或者web应用中,常常在AJAX调用的过程中需要提示用户并且展示相关的“加载中”效果,类似的UI设计也非常多,比如,当点击一个按钮后,在它的旁边显示一个 ...

  4. 随机数的生成：给定1-n的随机数生成器randn()，生成1-m的随机数

    1.当m < n时比较简单: 只当randn()生成的数落在1-m上时,就输出,否则继续生成: 2.当m > n时就比较麻烦一点, 基本思路还是和第一种情况是一样的,问题是怎样才能利用ra ...

  5. git gui :Updating the Git index failed. A rescan will be automatically started to res

    这个是由于unix系统的换行符和windows的换行符不一致造成的结果.你在安装git的时候,设置了成使用LF,即unix换行符,可是你是在windows下进行文件编辑的,所以会出现上面的警告.其实这 ...

  6. Java静态变量的初始化（static块的本质）

    Java静态变量的初始化(static块的本质) 标签: javaclassstring编译器jdk工作 2010-02-06 07:23 33336人阅读 评论(16) 收藏 举报  分类: Jav ...

  7. 〖Linux〗(2013.08.02)使用ctag+cscope查看Android源代码

    1. 安装ctags和cscope sudo apt-get install -y exuberant-ctags cscope 2. vimrc中的配置 """&quo ...

  8. 公用的css

    /*公共开始*/ body, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, tex ...

  9. python3.X中简单错误处理，和Python2区别

    1.print 1.1 Print是一个函数 在Python3中print是个函数,这意味着在使用的时候必须带上小括号,并且它是带有参数的. >>> print 'hello wor ...

  10. VS2012不能创建数据库连接出现或者连接数据库时提示：未能载入文件或程序集“Microsoft.SqlServer.Management.Sdk.Sfc, Version=10.0.0.0, C

    VS2012不能创建数据库连接时或者连接数据库时提示:未能载入文件或程序集"Microsoft.SqlServer.Management.Sdk.Sfc, Version=10.0.0.0, ...