本文實(shí)例講述了Bootstrap實(shí)現(xiàn)的經(jīng)典柵格布局效果。分享給大家供大家參考，具體如下：
先來看看效果圖：
具體代碼如下（某管理系統(tǒng)的Bootstrap實(shí)現(xiàn)）：
<!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系統(tǒng)</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; }/* 下面是左側(cè)導(dǎo)航欄的代碼 */.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><!--下面是頂部導(dǎo)航欄的代碼--><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" >某管理系統(tǒng)</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">業(yè)務(wù)功能</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">系統(tǒng)功能</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" >設(shè)置</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><!―自適應(yīng)布局--><div class="container-fluid"><div class="row"><!―左側(cè)導(dǎo)航欄--><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" >設(shè)置</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><!―右側(cè)管理控制臺--><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面板的標(biāo)題，下同--><div class="panel-heading"><h3 class="panel-title">最新提醒</h3></div><!―panel面板的內(nèi)容，下同--><div class="panel-body"><div class="alert alert-success" role="alert"><strong>提示</strong>您的訂單（2014001）已經(jīng)審批通過！</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">我的任務(wù)</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>收款確認(rèn)</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>付款確認(rèn)</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>產(chǎn)品</th><th>數(shù)量</th><th>總金額</th><th>業(yè)務(wù)員</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">查看詳細(xì)?</a></p></div></div></div><div class="col-md-6"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">工程進(jìn)度</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>附：完整實(shí)例代碼點(diǎn)擊此處本站下載。
PS：關(guān)于bootstrap布局，這里再為大家推薦一款本站的在線可視化布局工具供大家參考使用：
在線bootstrap可視化布局編輯工具：
http://tools.VeVB.COm/aideddesign/layoutit
希望本文所述對大家基于bootstrap的程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
