创建主页面：index.jsp：

引入bootstrap依赖：

首先写导航条，复制代码更改：

使用栅格布局：

 菜单栏使用手风琴组件，复制代码：

修改手风琴代码：

手风琴嵌套列表组

 系统管理
数据备份
系统状态
系统状态
 用户管理
用户列表
 学生管理
学生列表

 用户管理页面跟主页面，导航栏，菜单栏都相同，不同的是页面中心内容部分，所以复制index主页面代码，修改页面中心内容部分的代码：

 系统管理
数据备份
系统状态
系统状态
 用户管理
用户列表
 学生管理
学生列表
用户管理
用户列表
添加用户
Name
Email
Send invitation
#
id
名称
用户名
操作
1
Mark
Otto
@mdo
删除修改
2
Jacob
Thornton
@fat
删除修改
3
Larry
the Bird
@twitter
删除修改
用户添加

 
用户管理
用户列表
添加用户
Name
Email
Send invitation
#
id
名称
用户名
操作
1
Mark
Otto
@mdo
删除修改
2
Jacob
Thornton
@fat
删除修改
3
Larry
the Bird
@twitter
删除修改
用户添加

添加分页、消息提示警告框：

第二个面板：

 点击修改：

用户列表页list.html面详细代码：

 系统管理
数据备份
系统状态
系统状态
 用户管理
用户列表
 学生管理
学生列表
用户管理
用户列表
添加用户
Name
Email
Send invitation
添加用户信息
#
姓名
名称
用户名
操作
1
Mark
Otto
@mdo
删除修改
2
Jacob
Thornton
@fat
删除修改
3
Larry
the Bird
@twitter
删除修改
×删除成功： 当前数据已被删除！
×删除失败： 删除数据失败！
Email address
Password
File input
Example block-level help text here.
 Check me out
Submit

×
Modal title
Email address
Password
File input
Example block-level help text here.
 Check me out
Submit
CloseSave changes

页面联合搭建： 

 下面分被创建分模块：主页面引用：

分别复制list1，list1页面只剩下中心内容和模态框，其余内容删去，然后再主页面的按钮点击引入

student/list1.html中心内容部分：

学生管理
学生列表
添加学生
Name
Email
Send invitation
添加用户信息
#
姓名
名称
用户名
操作
1
Mark
Otto
@mdo
删除修改
2
Jacob
Thornton
@fat
删除修改
3
Larry
the Bird
@twitter
删除修改
×删除成功： 当前数据已被删除！
×删除失败： 删除数据失败！
Email address
Password
File input
Example block-level help text here.
 Check me out
Submit

×
Modal title
Email address
Password
File input
Example block-level help text here.
 Check me out
Submit
CloseSave changes

user/ list1.html:

主页面引入index.html：

 简化js：

 全部主页面代码：

 系统管理
数据备份
系统状态
系统状态
 用户管理
用户列表
 学生管理
学生列表
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Learn more
×
网站程序漏洞，请继续修复!
当前版本程序(V1.0)出现严重安全问题，请尽快进行修复！！
立即修复稍后处理
 系统状态
内存使用率：（40%）
40% Complete (success)
CPU使用率：（20%）
20% Complete
磁盘使用率：（60%）
60% Complete (warning)
数据库使用率：（80%）
80% Complete (danger)

 点击用户列表：

点击学生列表：