html 结构
<div class="leftnav">
<div class="leftnav_cont panel-group" id="accordion"><div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><i class="tabnav-ico"><img class="img-responsive" src="images/bam_ico1.png" alt="Responsive image"></i><a onClick="" data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">报名登记</a> </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><i class="tabnav-ico"><img class="img-responsive" src="images/bb_ico2.png" alt="Responsive image"></i><a class="on" data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo"> 报表统计 </a> </h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body"> <a class="on" href="#">班级报表</a> <a href="#">课程报表</a> <a href="#">费用报表</a> </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><i class="tabnav-ico"><img class="img-responsive" src="images/bsj_ico3.png" alt="Responsive image"></i><a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree"> 数据维护</a> </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body"> </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><i class="tabnav-ico"><img class="img-responsive" src="images/bxt_ico4.png" alt="Responsive image"></i><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">系统维护</a> </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body"> </div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
css样式
.leftnav{ background:#252525; width:180px; height:100%; position:absolute; bottom:0px; left:0px; top:0px; z-index:11;}
.leftnav_cont{ background:#252525;}
.panel-group{ background:#252525;}
.panel,.panel-default>.panel-heading{ background:none !important; color:#fff; text-align:center;}
.panel-heading{ border-top-left-radius: 0px; border-top-right-radius: 0px;}
.panel-group .panel-heading+.panel-collapse>.panel-body, .panel-group .panel-heading+.panel-collapse>
.list-group { border-top: 1px solid #2c2c2c;}
.panel-default { border-color: #2c2c2c;}
.panel-title>a,.panel-body a { color: #ababab;}
.tabnav-ico{ margin-right:6px; display:inline-block;}
.panel-body a{ display:block; padding:6px;}
.N_in{ color:#f4f7fa;}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>shaoniangong</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
<![endif]-->
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css"></style>
<script>
function openLink(linktype){
var pagePath = null;
if(linktype!=null){
if(linktype=="baomingdengji")
{
pagePath = "baomingdengji.html";
}else if(linktype=="baobiaotongji"){
pagePath = "baobiaotongji.html";
}else if(linktype=="shujuweihu"){
pagePath = "shujuweihu.html";
}else if(linktype=="xitongweihu"){
pagePath = "xitongweihu.html";
}
}
if(pagePath!=null){
var mainFrame = document.getElementById("mainFrame");
if(mainFrame!=null)
{
mainFrame.src = pagePath;
}
}
}
</script>
</head>
<body>
<header>
<img class="img-responsive pull-left" src="images/logo.png" alt="Responsive image">
<div class="lb pull-right"><span>欢迎<a class="S_user" href="#">admin</a></span><a href="#"><img class="pull-right" src="images/close.png"></a></div>
</header>
<div class="container-fluid main">
<div class="leftnav">
<div class="leftnav_cont panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><i class="tabnav-ico"><img class="img-responsive" src="images/bam_ico1.png" alt="Responsive image"></i><a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne" οnclick="openLink('baomingdengji')">报名登记</a> </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><i class="tabnav-ico"><img class="img-responsive" src="images/bb_ico2.png" alt="Responsive image"></i><a class="on" data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo" οnclick="openLink('baobiaotongji')"> 报表统计 </a> </h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body"> <a class="on" href="#">班级报表</a> <a href="#">课程报表</a> <a href="#">费用报表</a> </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><i class="tabnav-ico"><img class="img-responsive" src="images/bsj_ico3.png" alt="Responsive image"></i><a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree" οnclick="openLink('shujuweihu')"> 数据维护</a> </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body"> </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><i class="tabnav-ico"><img class="img-responsive" src="images/bxt_ico4.png" alt="Responsive image"></i><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" οnclick="openLink('xitongweihu')">系统维护</a> </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body"> </div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="con_r">
<iframe id="mainFrame" name="mainFrame" src="" noresize="" scrolling="no"rows="*"></iframe>
<div class="footer">
<p>安徽时旭智能科技有限公司版权所有</p>
</div>
</div>
</div>
<!-- 可选的Bootstrap主题文件(一般不使用) -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>