首页
所有分类
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 相关文章推荐
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
从零学习node.js之搭建http服务器（二）
Feb 21 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
es6数组的flat()，flatMap()函数用法实例分析
Apr 18 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
浅谈使用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
Slice(1) pycharm(6) DFA(1) pygame(3) linux(15) Qlabel(1) MapReduce(1) random(1) pyqt5(3) 切片(1)
You might like
星际中的相关伤害
2020/03/04 星际争霸
一段php加密解密的代码
2006/10/09 PHP
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
Javascript 拖拽雏形(逐行分析代码，让你轻松了拖拽的原理)
2015/01/23 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
python Django框架实现自定义表单提交
2016/03/25 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
Python 使用type来定义类的实现
2019/11/19 Python
Python assert关键字原理及实例解析
2019/12/13 Python
django配置app中的静态文件步骤
2020/03/27 Python
python实现AdaBoost算法的示例
2020/10/03 Python
python获取linux系统信息的三种方法
2020/10/14 Python
运动会入场式解说词
2014/02/18 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
2014国庆节标语口号
2014/09/19 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
OpenCV实现普通阈值
2021/11/17 Java/Android
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android