标签：port 控制 book ipad utf-8 pdo navig toggle form
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>challenge</title> 8 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 9 <!--[if lt IE 9]> 10 <script src="js/html5shiv.js"></script> 11 <script src="js/respond.min.js"></script> 12 <![endif]--> 13 <style type="text/css"> 14 body{ 15 padding-top: 50px; 16 padding-bottom: 50px; 17 color: #5a5a5a; 18 } 19 /*左侧的导航栏样式*/ 20 .sidebar{ 21 position: fixed; 22 top: 51px; 23 bottom: 0; 24 left: 0; 25 z-index: 1000; 26 display: block; 27 padding: 20px; 28 overflow-x: hidden; 29 overflow-y: auto; 30 background-color: #ddd; 31 border: 1px solid #eee; 32 } 33 .nav-sidebar{ 34 margin-right: -21px; 35 margin-left: 20px; 36 margin-left: -20px; 37 } 38 .nav-sidebar > li > a { 39 padding-right: 20px; 40 padding-left: 20px; 41 } 42 .nav-sidebar > .active >a, 43 .nav-sidebar > .active >a:hover, 44 .nav-sidebar > .active >a:focus { 45 color: #fff; 46 background-color: #428bca; 47 } 48 49 /*右侧的管理控制台*/ 50 .main{ 51 padding: 20px; 52 } 53 .main .page-header{ 54 margin-top: 0; 55 } 56 </style> 57 </head> 58 <body> 59 <!-- 顶部导航栏 --> 60 <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> 61 <div class="container-fluid"> 62 <div class="navbar-header"> 63 <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1"> 64 <span class="sr-only">Toggle navigation</span> 65 <span class="icon-bar"></span> 66 <span class="icon-bar"></span> 67 <span class="icon-bar"></span> 68 </button> 69 <a href="#" class="navbar-brand">某管理系统</a> 70 </div> 71 72 <div class="collapse navbar-collapse" id="navbar-1"> 73 <ul class="nav navbar-nav"> 74 <li class="active"><a href="#">首页</a></li> 75 <li class="dropdown"> 76 <a href="#" class="dropdown-toggle" data-toggle="dropdown">功能<span class="caret"></span></a> 77 <ul class="dropdown-menu" role="menu"> 78 <li class="dropdown-header">业务功能</li> 79 <li class=""><a href="#">信息建立</a></li> 80 <li class=""><a href="#">信息查询</a></li> 81 <li class=""><a href="#">信息管理</a></li> 82 <li class="divider"></li> 83 <li class="dropdown-header">系统设置</li> 84 <li class=""><a href="#">设置</a></li> 85 </ul> 86 </li> 87 <li class=""><a href="#">帮助</a></li> 88 </ul> 89 <form class="navbar-form navbar-right" role="search"> 90 <div class="from-group"> 91 <input type="text" name="" class="form-control" placeholder="用户名"> 92 <input type="passsword" name="" class="form-control" placeholder="密码"> 93 <button class="btn btn-primary" type="submit">登录</button> 94 </div> 95 <!-- <button class="btn btn-primary" type="submit">登录</button> --> 96 </form> 97 </div> 98 </div> 99 </nav> 100 101 <!-- 自适应式布局 --> 102 <div class="container-fluid"> 103 <div class="row"> 104 <!-- 左侧的导航栏 --> 105 <div class="col-sm-3 col-md-2 sidebar"> 106 <ul class="nav nav-sidebar"> 107 <li class="active"><a href="#">首页</a></li> 108 </ul> 109 <ul class="nav nav-sidebar"> 110 <li class=""><a href="#">信息建立</a></li> 111 <li class=""><a href="#">信息查询</a></li> 112 <li class=""><a href="#">信息管理</a></li> 113 </ul> 114 <ul class="nav nav-sidebar"> 115 <li class=""><a href="#">设置</a></li> 116 <li class=""><a href="#">帮助</a></li> 117 </ul> 118 </div> 119 <!-- 右侧的管理控制台 --> 120 <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> 121 <h1 class="page-header">管理控制台</h1> 122 123 <!-- 按钮 --> 124 <p> 125 <button class="btn btn-lg btn-default" type="button">操作1</button> 126 <button class="btn btn-lg btn-primary" type="button">操作2</button> 127 <button class="btn btn-lg btn-success" type="button">操作3</button> 128 <button class="btn btn-lg btn-warning" type="button">操作4</button> 129 <button class="btn btn-lg btn-danger" type="button">操作5</button> 130 <button class="btn btn-lg btn-info" type="button">操作6</button> 131 </p> 132 133 <!-- 面板 --> 134 <div class="row"> 135 <div class="col-md-6"> 136 <!-- panel面板1，里面放置一些控件，下同 --> 137 <div class="panel panel-primary"> 138 <!-- panel面板的标题，下同 --> 139 <div class="panel-heading"> 140 <h3 class="panel-title">最新提醒</h3> 141 </div> 142 <!-- panel面板的内容，下同 --> 143 <div class="panel-body"> 144 <div class="alert alert-success" role="alert"> 145 <strong>提示</strong>您的订单（001）已经审核通过！ 146 </div> 147 <div class="alert alert-danger" role="alert"> 148 <strong>提示</strong>您的订单（002）被打回！ 149 </div> 150 <div class="alert alert-warning" role="alert"> 151 <strong>提示</strong>您的订单（001）客户付款延迟！ 152 </div> 153 </div> 154 </div> 155 </div> 156 157 <div class="col-md-6"> 158 <div class="panel panel-primary"> 159 <div class="panel-heading"> 160 <h3 class="panel-title">我的任务</h3> 161 </div> 162 <div class="panel-body"> 163 <ul class="nav nav-pills nav-stacked" role="tablist"> 164 <li role="pressntation"><a href="#" class="alert alert-info"><span class="badge pull-right">42</span>订单审批</a> 165 </li> 166 <li role="pressntation"><a href="#" class="alert alert-info"><span class="badge pull-right">20</span>收款确认</a> 167 </li> 168 <li role="pressntation"><a href="#" class="alert alert-info"><span class="badge pull-right">10</span>付款确认</a> 169 </li> 170 </ul> 171 </div> 172 </div> 173 </div> 174 </div> 175 176 <div class="row "> 177 <div class="col-md-6"> 178 <div class="panel panel-primary"> 179 <div class="panel-heading"> 180 <h3 class="panel-title">最新订单</h3> 181 </div> 182 <div class="panel-body"> 183 <table class="table table-striped"> 184 <thead> 185 <tr> 186 <th>#</th> 187 <th>产品</th> 188 <th>数量</th> 189 <th>总金额</th> 190 <th>业务员</th> 191 </tr> 192 </thead> 193 <tbody> 194 <tr> 195 <td>1</td> 196 <td>Apple Macbook air</td> 197 <td>10</td> 198 <td>80000</td> 199 <td>王小贱</td> 200 </tr> 201 <tr> 202 <td>2</td> 203 <td>Apple Ipad air</td> 204 <td>20</td> 205 <td>65000</td> 206 <td>伊开花</td> 207 </tr> 208 <tr> 209 <td>3</td> 210 <td>Apple Macbook pro</td> 211 <td>5</td> 212 <td>50000</td> 213 <td>刘老根</td> 214 </tr> 215 </tbody> 216 </table> 217 <p><a href="#" class="btn btn-primary">查看详细»</a></p> 218 </div> 219 </div> 220 </div> 221 <div class="col-md-6"> 222 <div class="panel panel-primary"> 223 <div class="panel-heading"> 224 <h3 class="panel-title">工程进度</h3> 225 </div> 226 <div class="panel-body"> 227 <h3><span class="label label-primary">水井挖掘工程</span></h3> 228 <div class="progress"> 229 <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% 完成</span></div> 230 </div> 231 <h3><span class="label label-danger">基建工程</span></h3> 232 <div class="progress progress-striped active"> 233 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="30" aria-valuemax="100" aria-valuemin="0" style="width: 30%">30%完成<span class="sr-only">30%完成</span></div> 234 </div> 235 </div> 236 </div> 237 </div> 238 </div> 239 </div> 240 </div> 241 </div> 242 243 <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> 244 <script type="text/javascript" src="js/bootstrap.min.js"></script> 245 </body> 246 </html>
自行准备相应的 css 以及 js 文件。
标签：port 控制 book ipad utf-8 pdo navig toggle form
原文地址：http://www.cnblogs.com/cc-freiheit/p/7912557.html
