bootstrap 初学静态后台模板

  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>&nbsp;注销</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>
时间： 2024-10-19 10:01:19

bootstrap 初学静态后台模板的相关文章

基于Bootstrap的网站后台模板Unicorn - Admin Template最新无错版下载

Unicorn - Admin Template Unicorn - Admin Template 是一款支持视网膜屏幕.完全响应式布局,可用于任何应用程序的管理模板.该面板适应任何宽度的设备.无论是智能手机.平板电脑或桌面浏览器都能完美适应.最新版本基于 Bootstrap 3 构建. 使用LESS编译 响应式设计,支持任何的PC或MAC系统,智能手机和平板电脑.Responsive Design, support any PC or MAC systems, phones and table

基于HTML5 Bootstrap搭建的后台模板，分页，模糊查询已经全部JS实现，无需编码，嵌入数据即可开发，内置8款皮肤，欧美风格，非常好用！

原文:基于HTML5 Bootstrap搭建的后台模板,分页,模糊查询已经全部JS实现,无需编码,嵌入数据即可开发,内置8款皮肤,欧美风格,非常好用! 源代码下载地址:http://www.zuidaima.com/share/1550463575788544.htm 分页,查询功能已经全部用JS实现,无需再做此类代码编写,嵌入数据即可,真心美观好用.       

基于bootstrap物资管理系统后台模板——后台

链接:http://pan.baidu.com/s/1geKwVMN 密码:0utl

简洁AngularJS框架后台管理系统bootstrap后台模板

最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS 高级管理系统模板.它建造在流行的Twitter Bootstrapv3框架上.Minovate完全基于HTML5 + CSS3标准.是充分响应的支持每一个设备和浏览器. Minovate包含许多示例页面可以使用它的元素和可定制的.你可以选择6种颜色的头部样式.导航.你可以切换固定导航,标题和选择等

免费的Bootstrap管理后台模板集合

Free Bootstrap Admin Templates for Designers 1. Admin Lite AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕分辨率适合从小型移动设备到大型台式机. 2. Dashboard Sidebar 这是一个管理后台模板,拥有控制面板或仪表板.这个模板有一个可折叠的工具栏菜单,并且有可以作为一个数据网格的表格. 3. DevOOPS DevOOPS是一个自适应免费管理仪表板主题,

12个免费的 Twitter Bootstrap 后台模板

在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找到能够完美符合您的网站需求的主题.当然,你可以自己制作自定义的主题,但时间和资源都是很高贵的,所以在这里我们集合了互联网上一些最好的主题. 您可能感兴趣的相关文章 流行 Metro UI 风格 Bootstrap 主题和模板 12款优秀的 Twitter Bootstrap 组件和工具 赞!基于 Bootstrap 的响应式后台管理模板 基于 Twitter Bo

Bootstrap精品模板推荐(企业模板 后台模板都有)

Bootstarp是目前最流行的前端框架没有之一,目前很多的网站系统都是基于它的基础搭建的.最主要的是它使用起来很方便,下面给大家推荐几款很不错的模板 后台模板 漂亮的单页模板

轻量级权限管理系统——后台模板

引言 最近在学习bootstrap因此在网上找了一个bootstrap管理后台模板,不过bootstrap的版本是2.0的版本,先学习学习吧 :) 项目框架 PS:本来打算领域驱动模型的,但是我也是处于学习阶段,而且还是还没有入门,所以先打算弄一个简单三层的,然后再重构到领域模型..积累还不够,努力学习ing 1.URMS.Model.EF我用的是EntityFramework 的基于数据库的CodeFirst模式生成的 2.URMS.UI.Web.Admin是用的MVC5 基于数据库的Code

Matrix Admin 后台模板笔记

一个后台模板用久了就想换一个.上次找到了Matrix Admin.和ACE一样都是Bootstrap风格,比较容易上手.Matrix要更健壮些.感觉拿去做用户界面也是可以的. 整体风格: 1.表单验证 验证是借助于jquery.validate.js . 有丰富的验证方法,更多API请戳这里 js: $("#basic_validate").validate({ rules:{ required:{ required:true }, email:{ required:true, ema