如下是我写的基于bootstrap的左侧导航栏，代码如下：
此demo所需的js和css插件链接点击打开链接
1、left.html
<!--左侧核心代码，使用freemarker标签-->
<div id="left" >
<div class="media user-media well-small"><a class="user-link" href="#">
<img class="media-object img-thumbnail user-img" alt="User Picture" src="../assets/img/touxiang_small.png" />
</a>
<br />
<div class="media-body">
<h5 class="media-heading"> ${username}</h5>
<ul class="list-unstyled user-info">
<li>
<a class="btn btn-success btn-xs btn-circle" style="width: 10px;height: 12px;"></a> Online
</li>
</ul>
</div>
<br />
</div>
<!--菜单列表-->
<ul id="menu" class="collapse">
<!-- <li class="panel active">
<a href="index" >
<i class="icon-table"></i> Dashboard
</a>
</li> -->
<#list menuList as menu>
<li class="panel ">
<a href="#" data-parent="#menu" data-toggle="collapse" class="accordion-toggle" id="menuId${menu_index+1}" onclick="showMenuList(${menu_index+1})">
<i class="icon-folder-open-alt"> </i> ${menu.menuName}
<!-- <span class="pull-right">
<i class="icon-angle-left"></i>
</span>
<span class="label label-default">10</span> -->
</a>
<ul class="collapse" id="component-nav">
<#list menu.subMenu as menuList>
<li class=""><a state="${menuList.menuUrl}" onclick="changeIframe(this)"><i class="icon-angle-right"></i> ${menuList.menuName} </a></li>
</#list>
</ul>
</li>
</#list>
</ul>
</div>
2、index.html
<head>
<meta charset="UTF-8" />
<title>**********足疗保健_哈哈哈</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="assets/plugins/css/main.css" />
<link rel="stylesheet" href="assets/plugins/css/theme.css" />
<link rel="stylesheet" href="assets/plugins/css/MoneAdmin.css" />
<link rel="stylesheet" href="assets/plugins/Font-Awesome/css/font-awesome.css" />
<!--END GLOBAL STYLES -->
<!-- PAGE LEVEL STYLES -->
<link href="assets/plugins/css/layout2.css" rel="stylesheet" />
<link href="assets/plugins/flot/examples/examples.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/plugins/timeline/timeline.css" />
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="padTop53 " >
<!-- MAIN WRAPPER -->
<div id="wrap" >
<#include "top.html"/>
<!-- 左边菜单 -->
<#include "left.html"/>
<!--内容区域-->
<div id="content">
<iframe id="content_iframe" src="default" class="inner">
</iframe>
</div>
<!-- 右边部分 -->
<#include "right.html"/>
</div>
<!-- 底部 -->
<#include "footer.html"/>
<!--END FOOTER -->
<!-- GLOBAL SCRIPTS -->
<script src="assets/plugins/jquery-2.0.3.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<!-- END GLOBAL SCRIPTS -->
<!-- PAGE LEVEL SCRIPTS -->
<script src="assets/plugins/flot/jquery.flot.js"></script>
<script src="assets/plugins/flot/jquery.flot.resize.js"></script>
<script src="assets/plugins/flot/jquery.flot.time.js"></script>
<script src="assets/plugins/flot/jquery.flot.stack.js"></script>
<script src="assets/plugins/js/for_index.js"></script>
<script>
function changeIframe(obj) {
var url = $(obj).attr('state');
$("#content_iframe").attr("src",url)
}
function showMenuList(menuId){
var classValue = $("#menuId"+menuId).parent().find("ul").attr("class");
if(classValue == 'collapse'){
$("#menu").find("li").find("ul").attr("class","collapse");
$("#menuId"+menuId).parent().find("ul").attr("class","in");
}
if(classValue == 'in'){
$("#menuId"+menuId).parent().find("ul").attr("class","collapse");
}
}
</script>
</body>
</html>
3、right.html
<div id="right">
<div class="well well-small">
<ul class="list-unstyled">
<li>在线用户 : <span>23,000</span></li>
<li>系统注册用户 : <span>53,000</span></li>
<li>总注册企业 : <span>3,000</span></li>
</ul>
</div>
<!-- <div class="well well-small">
<button class="btn btn-block"> Help </button>
<button class="btn btn-primary btn-block"> Tickets</button>
<button class="btn btn-info btn-block"> New </button>
<button class="btn btn-success btn-block"> Users </button>
<button class="btn btn-danger btn-block"> Profit </button>
<button class="btn btn-warning btn-block"> Sales </button>
<button class="btn btn-inverse btn-block"> Stock </button>
</div> -->
<div class="well well-small">
<span>CPU占用率</span><span class="pull-right"><small>${serverMessage.cpuRate}%</small></span>
<div class="progress mini">
<div class="progress-bar progress-bar-info" style="width: ${serverMessage.cpuRate}%"></div>
</div>
<span>内存使用率</span><span class="pull-right"><small>${serverMessage.memoryRate}%</small></span>
<div class="progress mini">
<div class="progress-bar progress-bar-success" style="width: ${serverMessage.memoryRate}%"></div>
</div>
<span>线程数</span><span class="pull-right"><small>${serverMessage.getThreadCount}个</small></span>
<div class="progress mini">
<div class="progress-bar progress-bar-warning" style="width: ${serverMessage.getThreadCount}%"></div>
</div>
<span>温馨提示：以上数据都是基于jvm级别,本次数据刷新时间${serverMessage.lastTime?string('yyyy-MM-dd HH:mm:ss')}</span><span class="pull-right"></span>
<!-- <span>Summary</span><span class="pull-right"><small>80%</small></span>
<div class="progress mini">
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div> -->
</div>
</div>
4、footer.html
<div id="footer">
<p>© binarytheme ***足疗保健 2018 </p>
</div>
5、top.html
<div id="top">
<nav class="navbar navbar-inverse navbar-fixed-top " style="padding-top: 10px;">
<a data-original-title="Show/Hide Menu" data-placement="bottom" data-tooltip="tooltip" class="accordion-toggle btn btn-primary btn-sm visible-xs" data-toggle="collapse" href="#menu" id="menu-toggle">
<i class="icon-align-justify"></i>
</a>
<!-- LOGO SECTION -->
<header class="navbar-header">
<a href="index.html" class="navbar-brand">
<img src="../assets/img/logo_kunfind_small.png" alt="" />
</a>
</header>
<!-- END LOGO SECTION -->
<ul class="nav navbar-top-links navbar-right">
<!-- 消息通知 -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="label label-success">2</span> <i class="icon-envelope-alt"></i> <i class="icon-chevron-down"></i>
</a>
<ul class="dropdown-menu dropdown-messages">
<li>
<a href="#">
<div>
<strong>我的企业</strong>
<span class="pull-right text-muted">
<em>Today</em>
</span>
</div>
<div>**足疗保健
<br />
<span class="label label-primary">公司信息</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>我的消息</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>服务器昨晚22:30分炸了
<br />
<span class="label label-success"> 详细信息 </span>
</div>
</a>
</li>
<!-- <li class="divider"></li>
<li>
<a href="#">
<div>
<strong>Chi Ley Suk</strong>
<span class="pull-right text-muted">
<em>26 Jan 2014</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing.
<br />
<span class="label label-danger"> Low </span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>Read All Messages</strong>
<i class="icon-angle-right"></i>
</a>
</li>-->
</ul>
</li>
<!--END MESSAGES SECTION -->
</ul>
</nav>
</div>
需要的js文件：
需要的css文件：
