metisMenu是js的菜单插件，可以实现可折叠的二级菜单效果。
1 bootstrap折叠（Collapse）
直接引用bootstrap.js或者bootstrap.min.js就可以支持该插件
<!--整个折叠区块-->
<div class="panel-group" id="accordion">
<!--第一块折叠区-->
<div class="panel panel-default">
<!--第一块折叠区-引用heading板块-->
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">折叠超链接1</a>
</h4>
</div>
<!--第一块折叠区-引用body板块-->
<div class="panel-collapse collapse in" id="collapseOne">
<div class="panel-body">
折叠区1-1
</div>
</div>
</div>
</div>
2 metisMenu折叠
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sqlsite</title>
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="static/css/animate.css" rel="stylesheet">
<link href="static/css/style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav metismenu" id="side-menu">
<li class="nav-header">
<div class="dropdown profile-element"> <span>
<img alt="image" class="img-circle" src="http://cn.inspinia.cn/html/inspiniaen/img/profile_small.jpg" />
</span>
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">Name</strong></span> </span> </a>
</div>
<div class="logo-element">
IN+
</div>
</li>
<li>
<a href="index.html"><i class="fa fa-th-large"></i> <span class="nav-label">数据查询</span> <span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li><a href="index.html">A库</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div id="page-wrapper" class="gray-bg">
<div class="row border-bottom">
<nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
<form role="search" class="navbar-form-custom" action="search_results.html">
<div class="form-group">
<input type="text" placeholder="请输入搜索内容" class="form-control" name="top-search" id="top-search">
</div>
</form>
</div>
<ul class="nav navbar-top-links navbar-right">
<li>
<span class="m-r-sm text-muted welcome-message">欢迎来到sqlsite</span>
</li>
<li>
<a href="login.html">
<i class="fa fa-sign-out"></i> 注销
</a>
</li>
</ul>
</nav>
</div>
<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>资料页</h2>
<ol class="breadcrumb">
<li>
<a href="index.html">主页</a>
</li>
<li>
<a>应用</a>
</li>
<li class="active">
<strong>资料页</strong>
</li>
</ol>
</div>
<div class="col-lg-2">
</div>
</div>
</div>
</div>
<!--Bootstrap core JavaScript-->
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="static/js/plugin/metisMenu.js"></script>
<script src="static/js/plugin/jquery.slimscroll.min.js"></script>
<script src="static/js/plugin/inspinia.js"></script>
<script src="static/js/plugin/pace.min.js"></script>
</body>
</html>