首页
所有分类
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 相关文章推荐
js wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
js创建数组的简单方法
Jul 27 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
js验证密码强度解析
Mar 18 Javascript
JavaScript进阶（四）原型与原型链用法实例分析
May 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
写入策略(1) 存储过程(3) binlog(2) MIME(1) B+树(2) 增删改查(2) redo log(1) instantclient(1) 优化(1) 忘记密码(1)
You might like
php经典算法集锦
2015/11/14 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
漂亮的widgets，支持换肤和后期开发新皮肤
2007/04/23 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
微信小程序商城项目之侧栏分类效果（1）
2017/04/17 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
Node.JS段点续传：Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
详解VUE中常用的几种import（模块、文件）引入方式
2018/07/03 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
python读取csv文件示例(python操作csv)
2014/03/11 Python
深入浅析python with语句简介
2018/04/11 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
Python中字符串与编码示例代码
2019/05/20 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
新西兰第一的行李箱网站：luggage.co.nz
2019/07/22 全球购物
Claire’s法国：时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
财务会计专业求职信范文
2013/12/31 职场文书
xxx同志考察材料
2014/02/07 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
元旦寄语大全
2014/04/10 职场文书
电话客服工作职责
2014/07/27 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
python spilt()分隔字符串的实现示例
2021/05/21 Python