![]()
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
9 <title>Bootstrap 101 Template</title>
10
11 <!-- Bootstrap -->
12 <link href="css/bootstrap.min.css" rel="stylesheet">
13 <style type="text/css">
14 @media only screen and (min-width: 768px) {
15 #slider_menu {
16 width: 250px;
17 margin-top: 51px;
18 position: absolute;
19 z-index: 1;
20 height: 600px;
21 }
22 .mysearch {
23 margin: 10px 0px;
24 }
25 .page_main {
26 margin-left: 260px;
27 margin-right: 10px;
28 }
29 }
30 </style>
31 </head>
32
33 <body>
34 <!-- 顶部 -->
35 <nav class="navbar navbar-default navbar-static-top">
36 <nav class="navbar-header">
37 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#slider_menu" aria-expanded="false">
38 <span class="sr-only">Toggle navigation</span>
39 <span class="icon-bar"></span>
40 <span class="icon-bar"></span>
41 <span class="icon-bar"></span>
42 </button>
43 <a href="index.html" class="navbar-brand">网站后台管理</a>
44 </nav>
45 <ul class="nav navbar-nav navbar-right" style="margin-right: 25px;">
46 <li>
47 <a href="#"><span class="badge" style="background: #C9302C;">23</span></a>
48 </li>
49 <li>
50 <a href="#"><span class="glyphicon glyphicon-off"></span> 注销</a>
51 </li>
52 </ul>
53
54 <!-- 左侧菜单 -->
55 <div class="navbar-default navbar-collapse" id="slider_menu">
56 <ul class="nav">
57 <li>
58 <!--搜索-->
59 <div class="input-group mysearch">
60 <input type="text" class="form-control" />
61 <span class="input-group-btn">
62 <button type="button" class="btn btn-default">
63 <span class="glyphicon glyphicon-search"></span>
64 </button>
65 </span>
66 </div>
67 </li>
68 <li>
69 <a href="#MenuSystem" data-toggle="collapse">系统管理<span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
70 <ul id="MenuSystem" class="nav collapse">
71 <li>
72 <a href="#"><span class="glyphicon glyphicon-tree-deciduous"></span>系统按钮</a>
73 </li>
74 <li>
75 <a href="#"><span class="glyphicon glyphicon-tree-deciduous"></span>系统模块</a>
76 </li>
77 <li>
78 <a href="#"><span class="glyphicon glyphicon-tree-deciduous"></span>系统日志</a>
79 </li>
80 </ul>
81 </li>
82 <li>
83 <a href="#MenuBasic" data-toggle="collapse">基础资料<span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
84 <ul id="MenuBasic" class="nav collapse">
85 <li>
86 <a href="#">公司管理</a>
87 </li>
88 <li>
89 <a href="#">部门管理</a>
90 </li>
91 <li>
92 <a href="#">角色管理</a>
93 </li>
94 </ul>
95 </li>
96 </ul>
97 </div>
98 </nav>
99 <!--主页面-->
100 <div class="page_main">
101 <!--面包屑-->
102 <ol class="breadcrumb">
103 <li>
104 <a href="#">Home</a>
105 </li>
106 <li>
107 <a href="#">Library</a>
108 </li>
109 <li class="active">Data</li>
110 </ol>
111 <div class="row">
112 <div class="col-md-6">
113 <div class="panel panel-default">
114 <div class="panel-heading">最新订单</div>
115 <div class="panel-body table-responsive">
116 <table class="table table-striped table-hover table-bordered">
117 <thead>
118 <tr>
119 <th>#</th>
120 <th>订单号</th>
121 <th>订单日期</th>
122 <th>总价</th>
123 <th>状态</th>
124 </tr>
125 </thead>
126 <tbody>
127 <tr>
128 <td>1</td>
129 <td>56554</td>
130 <td>2017-7-23 20:06:06</td>
131 <td>25156.67</td>
132 <td>出库</td>
133 </tr>
134 <tr>
135 <td>2</td>
136 <td>56554</td>
137 <td>2017-7-23 20:06:06</td>
138 <td>25156.67</td>
139 <td>出库</td>
140 </tr>
141 <tr>
142 <td>3</td>
143 <td>56554</td>
144 <td>2017-7-23 20:06:06</td>
145 <td>25156.67</td>
146 <td>出库</td>
147 </tr>
148 <tr>
149 <td>4</td>
150 <td>56554</td>
151 <td>2017-7-23 20:06:06</td>
152 <td>25156.67</td>
153 <td>出库</td>
154 </tr>
155 <tr>
156 <td>5 </td>
157 <td>56554</td>
158 <td>2017-7-23 20:06:06</td>
159 <td>25156.67</td>
160 <td>出库</td>
161 </tr>
162 </tbody>
163 </table>
164 </div>
165 </div>
166 </div>
167 <div class="col-md-6">
168 <div class="panel panel-default">
169 <div class="panel-heading">最新订单</div>
170 <div class="panel-body table-responsive">
171 <table class="table table-striped table-hover table-bordered">
172 <thead>
173 <tr>
174 <th>#</th>
175 <th>订单号</th>
176 <th>订单日期</th>
177 <th>总价</th>
178 <th>状态</th>
179 </tr>
180 </thead>
181 <tbody>
182 <tr>
183 <td>1</td>
184 <td>56554</td>
185 <td>2017-7-23 20:06:06</td>
186 <td>25156.67</td>
187 <td>出库</td>
188 </tr>
189 <tr>
190 <td>2</td>
191 <td>56554</td>
192 <td>2017-7-23 20:06:06</td>
193 <td>25156.67</td>
194 <td>出库</td>
195 </tr>
196 <tr>
197 <td>3</td>
198 <td>56554</td>
199 <td>2017-7-23 20:06:06</td>
200 <td>25156.67</td>
201 <td>出库</td>
202 </tr>
203 <tr>
204 <td>4</td>
205 <td>56554</td>
206 <td>2017-7-23 20:06:06</td>
207 <td>25156.67</td>
208 <td>出库</td>
209 </tr>
210 <tr>
211 <td>5 </td>
212 <td>56554</td>
213 <td>2017-7-23 20:06:06</td>
214 <td>25156.67</td>
215 <td>出库</td>
216 </tr>
217 </tbody>
218 </table>
219 </div>
220 </div>
221 </div>
222 </div>
223 <div class="row">
224 <div class="col-sm-12">
225 <div class="panel panel-default">
226 <div class="panel-heading">最新订单</div>
227 <div class="panel-body table-responsive">
228 <table class="table table-striped table-hover table-bordered">
229 <thead>
230 <tr>
231 <th>#</th>
232 <th>订单号</th>
233 <th>订单日期</th>
234 <th>总价</th>
235 <th>状态</th>
236 </tr>
237 </thead>
238 <tbody>
239 <tr>
240 <td>1</td>
241 <td>56554</td>
242 <td>2017-7-23 20:06:06</td>
243 <td>25156.67</td>
244 <td>出库</td>
245 </tr>
246 <tr>
247 <td>2</td>
248 <td>56554</td>
249 <td>2017-7-23 20:06:06</td>
250 <td>25156.67</td>
251 <td>出库</td>
252 </tr>
253 <tr>
254 <td>3</td>
255 <td>56554</td>
256 <td>2017-7-23 20:06:06</td>
257 <td>25156.67</td>
258 <td>出库</td>
259 </tr>
260 <tr>
261 <td>4</td>
262 <td>56554</td>
263 <td>2017-7-23 20:06:06</td>
264 <td>25156.67</td>
265 <td>出库</td>
266 </tr>
267 <tr>
268 <td>5 </td>
269 <td>56554</td>
270 <td>2017-7-23 20:06:06</td>
271 <td>25156.67</td>
272 <td>出库</td>
273 </tr>
274 </tbody>
275 </table>
276 <nav aria-label="Page navigation">
277 <ul class="pagination pull-right">
278 <li>
279 <a href="#" aria-label="Previous">
280 <span aria-hidden="true">上一页</span>
281 </a>
282 </li>
283 <li>
284 <a href="#">1</a>
285 </li>
286 <li>
287 <a href="#">2</a>
288 </li>
289 <li>
290 <a href="#">3</a>
291 </li>
292 <li>
293 <a href="#">4</a>
294 </li>
295 <li>
296 <a href="#">5</a>
297 </li>
298 <li>
299 <a href="#" aria-label="Next">
300 <span aria-hidden="true">下一页</span>
301 </a>
302 </li>
303 </ul>
304 </nav>
305 </div>
306 </div>
307 </div>
308 </div>
309 </div>
310
311 <script src="js/jquery-3.2.1.min.js"></script>
312 <script src="js/bootstrap.min.js"></script>
313 </body>
314
315 </html>
浙公网安备 33010602011771号