参考文献
Bootstrap表单布局样式
bootstrap创建登录注册页面
Bootstrap登录框自适应水平居中+垂直居中
新建和导入
本人使用eclipse。
创建一个空白的网页项目，创建index.jsp。
导入bootStrap和jQuery
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
表单
< form class=“form-horizontal” role=“form”> </ form>
在class里设置整体表单的样式。
接着是一个个的div块。每一个
块代表表单的一行，如果块里放入多个组件，则代表空间足够时，这一行会横向排列两个组件。
在这里我放入了一个< lable>和一个< div>
lable代表了标识，div块为< div class=“col-sm-4” >，这个div块里面才放< input class=“form-control”>
这样嵌套使用可以使用div的col-sm-4属性生效，在前面空出位置。
具体完整代码
在这里我放入了一个< lable>和一个< div>
lable代表了标识，div块为< div class=“col-sm-4” >，这个div块里面才放< input class=“form-control”>
这样嵌套使用可以使用div的col-sm-4属性生效，在前面空出位置。
具体完整代码
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
body{background: url(img/4.jpg) no-repeat;background-size:cover;}
.container{
display:table;
height:100%;
}
.row{
display: table-cell;
vertical-align: middle;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
text-align:left;
margin-right:-4px;
}
</style>
</head>
<body>
<div class="container">
<div class="row row-centered">
<div class="well col-md-6 col-centered">
<form class="form-horizontal center-block" role="form">
<legend>论文选题与指导一体化系统</legend>
<div class="form-group ">
<label class="col-sm-2 control-label" for="ds_host">用户名</label>
<div class="col-sm-4 ">
<input class="form-control" id="ds_host" type="text" placeholder="请输入账号"/>
</div>
</div>
<div class="form-group ">
<label class="col-sm-2 control-label" for="ds_host">密码</label>
<div class="col-sm-4">
<input class="form-control" id="ds_host" type="text" placeholder="请输入密码"/>
</div>
</div>
<div class="form-group ">
<label class="col-sm-2 control-label" for="ds_host">账号类型</label>
<div class="col-sm-4">
<select id="disabledSelect" class="form-control">
<option>学生</option>
<option>老师</option>
<option>管理员</option>
</select>
</div>
</div>
<div class="form-group ">
<label class="col-sm-2 control-label" for="ds_host"> </label>
<div class="col-sm-4">
<input class="btn btn-default pull-right" id="ds_host" type="submit" value="忘记密码"/>
<input class="btn btn-default pull-right" id="ds_host" type="button" value="登陆"/>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
居中并设置背景图
设置背景图的方法为用css给body加backgrond的属性。
居中则用了嵌套加div，最外层的三个div都为居中使用，这里用了参考文献3里面的内容
最终结果
