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

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 ...

随机推荐

进程控制块(PCB)结构
一.进程控制块(PCB)结构进程控制块(PCB)是系统为了管理进程设置的一个专门的数据结构.系统用它来记录进程的外部特征,描述进程的运动变化过程.同时,系统可以利用PCB来控制和管理进程,所以说,P ...
STL之set集合容器【转】
set集合容器实现了红黑树(Red-Black Tree)的平衡二叉检索树的的数据结构,在插入元素时,它会自动调整二叉树的排列,把该元素放到适当的位置,以确保每个子树根节点的键值大于左子树所有节点的键 ...
Visual Studio 2015年预览设置：辅助安装程序说明
本文介绍了第三方应用程序安装辅助安装的 Visual Studio 2015年预览时安装的说明.如果您安装了多设备开发功能,您需要使用其他第三方软件来处理这些项目.辅助安装程序允许您将部署到您的计算机 ...
求证：a^4+b^4 ≧a^3*b+a*b^3
证明: a4+b4-a3b-ab3 =a3(a-b)-b3(a-b) =(a3-b3)(a-b) =(a-b)2(a2+ab+b2) 而a2+ab+b2=a2+ab+b2/4+3b2/4=(a+b/2 ...
Unity 事件2
UIMouseEvent.cs: using UnityEngine; using System; public abstract class UIMouseEvent : MonoBehaviour ...
算法笔记_022:字符串的旋转（Java）
目录 1 问题描述 2 解决方案 2.1 蛮力移位 2.2 三步反转 1 问题描述给定一个字符串,要求将字符串前面的若干个字符移到字符串的尾部.例如,将字符串“abcdef”的前3个字符‘a’.‘b ...
ant design pro （六）样式
一.概述参看地址:https://pro.ant.design/docs/style-cn 基础的 CSS 知识或查阅属性,可以参考 MDN文档. 二.详细介绍 2.1.less Ant Desig ...
ionic build android 失败及解决方案
原因:没有接受以下SDK组件的许可协议解决方案: install Android Support Repository
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第1章节--SharePoint 2013 介绍 SharePoint 管理中心
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第1章节--SharePoint 2013 介绍 SharePoint 管理中心虽然这本书不重于管理.对 ...
cocopods卸载、安装、重装等问题解决(转)
今日在升级af库的时候,头脑发热把cocopods给卸载了,然后重装就出现了一些问题,主要是Mac ox s升级至10.11之后,好多命令都和以前不一样了,现在重新总结其安装步骤,如下: 一.全新安装 ...

Bootstrap学习笔记（9）--模态框（登录/注册弹框）

Bootstrap学习笔记（9）--模态框（登录/注册弹框）的更多相关文章

随机推荐

热门专题