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 文件。
时间： 2024-11-05 12:30:11