首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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快速制作后台界面

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

bootstrap快速制作后台界面

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于jQuery的消息提示插件 DivAlert之旅（二）
Apr 01 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
代码整洁之道(重构)
Oct 25 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
使用eslint和githooks统一前端风格的技巧
Jul 29 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 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
广播(8) 无线电(12) KDKA(1) 短波(8) 立体声(1) Harman Kardon(1) 保养(1) 收音机(62) 电台频率(32) 长波(3)
You might like
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
php实现socket推送技术的示例
2017/12/20 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
python使用htmllib分析网页内容的方法
2015/05/08 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
Expedia挪威官网：酒店、机票和租车
2018/03/03 全球购物
Hotels.com越南：酒店预订
2019/10/29 全球购物
工程师岗位职责
2013/11/08 职场文书
家长对小学生的评语
2014/01/28 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
职业生涯规划书怎么写？
2014/09/14 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
实习证明模板
2015/06/16 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书