标签：title active tree form control order css sed init
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>
标签：title active tree form control order css sed init
原文地址：http://www.cnblogs.com/likaikimi/p/7226105.html
