【提要】bootstrap的布局知识基本能满足需求
【步骤】
1、下载jquery.js、bootstrap.js、bootstrap-table.js、及相关xx.min.js、font、css样式文件；
2、创建静态文件目录static，将文件存入：
3、建立布局页面head.jsp、left.jsp、基本文件引入页static.jsp，包含到功能页中即可：
4、功能页引入head.jsp、left.jsp
5、head.jsp主要代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>头部导航</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<jsp:include page="static.jsp"></jsp:include>
<style type="text/css">
.navbar{
margin-bottom:0;
}
</style>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="javascript:(0)">青橙动力</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">项目管理</a></li>
<li><a href="#">系统管理</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
更多 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">系统介绍</a></li>
<li><a href="#">退出</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>6、left.jsp代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>left</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style tyle="text/css">
i{
margin-right:3px;
}
.leftbar{
float:left;
}
.leftbar .container-fluid{
padding-right:0;
padding-left:0;
}
.leftbar .navbar{
width: 150px;
height: 90%;
border-radius: 0;
padding-top:10px;
border-top: 1px solid transparent;
}
.leftbar input{
width:120px;
margin:0 auto;
}
.leftbar li{
width:100%;
line-height:25px;
}
.leftbar li h5{
width:100%;
background-color:#ddd;
padding:10px;
}
.leftbar .active{
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: #777;
border-radius: 10px;
}
.submenu{
list-style:none;
}
.submenu a{
color:#333;
text-decoration:none;
}
.submenu a:hover{
color:#fff;
background-color:#aaa;
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: #777;
border-radius: 10px;
}
.submenu a:active{
color:#fff;
background-color:#aaa;
}
/* 内容块 */
.main{
float:left;
padding-left: 190px;
width: 100%;
top: 55px;
padding-left: 160px;
position: absolute;
}
.content{
width:100%;
}
</style>
</head>
<body>
<div class="leftbar">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div>
<input class="form-control" type="text" placeholder="关键字" />
</div>
<ul class="nav navbar-nav">
<li>
<h5><b><i class="glyphicon glyphicon-cog"></i>权限管理</b></h5>
<ul class="submenu">
<li><a href="/onego/user/userManager" class="active">用户管理</a></li>
<li><a href="/onego/user/userManager">群组管理</a></li>
<li><a href="/onego/user/userManager">角色管理</a></li>
</ul>
</li>
<li>
<h5><b><i class="glyphicon glyphicon-asterisk"></i>业务参数配置</b></h5>
<ul class="submenu">
<li><a href="/onego/user/userManager">电子流管理</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</body>
<script type="text/javascript">
$('.leftbar a').click(function(){
$(this).addClass('badge');
});
</script>
</html>7、功能页代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>用户管理</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body>
<jsp:include page="../../layout/head.jsp"></jsp:include>
<jsp:include page="../../layout/left.jsp"></jsp:include>
<div class="main">
<div class="content">
content
</div>
</div>
</body>
</html>8、static.jsp代码
<script type="text/javascript" src="static/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="static/bootstrap3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="static/bootstrap3/css/bootstrap.css">
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
