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

先来看看效果图：

具体代码如下（某管理系统的Bootstrap实现）：

    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;
    }











首页


信息建立
信息查询
信息管理


设置
帮助




管理控制台


操作1
操作2
操作3
操作4
操作5
操作6







最新提醒




提示您的订单（2014001）已经审批通过！


提示您的订单（2014002）被打回！


提示您的订单（2013001）客户付款延迟！







我的任务





42
订单审批




20
收款确认




10
付款确认











最新订单





#
产品
数量
总金额
业务员




1
Apple Macbook air
10
80000
王小贱


2
Apple iPad air
20
65000
尹开花


3
Apple Macbook pro
5
50000
刘老根



查看详细?






工程进度


水井挖掘工程

80% Complete


基建工程

30% Complete (danger)

附：完整实例代码点击此处本站下载。

PS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：

在线bootstrap可视化布局编辑工具：
http://tools.jb51.net/aideddesign/layoutit

希望本文所述对大家基于bootstrap的程序设计有所帮助。