css
(1) css是什么？ 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。(2) css有什么用？ 》1 CSS不仅可以静态地修饰网页 》2 还可以配合各种脚本语言动态地对网页各元素进行格式化
bootstrap
（1） bootstrap是什么？
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。
（2） bootstrap特点是什么？ 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
下载
使用bootstrap
（1）复制bootstrap的内容到webapp文件夹（2）在页面引入（3）使用项目访问路径 ${path}（4）设置spring-mvc的静态资源拦截规则（5）测试
temp.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<% pageContext.setAttribute("path",request.getContextPath()); %>
<link href="${path}/css/bootstrap.min.css" rel="stylesheet">
<script src="${path}/js/jquery-1.11.0.min.js"></script>
<script src="${path}/js/bootstrap.min.js"></script>
<title>Title
</title>
</head>
<body>
<div class="container">
<h1>你好，世界！
</h1>
<button type="button">你好我是普通按钮
</button>
<button class="bg-primary" type="button" >你好我是bootstrap按钮
</button>
</div>
</body>
</html>
springmvc.xml
<mvc:resources location="/css/" mapping="/css/**" />
<mvc:resources location="/images/" mapping="/images/**" />
<mvc:resources location="/js/" mapping="/js/**" />
<mvc:resources location="/fonts/" mapping="/fonts/**" />
添加部门页面
开始复制粘贴 https://v3.bootcss.com/javascript/ https://v3.bootcss.com/css/ https://v3.bootcss.com/components/
add_v3.jsp
<body>
<div class="container" >
<div class="row">
<div class="col-md-4" >
<h1>添加部门
</h1>
</div>
</div>
<div class="row">
<div class="col-md-12" >
<form>
<div class="form-group">
<label for="dname">部门名称
</label>
<input type="text" class="form-control" id="dname" placeholder="部门名称">
</div>
<button type="submit" class="btn btn-default">保存
</button>
</form>
</div>
</div>
</div>
</body>
addUIV3
@RequestMapping(path
="/addUIV3",method
= RequestMethod
.GET
)
public String
addUIV3(){
return "add_v3";
}
复制修改出部门编辑页面
edit_v3.jsp
<div class="container" >
<div class="row">
<div class="col-md-4" >
<h1>修改部门
</h1>
</div>
</div>
<div class="row">
<div class="col-md-12" >
<form class="form-horizontal">
<div class="form-group">
<label for="did" class="col-sm-2 control-label">部门编号
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="did" disabled="disabled" value="1">
</div>
</div>
<div class="form-group">
<label for="dname" class="col-sm-2 control-label">部门名称
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="dname" placeholder="部门名称" value="测试部门">
</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>
editUIV3
@RequestMapping(path
="/editUIV3",method
= RequestMethod
.GET
)
public String
editUIV3(){
return "edit_v3";
}
查询功能的列表与导航条
所有都是复制粘贴与修改
list_v3.jsp
<div class="container" >
<div class="row">
<div class="col-md-4" >
<h1>部门列表
</h1>
</div>
</div>
<div class="row">
<%--
<div class="col-md-8" ></div>--%>
<div class="col-md-4 col-md-offset-8" >
<button class="btn btn-primary"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增
</button>
</div>
</div>
<div class="row">
<div class="col-md-12" >
<table class="table table-hover">
<tr >
<th >部门编号
</th>
<th ></th>
<th >部门名称
</th>
<th >操作
</th>
</tr>
<tr>
<td>1
</td>
<td></td>
<td>jack
</td>
<td>
<button class="btn btn-danger"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除
</button>/
<button class="btn btn-info"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 修改
</button>
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6" >当前共有100条记录，共20页
</div>
<div class="col-md-6" >
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">首页
</span>
</a>
</li>
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">上一页
</span>
</a>
</li>
<li class="active"><a href="#">1
</a></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>
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">末页
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
listUIV3
@RequestMapping(path
="/listUIV3",method
= RequestMethod
.GET
)
public String
listUIV3(){
return "list_v3";
}
