Bootstrap实现的经典栅格布局效果实例【附demo源码】


Posted in Javascript onMarch 30, 2017

本文实例讲述了Bootstrap实现的经典栅格布局效果。分享给大家供大家参考,具体如下:

先来看看效果图:

Bootstrap实现的经典栅格布局效果实例【附demo源码】

具体代码如下(某管理系统的Bootstrap实现):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>XXXXX系统</title>
<link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style>
    body {
      padding-top: 50px;
      padding-bottom: 40px;
      color: #5a5a5a;
    }
/* 下面是左侧导航栏的代码 */
.sidebar {
      position: fixed;
      top: 51px;
      bottom: 0;
      left: 0;
      z-index: 1000;
      display: block;
      padding: 20px;
      overflow-x: hidden;
      overflow-y: auto;
      background-color: #ddd;
      border-right: 1px solid #eee;
    }
    .nav-sidebar {
      margin-right: -21px;
      margin-bottom: 20px;
      margin-left: -20px;
    }
    .nav-sidebar > li > a {
      padding-right: 20px;
      padding-left: 20px;
    }
    .nav-sidebar > .active > a,
    .nav-sidebar > .active > a:hover,
    .nav-sidebar > .active > a:focus {
      color: #fff;
      background-color: #428bca;
    }
    .main {
      padding: 20px;
    }
    .main .page-header {
      margin-top: 0;
    }
</style>
</head>
<body>
<!--下面是顶部导航栏的代码-->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >某管理系统</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li>
<li class="dropdown">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">功能<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">业务功能</li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >信息建立</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >信息查询</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >信息管理</a></li>
<li class="divider"></li>
<li class="dropdown-header">系统功能</li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >设置</a></li>
</ul>
</li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >帮助</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="用户名...">
<input type="text" class="form-control" placeholder="密码...">
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
</div>
</div>
</nav>
<!—自适应布局-->
<div class="container-fluid">
<div class="row">
<!—左侧导航栏-->
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >信息建立</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >信息查询</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >信息管理</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >设置</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >帮助</a></li>
</ul>
</div>
<!—右侧管理控制台-->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">管理控制台</h1>
<p>
<!—一组按钮控件-->
<button type="button" class="btn btn-lg btn-default">操作1</button>
<button type="button" class="btn btn-lg btn-primary">操作2</button>
<button type="button" class="btn btn-lg btn-success">操作3</button>
<button type="button" class="btn btn-lg btn-info">操作4</button>
<button type="button" class="btn btn-lg btn-warning">操作5</button>
<button type="button" class="btn btn-lg btn-danger">操作6</button>
</p>
<div class="row">
<div class="col-md-6">
<!—panel面板,里面放置一些控件,下同-->
<div class="panel panel-primary">
<!—panel面板的标题,下同-->
<div class="panel-heading">
<h3 class="panel-title">最新提醒</h3>
</div>
<!—panel面板的内容,下同-->
<div class="panel-body">
<div class="alert alert-success" role="alert">
<strong>提示</strong>您的订单(2014001)已经审批通过!
</div>
<div class="alert alert-danger" role="alert">
<strong>提示</strong>您的订单(2014002)被打回!
</div>
<div class="alert alert-warning" role="alert">
<strong>提示</strong>您的订单(2013001)客户付款延迟!
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">我的任务</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked" role="tablist">
<li role="presentation">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert alert-info">
<span class="badge pull-right">42</span>
订单审批
</a>
</li>
<li role="presentation">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert alert-info">
<span class="badge pull-right">20</span>
收款确认
</a>
</li>
<li role="presentation">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert alert-info">
<span class="badge pull-right">10</span>
付款确认
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">最新订单</h3>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>产品</th>
<th>数量</th>
<th>总金额</th>
<th>业务员</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Apple Macbook air</td>
<td>10</td>
<td>80000</td>
<td>王小贱</td>
</tr>
<tr>
<td>2</td>
<td>Apple iPad air</td>
<td>20</td>
<td>65000</td>
<td>尹开花</td>
</tr>
<tr>
<td>3</td>
<td>Apple Macbook pro</td>
<td>5</td>
<td>50000</td>
<td>刘老根</td>
</tr>
</tbody>
</table>
<p><a class="btn btn-primary" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">查看详细?</a></p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">工程进度</h3>
</div>
<div class="panel-body">
<h3><span class="label label-primary">水井挖掘工程</span></h3>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">80% Complete</span>
</div>
</div>
<h3><span class="label label-danger">基建工程</span></h3>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">30% Complete (danger)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Javascript 相关文章推荐
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
详解微信小程序 template添加绑定事件
Jun 23 Javascript
vue-test-utils初使用详解
May 23 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
使用JS实现简易计算器
Jun 14 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 #Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 #Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 #Javascript
基于jquery实现二级联动效果
Mar 30 #jQuery
javascript中的面向对象
Mar 30 #Javascript
详解JavaScript对象的深浅复制
Mar 30 #Javascript
js实现不提示直接关闭网页窗口
Mar 30 #Javascript
You might like
如何获得PHP相关资料
2006/10/09 PHP
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
python使用PyGame模块播放声音的方法
2015/05/20 Python
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
工伤事故赔偿协议书
2014/04/15 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
经理岗位职责范本
2015/04/15 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers