bootstrap登录注册界面(bootstrap登录界面实例)
主要特色：使用bootstrap搭建，登陆注册在一个页面，背景图片轮播
说明：图片820×560
代码：
&<%@ page language=”java” contentType=”text/html; charset=UTF-8″
pageEncoding=”UTF-8″%&>
&<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&>
&<html&>
&<head&>
&<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″&>
&<meta http-equiv=”X-UA-Compatible” content=”IE=edge”&>
&<meta name=”viewport” content=”width=device-width, initial-scale=1″&>
&<title&>登录注册&</title&>
&<%
String path = request.getContextPath();
String basePath = request.getScheme() + “://”
+ request.getServerName() + “:” + request.getServerPort()
+ path + “/”;
%&>
&<link rel=”shortcut icon” href=”&<%=basePath %&>img/brandbest.png” /&>
&<!– Bootstrap –&>
&<link href=”&<%=basePath %&>bootstrap/css/bootstrap.min.css” rel=”stylesheet”&>
&<style&>
body:{
}
#login_p{
width:26%;
hight:30%;
/*float:right;
margin-top:110px;
margin-right:160px; */
margin-left:37%;
margin-top:10%;
color:white;
position:absolute;
z-index:9999;
background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
background-color:rgba(0,0,0,0.3); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */
}
#regist_p{
width:26%;
hight:30%;
/*float:right;
margin-top:110px;
margin-right:160px; */
margin-left:37%;
margin-top:10%;
display:none;
color:white;
position:absolute;
z-index:9999;
background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
background-color:rgba(0,0,0,0.3); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */
}
&</style&>
&<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –&>
&<!– WARNING: Respond.js doesn’t work if you view the page via file:// –&>
&<!–[if lt IE 9]&>
&<script src=”http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js”&>&</script&>
&<script src=”http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js”&>&</script&>
&<![endif]–&>
&<!– &<script type=”text/javascript” src=”js/jquery-3.1.1.js”&>&</script&> –&>
&<script type=”text/javascript” src=”&<%=basePath %&>js/jquery-1.11.3.js”&>&</script&>
&<script type=”text/javascript”&>
$(function(){
$(“#gologin”).click(function(){
$(“#login_p”).show();
$(“#regist_p”).hide();
});
$(“#goregist”).click(function(){
$(“#login_p”).hide();
$(“#regist_p”).show();
});
});
&</script&>
&</head&>
&<body&>
&<p class=”bg” style=”width:100%;height:100%;position:absolute;”&>
&<p id=”carousel-example-generic” class=”carousel slide” data-ride=”carousel”&>
&<!– Indicators –&>
&<ol class=”carousel-indicators”&>
&<li style=”display:none;” data-target=”#carousel-example-generic” data-slide-to=”0″ class=”active”&>&</li&>
&<li style=”display:none;” data-target=”#carousel-example-generic” data-slide-to=”1″&>&</li&>
&<li style=”display:none;” data-target=”#carousel-example-generic” data-slide-to=”2″&>&</li&>
&</ol&>
&<!– Wrapper for slides –&>
&<p class=”carousel-inner” role=”listbox”&>
&<p class=”item active”&>
&<img style=”width:100%;” src=”&<%=basePath %&>img/bg1.jpg” alt=”…”&>
&<p class=”carousel-caption”&>
&<!– bg1.jpg –&>
&</p&>
&</p&>
&<p class=”item”&>
&<img style=”width:100%;” src=”&<%=basePath %&>img/bg2.jpg” alt=”…”&>
&<p class=”carousel-caption”&>
&<!– bg2.jpg –&>
&</p&>
&</p&>
&<p class=”item”&>
&<img style=”width:100%;” src=”&<%=basePath %&>img/bg3.jpg” alt=”…”&>
&<p class=”carousel-caption”&>
&<!– bg3.jpg –&>
&</p&>
&</p&>
&<!– … –&>
&</p&>
&<!– Controls –&>
&<!– &<a class=”left carousel-control” href=”#carousel-example-generic” role=”button” data-slide=”prev”&>
&<span class=”glyphicon glyphicon-chevron-left”&>&</span&>
&<span class=”sr-only”&>Previous&</span&>
&</a&>
&<a class=”right carousel-control” href=”#carousel-example-generic” role=”button” data-slide=”next”&>
&<span class=”glyphicon glyphicon-chevron-right”&>&</span&>
&<span class=”sr-only”&>Next&</span&>
&</a&> –&>
&</p&>
&</p&>
&<!– 登录框 –&>
&<p class=”loginAndRegist”&>
&<p id=”regist_p”&>
&<form&>
&<p style=”text-align:center;font-size:25px;”&>用户注册 &<a id=”gologin” style=”font-size:10px;cursor:pointer;”&>去登录&</a&>&</p&>
&<p class=”form-group”&>
&<label for=”exampleInputEmail1″&>账号&</label&> &<input
type=”email” class=”form-control” id=”regist_name”
placeholder=”account”&>&<span id=”mark” style=”display:hidden;”&>&</span&>
&</p&>
&<p class=”form-group”&>
&<label for=”exampleInputPassword1″&>密码&</label&> &<input
type=”password” class=”form-control” id=”regist_pass”
placeholder=”Password”&>
&</p&>
&<p class=”form-group”&>
&<label for=”exampleInputPassword1″&>确认密码&</label&> &<input
type=”password” class=”form-control” id=”regist_pass2″
placeholder=”Confirm Password”&>&<span id=”mark2″ style=”display:hidden;”&>&</span&>
&</p&>
&<input id=”basePath” type=”hidden” value=”&<%=basePath %&>”/&>
&<button style=”background:#96c656;color:white;” type=”button” class=”btn btn-default” id=”btn_regist”&>注册&</button&>
&</form&>
&</p&>
&<p id=”login_p”&>
&<p style=”text-align:center;font-size:25px;”&>用户登录 &<a id=”goregist” style=”font-size:10px;cursor:pointer;”&>去注册&</a&>&</p&>
&<form&>
&<p class=”form-group”&>
&<label for=”exampleInputEmail1″&>账号&</label&> &<input
type=”email” class=”form-control” id=”login_name”
placeholder=”account”&>