首页
所有分类
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 对象模型 执行模型
Dec 06 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
node.js 动态执行脚本
Jun 02 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
基于javascript实现移动端轮播图效果
Dec 21 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
全表扫描(1) sql模式(1) 匹配(1) geoserver(1) 索引树扫描(1) 绝对定位(1) 相对定位(1) 逻辑备份(1) lua(3) into outfile(1)
You might like
模拟xcopy的函数
2006/10/09 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
php给数组赋值的实例方法
2019/09/26 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
Python 字符串操作方法大全
2014/03/11 Python
全面解读Python Web开发框架Django
2014/06/30 Python
python常见数制转换实例分析
2015/05/09 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
解决python对齐错误的方法
2020/07/16 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
蔻驰美国官网：COACH美国
2016/08/18 全球购物
美国五金商店：Ace Hardware
2018/03/27 全球购物
网站开发实习生的自我评价
2013/12/11 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
担保书范本
2015/01/20 职场文书
2015选调生工作总结
2015/07/24 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
Springboot-cli 开发脚手架，权限认证，附demo演示
2022/04/28 Java/Android