abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compati
<!DOCTYPE html>
<html>
<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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<style type="text/css">
@media (min-width: 768px) {
#slider_sub{
width: 250px;
margin-top: 51px;
position: absolute;
z-index: 1;
height: 600px;
}
.myserch{
margin: 10px 0;
}
.page_main{
margin-left: 255px;
}
}
</style>
</head>
<body>
<!-- 导航 -->
<nav class="nav navbar-default navbar-static-top">
<div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<a href="#">网站后台管理</a>
</div>
<ul class="nav navbar-nav navbar-right" style="margin-right: 15px;">
<li><a href="#"><span>23</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-off"></span> 注销</a></li>
</ul>
<!-- 侧边导航 -->
<div class="nav navbar-default navbar-collapse" id="slider_sub">
<ul>
<li>
<div class="input-group myserch">
<input type="text" name="text" id="" />
<span>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</li>
<li>
<a href="#sub1" data-toggle="collapse">系统功能<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
<ul id="sub1" class="nav collapse">
<li><a href="#">系统信息</a></li>
<li><a href="#">管理员信息</a></li>
<li><a href="#">日志信息</a></li>
<li><a href="#">退出</a></li>
</ul>
</li>
<li>
<a href="#sub2" data-toggle="collapse">栏目功能<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
<ul id="sub2" class="nav collapse">
<li><a href="#">系统信息</a></li>
<li><a href="#">管理员信息</a></li>
<li><a href="#">日志信息</a></li>
<li><a href="#">退出</a></li>
</ul>
</li>
<li>
<a href="#sub3" data-toggle="collapse">产品功能<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
<ul id="sub3" class="nav collapse">
<li><a href="#">系统信息</a></li>
<li><a href="#">管理员信息</a></li>
<li><a href="#">日志信息</a></li>
<li><a href="#">退出</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- 内容区域 -->
<div>
<ol>
<li><a href="#">管理首页</a></li>
<li><a href="#">栏目管理</a></li>
<li>增加栏目</li>
</ol>
<div>
<div class="panel panel-default">
<div>最新订单</div>
<div class="panel-body table-responsive">
<table class="table table-striped table-hover tablebo">
<tr>
<th>#</th>
<th>订单号</th>
<th>订单日期</th>
<th>总价</th>
<th>状态</th>
</tr>
<tr>
<td>1</td>
<td>00123456</td>
<td>2018-08-08 13:05:55</td>
<td>118.00</td>
<td>出库</td>
</tr>
<tr>
<td>2</td>
<td>00123456</td>
<td>2018-08-08 13:05:55</td>
<td>118.00</td>
<td>出库</td>
</tr>
<tr>
<td>3</td>
<td>00123456</td>
<td>2018-08-08 13:05:55</td>
<td>118.00</td>
<td>出库</td>
</tr>
</table>
</div>
</div>
</div>
<div>
<div class="panel panel-default">
<div>最新订单</div>
<div class="panel-body table-responsive">
<table class="table table-striped table-hover tablebo">
<tr>
<th>#</th>
<th>订单号</th>
<th>订单日期</th>
<th>总价</th>
<th>状态</th>
</tr>
<tr>
<td>1</td>
<td>00123456</td>
<td>2018-08-08 13:05:55</td>
<td>118.00</td>
<td>出库</td>
</tr>
<tr>
<td>2</td>
<td>00123456</td>
<td>2018-08-08 13:05:55</td>
<td>118.00</td>
<td>出库</td>
</tr>
<tr>
<td>3</td>
<td>00123456</td>
<td>2018-08-08 13:05:55</td>
<td>118.00</td>
<td>出库</td>
</tr>
</table>
</div>
</div>
</div>
<!-- 分页 -->
<nav aria-label="Page navigation">
<ul>
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Correcting teacher：韦小宝Correction time：2019-02-27 14:15:42
Teacher's summary：bootstrap来实现后台的管理界面显然没有layui好用 并且也没有layui灵活 写的很不错 后期可以使用layui来写个后台管理界面