先来看看效果图：
具体代码如下（某管理系统的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 content="width=device-width, initial-scale=1"> <title>XXXXX系统</title> <link href="https://www.jb51.net/css/bootstrap.min.css"> <!--[if lt IE 9]> <script src="https://www.jb51.net/js/html5shiv.js"></script> <script src="https://www.jb51.net/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 role="navigation"> <div> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="#" >某管理系统</a> </div> <div> <ul> <li><a href="#" >首页</a></li> <li> <a href="#" data-toggle="dropdown">功能<span></span></a> <ul role="menu"> <li>业务功能</li> <li><a href="#" >信息建立</a></li> <li><a href="#" >信息查询</a></li> <li><a href="#" >信息管理</a></li> <li></li> <li>系统功能</li> <li><a href="#" >设置</a></li> </ul> </li> <li><a href="#" >帮助</a></li> </ul> <form role="search"> <div> <input type="text" placeholder="用户名..."> <input type="text" placeholder="密码..."> </div> <button type="submit">登录</button> </form> </div> </div> </nav> <!—自适应布局--> <div> <div> <!—左侧导航栏--> <div> <ul> <li><a href="#" >首页</a></li> </ul> <ul> <li><a href="#" >信息建立</a></li> <li><a href="#" >信息查询</a></li> <li><a href="#" >信息管理</a></li> </ul> <ul> <li><a href="#" >设置</a></li> <li><a href="#" >帮助</a></li> </ul> </div> <!—右侧管理控制台--> <div> <h1>管理控制台</h1> <p> <!—一组按钮控件--> <button type="button">操作1</button> <button type="button">操作2</button> <button type="button">操作3</button> <button type="button">操作4</button> <button type="button">操作5</button> <button type="button">操作6</button> </p> <div> <div> <!—panel面板，里面放置一些控件，下同--> <div> <!—panel面板的标题，下同--> <div> <h3>最新提醒</h3> </div> <!—panel面板的内容，下同--> <div> <div role="alert"> <strong>提示</strong>您的订单（2014001）已经审批通过！ </div> <div role="alert"> <strong>提示</strong>您的订单（2014002）被打回！ </div> <div role="alert"> <strong>提示</strong>您的订单（2013001）客户付款延迟！ </div> </div> </div> </div> <div> <div> <div> <h3>我的任务</h3> </div> <div> <ul role="tablist"> <li role="presentation"> <a href="#"> <span>42</span> 订单审批 </a> </li> <li role="presentation"> <a href="#"> <span>20</span> 收款确认 </a> </li> <li role="presentation"> <a href="#"> <span>10</span> 付款确认 </a> </li> </ul> </div> </div> </div> </div> <div> <div> <div> <div> <h3>最新订单</h3> </div> <div> <table> <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 href="#" role="button">查看详细?</a></p> </div> </div> </div> <div> <div> <div> <h3>工程进度</h3> </div> <div> <h3><span>水井挖掘工程</span></h3> <div> <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"><span>80% Complete</span> </div> </div> <h3><span>基建工程</span></h3> <div> <div role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"><span>30% Complete (danger)</span> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script src="https://www.jb51.net/js/jquery-1.11.1.min.js"></script> <script src="https://www.jb51.net/js/bootstrap.min.js"></script> </body> </html>