【提要】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">