Bootstrap实现的经典栅格布局效果实例【附demo源码】
发布时间 - 2026-01-11 00:26:41 点击率：次本文实例讲述了Bootstrap实现的经典栅格布局效果。分享给大家供大家参考，具体如下：
先来看看效果图：
具体代码如下（某管理系统的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>
附：完整实例代码点击此处本站下载。
PS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：
在线bootstrap可视化布局编辑工具：
http://tools./aideddesign/layoutit
希望本文所述对大家基于bootstrap的程序设计有所帮助。
# Bootstrap
# 栅格
# 布局
# 您的
# 管理系统
# 信息管理
# 首页
# 信息查询
# 给大家
# 点击此处
# 所述
# 先来
# 程序设计
# 总金额
# 自适应
# 再为
# 编辑工具
# 刘老根
# 讲述了
# top
# px
# style
# body
相关栏目：
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐：
PHP正则匹配日期和时间(时间戳转换)的实例代码
手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？
Laravel如何处理表单验证？（Requests代码示例）
如何在IIS中配置站点IP、端口及主机头？
Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载
Laravel如何实现本地化和多语言支持？（i18n教程）
Laravel如何安装使用Debugbar工具栏_Laravel性能调试与SQL监控插件【步骤】
详解Android——蓝牙技术 带你实现终端间数据传输
laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法
如何在新浪SAE免费搭建个人博客？
jquery插件bootstrapValidator表单验证详解
Laravel如何创建自定义中间件？（Middleware代码示例）
香港服务器部署网站为何提示未备案？
Bootstrap整体框架之CSS12栅格系统
Laravel怎么连接多个数据库_Laravel多数据库连接配置
怎么用AI帮你为初创公司进行市场定位分析？
魔方云NAT建站如何实现端口转发？
Laravel如何配置和使用缓存？（Redis代码示例）
悟空识字如何进行跟读录音_悟空识字开启麦克风权限与录音
Laravel如何实现用户角色和权限系统_Laravel角色权限管理机制
Laravel如何处理CORS跨域问题_Laravel项目CORS配置与解决方案
郑州企业网站制作公司,郑州招聘网站有哪些？
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Laravel如何实现多语言支持_Laravel本地化与国际化(i18n)配置教程
活动邀请函制作网站有哪些,活动邀请函文案？
Laravel的Blade指令怎么自定义_创建你自己的Laravel Blade Directives
个人网站制作流程图片大全,个人网站如何注销？
音响网站制作视频教程,隆霸音响官方网站？
jQuery中的100个技巧汇总
php在windows下怎么调试_phpwindows环境调试操作说明【操作】
公司网站制作需要多少钱,找人做公司网站需要多少钱？
如何挑选最适合建站的高性能VPS主机？
Python图片处理进阶教程_Pillow滤镜与图像增强
动图在线制作网站有哪些,滑动动图图集怎么做？
香港服务器建站指南：外贸独立站搭建与跨境电商配置流程
儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册？
如何在Windows环境下新建FTP站点并设置权限？
python中快速进行多个字符替换的方法小结
Laravel Docker环境搭建教程_Laravel Sail使用指南
Laravel如何自定义错误页面（404, 500）？（代码示例）
Android GridView 滑动条设置一直显示状态(推荐)
进行网站优化必须要坚持的四大原则
如何在阿里云部署织梦网站？
IOS倒计时设置UIButton标题title的抖动问题
如何在搬瓦工VPS快速搭建网站？
小米17系列还有一款新机？主打6.9英寸大直屏和旗舰级影像
JavaScript如何实现继承_有哪些常用方法
Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程
jQuery validate插件功能与用法详解
最新文章
Sublime怎么一键压缩JS代码 Su
sublime如何在搜索中使用正则表达式
Sublime如何设置透明窗口效果 Su
mysql如何设计商品表结构_mysql
css属性背景图不显示怎么办_通过检查路
如何使用Golang实现排序_Golan
农历闰月是怎么回事_为合回归年加一月调整
塑造《刺客信条》艾吉奥传奇的编剧离开育碧
1英里等于多少公里 1mile和km的换
css grid布局中行和列是如何定义的
PS批量旋转和翻转图片，快速校正图片方向
C# Swagger UI自定义方法 C
OPPO手机九宫格和全键盘怎么切换_OP
Go语言如何实现用户登录注册_Golan
1节飞行速度多少公里每小时 1节是多少公
纸嫁衣8千子树第五章庙门怎么开启 庙门
Laravel 多行数据编辑表单中实现逐
明日之后如何提升钓鱼等级 明日之后提升钓
支付宝怎样查年度账单_支付宝年度账单查看
C# 多线程UI更新Dispatcher