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

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

先来看看效果图：

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

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XXXXX系统

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;

}

data-target="#bs-example-navbar-collapse-1">

Toggle navigation

某管理系统

• 首页

• 功能

  • 业务功能
  • 信息建立
  • 信息查询
  • 信息管理
  • 系统功能
  • 设置
• 帮助

登录

• 首页

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

• 设置
• 帮助

管理控制台

操作1

操作2

操作3

操作4

操作5

操作6

最新提醒

提示您的订单(2014001)已经审批通过！

提示您的订单(2014002)被打回！

提示您的订单(2013001)客户付款延迟！

我的任务

• 42

  订单审批

• 20

  收款确认

• 10

  付款确认

最新订单

#产品数量总金额业务员

1Apple Macbook air1080000王小贱2Apple iPad air2065000尹开花3Apple Macbook pro550000刘老根

查看详细?

工程进度

水井挖掘工程

aria-valuemin="0" aria-valuemax="100" style="width: 60%">80% Complete

基建工程

aria-valuemin="0" aria-valuemax="100" style="width: 80%">30% Complete (danger)

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

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

在线bootstrap可视化布局编辑工具：

http://tools.jb51.net/aideddesign/layoutit

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