bootstrap快速制作后台界面


Posted in Javascript onDecember 05, 2016

最近看了bootstrap的一个小的视频,快速的做出一个后台界面;介绍了一些典型的用法;
里面涉及了:
下拉菜单、胶囊菜单、胶囊菜单垂直显示、栅格排列、导航栏、字体图标、
图片样式、输入组、折叠菜单panel、面包屑、表格样式、分页组件样式;

下面将跟着项目做出的小例子贴出来:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" /> 
<title>bootstrap小例子</title> 
<style type="text/css"></style> 
</head> 
<body> 
<!-- 导航栏部分 --> 
<div class="navbar navbar-inverse"> 
 <div class="container-fluid"> 
  <div class="navbar-header"> 
   <div class="navbar-brand"> 
    <small class="glyphicon glyphicon-fire"></small> 
    MicroSoft 
   </div> 
  </div> 
  <ul class="nav navbar-nav nav-stacked navbar-right"> 
   <li> 
    <a href="#"> 
     <span class="glyphicon glyphicon-tasks"></span> 
     <i class="badge">2</i> 
    </a> 
   </li> 
   <li> 
    <a href="#"> 
     <span class="glyphicon glyphicon-bell"></span> 
     <i class="badge">1</i> 
    </a> 
   </li> 
   <li> 
    <a href="#"> 
     <span class="glyphicon glyphicon-envelope"></span> 
     <i class="badge">1</i> 
    </a> 
   </li> 
   <li> 
    <a href="#" data-toggle="dropdown"> 
     <img class="img-circle" src="user_photo.png" width="30" height="30"/> 
     <small>Welcome</small> 
     admin 
     <span class="caret"></span> 
    </a> 
    <ul class="nav nav-pills nav-stacked dropdown-menu"> 
     <li class="active"> 
      <a href="#"> 
       <span class="glyphicon glyphicon-cog"></span> Setting 
      </a> 
     </li> 
     <li class="divider"></li> 
     <li> 
      <a href="#"> 
       <span class="glyphicon glyphicon-user"></span> Profile 
      </a> 
     </li> 
     <li class="divider"></li> 
     <li> 
      <a href="#"> 
       <span class="glyphicon glyphicon-off"></span> Logout 
      </a> 
     </li> 
    </ul> 
   </li> 
  </ul> 
 </div> 
</div> 
 
<!-- 页面部分 --> 
<div class="row"> 
 <div class="col-sm-2"> 
  <div id="search"> 
   <div class="input-group"> 
    <input class="form-control input-sm" type="text" /> 
    <div class="input-group-btn"> 
     <a href="#" class="btn btn-success btn-sm"> 
      <span class="glyphicon glyphicon-search"></span> 
     </a> 
    </div> 
   </div>   
  </div> 
 
  <div class="panel-group" id="box"> 
   <div class="panel panel-success"> 
    <div class="panel-heading"> 
     <a href="#collapseA" data-parent="#box" data-toggle="collapse" class="panel-title">用户管理</a> 
    </div> 
    <div class="panel-collapse collapse in" id="collapseA"> 
     <div class="panel-body"> 
      <ul class="nav nav-pills nav-stacked"> 
       <li><a href="#">用户列表</a></li> 
       <li><a href="#">用户添加</a></li> 
       <li><a href="#">用户删除</a></li> 
      </ul> 
     </div> 
    </div>  
   </div> 
   <div class="panel panel-success"> 
    <div class="panel-heading"> 
     <a href="#collapseB" data-parent="#box" data-toggle="collapse" class="panel-title">产品管理</a> 
    </div> 
    <div class="panel-collapse collapse" id="collapseB"> 
     <div class="panel-body"> 
      <ul class="nav nav-pills nav-stacked"> 
       <li><a href="#">产品列表</a></li> 
       <li><a href="#">产品添加</a></li> 
       <li><a href="#">产品删除</a></li> 
      </ul> 
     </div> 
    </div>  
   </div> 
  </div> 
 </div> 
 
 <div class="col-sm-10"> 
  <div class="bread-crumb"> 
   <ul class="breadcrumb"> 
    <li><span class="glyphicon glyphicon-home"></span><a href="#">Home</a></li> 
    <li><a href="#">User</a></li> 
    <li>Add</li> 
   </ul> 
  </div> 
  <div class="panle panel-success"> 
   <div class="panel-heading"> 
    <a class="panel-title">用户管理</a> 
   </div> 
   <div class="panel-body"> 
    <table class="table table-striped table-hover"> 
     <thead> 
      <tr> 
       <th>ID</th> 
       <th>brand</th> 
       <th>name</th> 
       <th>channel</th> 
       <th>inventory</th> 
       <th>price</th> 
       <th>isSale</th> 
       <th>operation</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>1</td> 
       <td>Apple</td> 
       <td>Plus 6</td> 
       <td>4G</td> 
       <td>10</td> 
       <td>4500</td> 
       <td>yes</td> 
       <td>add</td> 
      </tr> 
      <tr> 
       <td>2</td> 
       <td>Apple</td> 
       <td>Plus 6</td> 
       <td>4G</td> 
       <td>10</td> 
       <td>4500</td> 
       <td>yes</td> 
       <td>add</td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td>Apple</td> 
       <td>Plus 6</td> 
       <td>4G</td> 
       <td>10</td> 
       <td>4500</td> 
       <td>yes</td> 
       <td>add</td> 
      </tr> 
     </tbody> 
     <tfoot> 
      <tr> 
       <td colspan="8"> 
        <ul class="pagination"> 
         <li><a href="#">«</a></li> 
         <li><a href="#">1</a></li> 
         <li><a href="#">2</a></li> 
         <li><a href="#">3</a></li> 
         <li><a href="#">4</a></li> 
         <li><a href="#">5</a></li> 
         <li><a href="#">»</a></li> 
        </ul> 
       </td> 
      </tr> 
     </tfoot> 
    </table> 
   </div> 
  </div> 
 </div> 
</div> 
<script type="text/javascript" src="jquery/jquery.min.js"></script> 
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script> 
</body> 
</html>

作为例子参考还是非常不错的。不记得的时候查下。

效果图:

bootstrap快速制作后台界面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅谈javascript的原型继承
Jul 25 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
js实现简单的计算器功能
Jan 16 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 #Javascript
浅谈js数组和splice的用法
Dec 04 #Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 #Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 #Javascript
jquery select2的使用心得(推荐)
Dec 04 #Javascript
Jquery删除css属性的简单方法
Dec 04 #Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 #Javascript
You might like
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
php adodb介绍
2009/03/19 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
python中的逆序遍历实例
2019/12/25 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
监理资料员岗位职责
2014/01/03 职场文书
《值日生》教学反思
2014/02/17 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
工会经费申请报告
2015/05/15 职场文书
2015年测量员工作总结
2015/05/23 职场文书
车间安全生产管理制度
2015/08/06 职场文书
聘任书范文大全
2015/09/21 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
关于Redis的主从复制及哨兵问题
2022/06/16 Redis