<!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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>网站后台管理</title>
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/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.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
@media (min-width: 768px) {
#slider_sub{
width: 200px;
margin-top: 51px;
position: absolute;
z-index: 1;
height: 600px;
}
.mysearch{
margin: 10px 0;
}
.page_main{
margin-left: 205px;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<!--缩放 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#slider_sub">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">网站后台管理</a>
</div>
<ul class="nav navbar-nav navbar-right" style="margin-right: 25px">
<li><a href=""><span class="badge" style="background: #C12E2A">23</span></a></li>
<li><a href=""><span class="glyphicon glyphicon-off"></span> 注销</a></li>
</ul>
<!-- 侧边栏 -->
<div class="navbar-default navbar-collapse" id="slider_sub">
<ul class="nav">
<li>
<! --搜索 -->
<div class="input-group mysearch">
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</li>
<li><a href="#sub1" class="collapse" data-toggle="collapse">系统功能<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
<ul id="sub1" class="nav collapse">
<li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> 系统信息</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 管理员管理</a></li>
<li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> 日志管理</a></li>
<li><a href="#"><span class="glyphicon glyphicon-remove-circle"></span> 退出</a></li>
</ul>
</li>
<li><a href="#sub2" class="collapse" data-toggle="collapse">栏目功能<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
<ul id="sub2" class="nav collapse">
<li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> 系统信息</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 管理员管理</a></li>
<li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> 日志管理</a></li>
<li><a href="#"><span class="glyphicon glyphicon-remove-circle"></span> 退出</a></li>
</ul>
</li>
<li><a href="#sub3" class="collapse" data-toggle="collapse">产品功能<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
<ul id="sub3" class="nav collapse">
<li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> 系统信息</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 管理员管理</a></li>
<li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> 日志管理</a></li>
<li><a href="#"><span class="glyphicon glyphicon-remove-circle"></span> 退出</a></li>
</ul>
</li>
<li><a href="#sub4" class="collapse" data-toggle="collapse">新闻功能<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
<ul id="sub4" class="nav collapse">
<li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> 系统信息</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 管理员管理</a></li>
<li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> 日志管理</a></li>
<li><a href="#"><span class="glyphicon glyphicon-remove-circle"></span> 退出</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- 主区域 -->
<div class="page_main" style="background: rgba(92,88,116,0.34)">
<ol class="breadcrumb">
<li><a href="#">管理首页</a></li>
<li><a href="#">栏目</a></li>
<li><a href="#">增加栏目</a></li>
</ol>
<div class="row">
<div class="col-md-12 col-sm-3">
<div class="panel panel-default">
<div class="panel-header">最新订单</div>
<div class="panel-body table-responsive">
<table class="table table-striped table-hover" style="margin: 10px;">
<thead>
<tr>
<th>id</th>
<th>订单号</th>
<th>订单日期</th>
<th>总价</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>22</th>
<th>2017-8-9</th>
<th>9000￥</th>
<th>促销</th>
</tr>
<tr>
<th>1</th>
<th>22</th>
<th>2017-8-9</th>
<th>9000￥</th>
<th>促销</th>
</tr>
<tr>
<th>1</th>
<th>22</th>
<th>2017-8-9</th>
<th>9000￥</th>
<th>促销</th>
</tr>
</tbody>
</table>
<nav aria-label="Page navigation" class="pull-right">
<ul class="pagination" style="margin-top: 10px;">
<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>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
图片：
扫一扫
1273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
