今天我们来学习下在做项目的过程中如何使用Bootstrap来引入比较美观的样式，学完了这篇博客，大家就可以尽情的使用模板了呀！
- bootstrap官网：v3.bootcss.com/getting-sta…
第一步：导入bootstrap要依赖的包、引入bootstrap即可
- 导入有关jar包
- 引入bootstrap头部文件
<!-- bootstrap对IE览器器的支持 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- bootstrap对各个平台的支持 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- 引入bootstrap时要依赖的jquery -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- 引入bootstrap的主css文件 -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap的主题样式 -->
<link href="./bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- 引入bootstrap的js -->
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
第二步：在bootstrap中使用栅格系统
栅格系统: 指的是将每行分为大小均匀的12等分，在任何平台都能根据屏幕大小自动换行显示，样式效果极佳。比如一个网页在平板、手机、电脑端的分辨率不一样，所以显示就要根据屏幕分辨率进行友好展示了。
格式如下：
<!-- 表示一个副容器 -->
<div class="container">
<!-- 表示一行 -->
<div class="row">
<!-- 一行总共分为12列， md表示电脑端显示的大小 xs表示手机端显示的大小 offset表示列偏移几列 -->
<div class="col-xs-3 col-md-3 col-md-offset-3"
style="background-color: red">我占3列</div>
<div class="col-xs-6 col-md-6" style="background-color: green">我占6列</div>
<div class="col-xs-3 col-md-3" style="background-color: gray">我占3列</div>
</div>
</div>
表格样式模板
<table border="1" class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr class="success">
<th>名字</th>
<th>年龄</th>
<th>性别</th>
<th>学历</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>本科</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>本科</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>本科</td>
</tr>
</tbody>
</table>
显示效果如下：
登录页面模板如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- bootstrap对IE览器器的支持 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- bootstrap对各个平台的支持 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- 引入bootstrap时要依赖的jquery -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- 引入bootstrap的主css文件 -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap的主题样式 -->
<link href="./bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- 引入bootstrap的js -->
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<title>登陆界面</title>
<style type="text/css">
#huakuang {
width: 650px;
height: 500px;
margin-top: 100px;
margin-left: 280px;
background-color: #CCFF00;
}
#mag{
margin-top: 90px;
}
</style>
</head>
<body>
<div class="container">
<div id="huakuang">
<div class="row">
<div class="col-md-6 col-md-offset-4" id = "mag">
<h1>用户登陆</h1>
<br>
</div>
</div>
<div class="row">
<div class="col-md-9 col-md-offset-3">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputEmail3"
placeholder="用户名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密 码:</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword3"
placeholder="密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label> <input type="checkbox"> 记住密码
</label> <label> <input type="checkbox"> 自动登陆<br>
</label><br>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登陆</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
显示效果如下：
注册页面模板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- bootstrap对IE览器器的支持 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- bootstrap对各个平台的支持 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- 引入bootstrap时要依赖的jquery -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- 引入bootstrap的主css文件 -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap的主题样式 -->
<link href="./bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- 引入bootstrap的js -->
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<title>用户注册页面</title>
<style type="text/css">
#huakuang{
width: 650px;
height: 500px;
margin-top: 100px;
margin-left: 250px;
background-color: #66FFFF;
}
#mgr{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div id = "huakuang">
<div class="row">
<div class="col-md-6 col-md-offset-4" id="mgr">
<h1>用户注册</h1><br>
</div>
</div>
<div class="row">
<div class="col-md-9 col-md-offset-1">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3"
placeholder="用户名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密 码:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3"
placeholder="密码">
</div>
</div>
<div class="row">
<label for="inputPassword3" class="col-sm-2 control-label">性 别:</label>
<div class="col-sm-10">
<label class="radio-inline"> <input type="radio"
name="inlineRadioOptions" id="inlineRadio1" value="男" checked="checked"> 男
</label> <label class="radio-inline"> <input type="radio"
name="inlineRadioOptions" id="inlineRadio2" value="女"> 女
</label>
</div>
</div>
<div class="row">
<label for="inputPassword3" class="col-sm-2 control-label">爱 好:</label>
<div class="col-sm-10">
<label class="checkbox-inline"> <input type="checkbox"
id="inlineCheckbox1" value="运动" > 运动
</label> <label class="checkbox-inline"> <input type="checkbox"
id="inlineCheckbox2" value="游戏"> 游戏
</label> <label class="checkbox-inline"> <input type="checkbox"
id="inlineCheckbox3" value="学习" checked="checked"> 学习
</label> </label> <label class="checkbox-inline"> <input type="checkbox"
id="inlineCheckbox4" value="下棋">下棋
</label>
</div>
</div>
<div class="row">
<label for="inputPassword3" class="col-sm-2 control-label">学 历:</label>
<div class="col-sm-10">
<select class="form-control">
<option selected="selected">请选择</option>
<option>本科</option>
<option>专科</option>
<option>硕士</option>
<option>博士</option>
<option>小学</option>
</select><br>
</div>
</div>
<div class="row">
<label for="inputPassword3" class="col-sm-2 control-label">简 介:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="6"></textarea><br>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">点我注册</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
展示效果如下：
后端系统界面模板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- bootstrap对IE览器器的支持 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- bootstrap对各个平台的支持 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- 引入bootstrap时要依赖的jquery -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- 引入bootstrap的主css文件 -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap的主题样式 -->
<link href="./bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- 引入bootstrap的js -->
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<title>页面模板</title>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">酒店管理</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">管理员 <span class="sr-only">(current)</span></a></li>
<li><a href="#">普通员工</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
</div>
</div>
</nav>
<!-- 菜单 -->
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="panel-group" id="menu">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#menu" href="#div1">
房间管理</a>
</h4>
</div>
<div id="div1" class="panel-collapse collapse in">
<div class="list-group">
<a href="#" class="list-group-item">添加房间</a> <a href="#"
class="list-group-item">删除房间</a> <a href="#"
class="list-group-item">修改房间</a> <a href="#"
class="list-group-item">查询房间</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#menu"
href="#div2">旅客管理</a>
</h4>
</div>
<div id="div2" class="panel-collapse collapse">
<div class="list-group">
<a href="#" class="list-group-item">添加旅客</a> <a href="#"
class="list-group-item">删除旅客</a> <a href="#"
class="list-group-item">修改旅客</a> <a href="#"
class="list-group-item">查询旅客</a>
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#menu"
href="#div3">请假管理</a>
</h4>
</div>
<div id="div3" class="panel-collapse collapse">
<div class="list-group">
<a href="#" class="list-group-item">添加请假单</a> <a href="#"
class="list-group-item">删除请假单</a> <a href="#"
class="list-group-item">修改请假单</a> <a href="#"
class="list-group-item">查询请假单</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<ol class="breadcrumb">
<li><a href="#">会员服务</a></li>
<li><a href="#">积分服务</a></li>
<li><a href="#">酒水服务</a></li>
</ol>
<table border="1"
class="table table-hover table-bordered table-hover table-condensed">
<thead>
<tr class="success">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>身份证号</th>
<th>房间号</th>
<th>房间类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>678534198911238923</td>
<td>#309</td>
<td>高档型</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>678534198911238923</td>
<td>#309</td>
<td>高档型</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>678534198911238923</td>
<td>#309</td>
<td>高档型</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>678534198911238923</td>
<td>#309</td>
<td>高档型</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>678534198911238923</td>
<td>#309</td>
<td>高档型</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>678534198911238923</td>
<td>#309</td>
<td>高档型</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>678534198911238923</td>
<td>#309</td>
<td>高档型</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>678534198911238923</td>
<td>#309</td>
<td>高档型</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>678534198911238923</td>
<td>#309</td>
<td>高档型</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>678534198911238923</td>
<td>#309</td>
<td>高档型</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>678534198911238923</td>
<td>#309</td>
<td>高档型</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>678534198911238923</td>
<td>#309</td>
<td>高档型</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>678534198911238923</td>
<td>#309</td>
<td>高档型</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>678534198911238923</td>
<td>#309</td>
<td>高档型</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>678534198911238923</td>
<td>#309</td>
<td>高档型</td>
</tr>
</tbody>
</table>
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="#" aria-label="Previous"> <span
aria-hidden="true">«</span>
</a></li>
<li class="active"><span>1 <span class="sr-only">(current)</span></span>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"> <span
aria-hidden="true">»</span>
</a></li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
界面展示如下：
常用插件源码如下
模态显示框：
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#myModal">显示对话框</button>
<div class="modal fade" id="myModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h6 class="modal-title">标题</h6>
</div>
<div class="modal-body">消息内容部分。</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<div class="modal fade" 中的 fade类代表淡入淡出效果，如果不需要该效果，可去掉该类。
<button data-dismiss="modal" 表示该按钮能够消去模式框。
手风琴面板
<div class="panel-group" id="menu">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#menu" href="#div1">
菜单组一 </a>
</h4>
</div>
<div id="div1" class="panel-collapse in">
<div class="list-group">
<a href="#" class="list-group-item">菜单项11</a>
<a href="#" class="list-group-item">菜单项12</a>
<a href="#"class="list-group-item">菜单项13</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#menu"
href="#div2">菜单组二</a>
</h4>
</div>
<div id="div2" class="panel-collapse collapse">
<div class="list-group">
<a href="#" class="list-group-item">菜单项21</a>
<a href="#" class="list-group-item">菜单项22</a>
<a href="#"class="list-group-item">菜单项23</a>
</div>
</div>
</div>
</div>
轮番图
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption"> ... </div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></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" aria-hidden="true"></span> <span
class="sr-only">Next</span>
</a>
</div>
日期选择器
bootstrap-datepicker3.css
bootstrap-datepicker.js
bootstrap-datepicker.zh-CN.min.js
导入顺序：
<link rel="stylesheet" href="/bs/css/bootstrap.css">
<link rel="stylesheet" href="/bs/css/bootstrap-theme.css">
<link rel="stylesheet" href="/bs/css/bootstrap-datepicker3.css">
<script type="text/javascript" src="/bs/js/html5shiv.js"></script>
<script type="text/javascript" src="/bs/js/respond.js"></script>
<script type="text/javascript" src="/bs/js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="/bs/js/bootstrap.js"></script>
<script type="text/javascript" src="/bs/js/bootstrap-datepicker.js"></script>
<script type="text/javascript"
src="/bs/js/bootstrap-datepicker.zh-CN.min.js"></script>
HTML代码：
<div class="form-group">
<label for="datepicker">出生日期：</label>
<div class="input-group date" id="datepicker" data-date-format="yyyy-mm-dd">
<input class="form-control" size="16" type="text" value="2016-08-09" readonly>
<div class="input-group-addon">
<span class="add-on glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
日期选择器需要通过 js 代码进行初始化，Js 代码如下：
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker();
});
</script>
若要使用中文界面,在初始化时可传入 language 参数值：
$('#datepicker').datepicker({language:'zh-CN'});
验证码插件
引入验证码的servlet
package com.yueqian.echarts.servlet;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Properties;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import com.yueqian.echarts.model.Constant;
/**
* Servlet implementation class CheckImageServlet
*/
@WebServlet("/CheckImageServlet")
public class CheckImageServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public CheckImageServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
/*
* //基本属性
kaptcha.border yes/no //边框
kaptcha.image.width 130 //图片宽度
kaptcha.image.height 48 //图片高度
kaptcha.textproducer.font.size 38 //字体大小
kaptcha.textproducer.char.length 4 //字符个数
//其他属性
kaptcha.textproducer.char.space 10 //字符间距
kaptcha.border.thickness 3 //边框粗细
kaptcha.textproducer.char.string "01234567890" //可用字符
kaptcha.textproducer.font.names "Arial" //字体
kaptcha.noise.imp com.google.code.kaptcha.impl.NoNoise //无干扰点
com.google.code.kaptcha.impl.DefaultNoise //默认干扰点
kaptcha.background.clear.from 0,0,0 //渐变起始颜色
kaptcha.background.clear.to 255，255，255 //渐变结束颜色
*/
DefaultKaptcha dk = new DefaultKaptcha();
Properties ps = new Properties();
ps.setProperty("kaptcha.border", "yes");
ps.setProperty("kaptcha.image.width", "130");
ps.setProperty("kaptcha.image.height", "45");
ps.setProperty("kaptcha.textproducer.char.string","0123456789ABCDEFGHI林池马露涵");
ps.setProperty("kaptcha.noise.imp","com.google.code.kaptcha.impl.DefaultNoise");
ps.setProperty("kaptcha.background.clear.from","255,255,0");
ps.setProperty("kaptcha.background.clear.to","255,255,255");
ps.setProperty("kaptcha.textproducer.font.size","38");
ps.setProperty("kaptcha.textproducer.char.length", "4");
ps.setProperty("kaptcha.textproducer.font.color", "0,0,0");
dk.setConfig(new Config(ps));;
//获取随机验证码
String checkCode = dk.createText();
request.getSession().setAttribute(Constant.CHECK_CODE, checkCode);
//绘制图形
BufferedImage bi = dk.createImage(checkCode);
//设置响应类型
response.setContentType("image/png");
//输出图形
ImageIO.write(bi, "PNG", response.getOutputStream());
response.getOutputStream().flush();
response.getOutputStream().close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
登陆页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<!-- bootstrap对IE览器器的支持 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- bootstrap对各个平台的支持 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- 引入bootstrap的主css文件 -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap的主题样式 -->
<link href="./bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- 引入bootstrap的js -->
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<!-- 引入对时间格式化的util.js -->
<script type="text/javascript" src="./js/util.js"></script>
<script type="text/javascript">
/* 设置验证码图片刷新 */
function getCheckCode() {
$("#checkImg").get(0).src='./CheckImageServlet?rand='+Math.random();
}
/* 传递退出登录的参数 */
function unlogin() {
location.href = "./LoginServlet?typeOper=unlogin";
}
</script>
</head>
<body style="background-color: #33CCCC">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form action="${pageContext.request.contextPath}/LoginServlet" method="post" style="position: relative; top: 200px; background-color: white; padding: 20px;border-radius: 10px;">
<input type="hidden" name="typeOper" value="login"/>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user"></span></span> <input
type="text" name ="admId" class="form-control" placeholder="Username"
aria-describedby="basic-addon1">
</div>
<div> </div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-lock"></span></span> <input
type="text" name="admPwd" class="form-control" placeholder="Password"
aria-describedby="basic-addon2">
</div>
<div> </div>
<div class="input-group">
<div class="col-md-6">
<input type="text" name="checkCode" class="form-control" placeholder="验证码" aria-describedby="basic-addon2">
</div>
<div class="col-md-6">
<a href="javascript:getCheckCode()"><img id="checkImg" alt="err pic" src="./CheckImageServlet"></a>
</div>
</div>
<div> </div>
<div class="from-group">
<button type="submit" class="form-control btn btn-primary">登录</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
展示效果如下
整理这篇博客的初衷是为了让后端程序员做小型项目时去很好的美化前端页面，其中有一些常用的模板，供大家借鉴，今天的内容就分享到这里了，谢谢小伙伴们的支持与鼓励，可以点赞👍+关注👉呦！
