在講公共jsp之前，先說一下Bootstrap和Ace
BootStrap在過去的幾年非常火啊，火的原因就是響應式框架，一次開發，適應PC端、移動端。雖然口號是一次開發，但是實際生產中還是分別對應PC和移動做開發的，只是基礎框架一樣，都是BootStrap。
Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。 它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規范，它即是由動態CSS語言Less寫成。Bootstrap一經推出后頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。 國內一些移動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進行性能優化而來。
來源于百度百科
我個人感覺BootStrap好處就是提供了一系列好看的組件，比如下拉框、tab框、彈出框等等，樣式相對比以前的html+js做的，要絢麗很多，而且基于BootStrap又衍生出一系列的組件，比如JqueryUI、upload、switch等等，組成了一個BootStrap大家族，這才使BootStrap真正好用起來。為了提供更全面的組件整合，出現了很多UI框架，比如一會用到的ACE、Metronic、FlatUI、SBAdmin等等，都是基于BootStrap做的封裝，做了很多小例子可以直接用。
這套東西還是不錯的，它是對BootStrap的輕度封裝，同時引用了一系列的組件，用起來比較方便，而且是藍色系，符合國人多數的審美觀。
頁面的公共jsp包括以下幾個部分：
1、公共引用css
2、公共引用js
3、header
4、menu
5、footer
下面依次講一下各個公共引用
以404頁面做為例子進行js、css等相關引入，這個比較簡單，引入過程中做了一些刪減。
1、ACE相關js和css引入
ACE相關的很多，不可能全都導入進來，只能是按需加入。
這里面首先加入了ACE基礎的，路徑在/assets/ace1.4/下面，包括avatarts、css、fonts、images、js這幾個文件夾，第二是引用ACE相關組件，路徑是/assets/ace1.4/components/下面，包含的幾個組件如下：
1、bootbox：彈出框，封裝了bootstrap原生的彈出框，簡單一些
2、boostrap：bootstrap原生的一些組件
3、font-awesome：圖標庫
4、jquery-ui：jqueryUI相關的一些組件，比如tabs
5、jquery-validation：表單校驗
6、jquery：如果非IE瀏覽器可以引用這個jquery，jquery開發了一個不兼容ie的版本
7、juery.1x：如果是IE瀏覽器，還得引用1x版本
這里面額外加了一個datetimepicker，日期選擇框。
當然后面還會引入更多的，比如datatable、比如echarts等等，用到的時候再加進來。
2、styles.jspf
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="${staticServer}/assets/ace1.4/css/bootstrap.css" />
<link rel="stylesheet" href="${staticServer}/assets/ace1.4/components/font-awesome/css/font-awesome.css" />
<!-- page specific plugin styles -->
<!-- text fonts -->
<link rel="stylesheet" href="${staticServer}/assets/ace1.4/css/ace-fonts.css" />
<!-- ace styles -->
<link rel="stylesheet" href="${staticServer}/assets/ace1.4/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
<link rel="stylesheet" href="${staticServer}/assets/ace1.4/css/ace-skins.css" />
<link rel="stylesheet" type="text/css" href="${staticServer }/assets/datetimepicker2.1.9/jquery.datetimepicker.css"/>
可能有些人會奇怪，為啥后綴不是.jsp，而是.jspf呢，其實后綴是什么無所謂，jspf就是和其他jsp區分一下，是用于公共引入的
3、scripts.jspf
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--[if !IE]> -->
<script src="${staticServer}/assets/ace1.4/components/jquery/dist/jquery.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="${staticServer}/assets/ace1.4/components/jquery.1x/dist/jquery.js"></script>
<![endif]-->
<script src="${staticServer}/assets/ace1.4/components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="${staticServer}/assets/ace1.4/components/jquery-ui/jquery-ui.js"></script>
<!-- ace scripts -->
<script src="${staticServer}/assets/ace1.4/js/ace-elements.js"></script>
<script src="${staticServer}/assets/ace1.4/js/ace.js"></script>
<script src="${staticServer}/assets/common/js/common.js"></script>
<!-- plugins -->
<script src="${staticServer}/assets/ace1.4/components/bootbox/bootbox.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript"> ace.vars['base'] = '/'; </script>
<!-- page specific plugin scripts -->
<script src="${staticServer }/assets/datetimepicker2.1.9/jquery.datetimepicker.js" type="text/javascript"></script>
<script src="${staticServer }/assets/ace1.4/components/jquery-validation/dist/jquery.validate.js" type="text/javascript"></script>
<script src="${staticServer }/assets/ace1.4/components/jquery-ui/jquery-ui.js"></script>
這里面只是引用了最基本的js
4、header.jspf
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div id="navbar" class="navbar navbar-default ace-save-state navbar-fixed-top">
<div class="navbar-container ace-save-state" id="navbar-container">
<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
<span class="sr-only">Toggle sidebar</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<div class="navbar-header pull-left">
<!-- #section:basics/navbar.layout.brand -->
<a href="${dynamicServer }/index.htm" class="navbar-brand"> <small><i class="fa fa-leaf"></i> ${webTitle} </small>
</a>
</div>
<!-- #section:basics/navbar.dropdown -->
<div class="navbar-buttons navbar-header pull-right" role="navigation">
<ul class="nav ace-nav">
<li class="purple dropdown-modal">
</li>
<!-- #section:basics/navbar.user_menu -->
<li class="light-blue dropdown-modal"><a data-toggle="dropdown" href="#" class="dropdown-toggle"> <img class="nav-user-photo"
src="${staticServer }/assets/ace1.4/images/avatars/user.jpg" alt="Jason's Photo" /> <span class="user-info"> <small>
系統管理員,</small> 張三
</span> <i class="ace-icon fa fa-caret-down"></i>
</a>
<ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
<li><a href="${dynamicServer }/toUpdatePass.htm"> <i class="ace-icon fa fa-cog"></i> 修改密碼
</a></li>
<li class="divider"></li>
<li><a href="${dynamicServer }/logout.htm"> <i class="ace-icon fa fa-power-off"></i> 退出
</a></li>
</ul></li>
</ul>
</div>
</div>
</div>
這里面
5、menu.jspf
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- #section:basics/sidebar -->
<div id="sidebar" class="sidebar responsive ace-save-state">
<script type="text/javascript">
try {
ace.settings.loadState('sidebar')
} catch (e) {
}
</script>
<div class="sidebar-shortcuts" id="sidebar-shortcuts">
<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
<button class="btn btn-success">
<i class="ace-icon fa fa-signal"></i>
</button>
<button class="btn btn-info">
<i class="ace-icon fa fa-pencil"></i>
</button>
<!-- #section:basics/sidebar.layout.shortcuts -->
<button class="btn btn-warning">
<i class="ace-icon fa fa-users"></i>
</button>
<button class="btn btn-danger">
<i class="ace-icon fa fa-cogs"></i>
</button>
<!-- /section:basics/sidebar.layout.shortcuts -->
</div>
<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
<span class="btn btn-success"></span>
<span class="btn btn-info"></span>
<span class="btn btn-warning"></span>
<span class="btn btn-danger"></span>
</div>
</div><!-- /.sidebar-shortcuts -->
<ul class="nav nav-list">
<li class="">
<a href="index.html">
<i class="menu-icon fa fa-tachometer"></i>
<span class="menu-text"> Dashboard </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-desktop"></i>
<span class="menu-text">
系統管理
</span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="typography.html">
<i class="menu-icon fa fa-caret-right"></i>
資源管理
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="elements.html">
<i class="menu-icon fa fa-caret-right"></i>
角色管理
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="buttons.html">
<i class="menu-icon fa fa-caret-right"></i>
用戶管理
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
</ul><!-- /.nav-list -->
<!-- #section:basics/sidebar.layout.minimize -->
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
<i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state"
data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
<!-- /section:basics/sidebar.layout.minimize -->
</div>
這一塊的代碼非常多，把菜單做了一下刪減，只保留系統管理、資源管理、角色管理、用戶管理幾個。
6、footer.jspf
這個先不設計了，內容頁面只寫內容，不留下方的版權信息了。
