摘要：学习bootstrap已经有半个多月了，作业也做了好几天，以为都学的差不鑫，可是在实际的写东西的时候，明显不知道从何下手，查了好多资 料 ，反复的观看视频，一个小作业就做了四五天，我真是佩服自己哈，真是要多敲多看啊。 <!doctype html> <html lang="en"> <head> &n
学习bootstrap已经有半个多月了，作业也做了好几天，以为都学的差不鑫，可是在实际的写东西的时候，明显不知道从何下手，查了好多资
料 ，反复的观看视频，一个小作业就做了四五天，我真是佩服自己哈，真是要多敲多看啊。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>后台管理系统</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="dist/js/jquery.js"></script>
<script src="dist/js/bootstrap.js"></script>
<style>
.adminContainer{bottom: 0;left:0;right: 0;top: 53px;overflow: auto;position: absolute;width: 100%;}
.adminSidebar{ width: 240px;height:100%;padding-bottom: 30px;overflow: auto;background-color: #e3e3e3;}
.adminContent{height: 100%;min-width: 768px;left: 246px;top: 0;right: 0;z-index: 3;padding-bottom: 30px;position: absolute;}
.footer { width: 100%;height: 30px;line-height: 30px; margin-top: 0;left: 0;right: 0;bottom: 0;position: absolute;z-index: 10;background-color:#DFDFDF;text-align:center;}
</style>
</head>
<body>
<nav class="navbar navbar-inverse" style="border-radius:0;margin-bottom: 0px;">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" title="logoTitle" href="#">后台管理页面</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li role="presentation">
<a href="#">当前用户：<span class="badge">admin</span></a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-lock"></span>
退出登录
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="adminContainer">
<div class="adminSidebar">
<div class="panel-group" role="tablist">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="collapseListGroupHeading1">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style="text-decoration: none;">
系统管理<span class="caret" style="float:right;margin-top:5px;margin-right:10px;"></span>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel">
<ul class="list-group">
<li class="list-group-item"><a href="main.html" target="mainFrame">首页设置</a></li>
<li class="list-group-item"><a href="#">备案设置</a></li>
</ul>
</div>
<div class="panel-heading" role="tab" id="collapseListGroupHeading2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="text-decoration: none;">
用户管理<span class="caret" style="float:right;margin-top:5px;margin-right:10px;"></span>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel">
<ul class="list-group">
<li class="list-group-item"><a href="#">管理员</a></li>
<li class="list-group-item"><a href="#">普通用户</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="adminContent">
<iframe src="demomain.html" id="mainFrame" name="mainFrame"
frameborder="0" width="100%" height="100%" frameBorder="0">
</iframe>
</div>
</div>
<div class="footer">后台管理</div>
</body>
</html>
批改老师：查无此人批改时间：2019-01-10 14:56:48
老师总结：不管怎么样，做出来就是进步。做不出来，是见的少，可以多看看别人代码，如何实现的。继续加油。
