首頁 > 開發者 > JavaScript
Bootstrap實現的經典柵格布局效果執行個體【附demo源碼】，bootstrapdemo
本文執行個體講述了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.jb51.net/aideddesign/layoutit
希望本文所述對大家基於bootstrap的程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
