顶部导航：nav-tabs
左边导航：nav-list
响应式布局：div嵌套 ~ container、row、ol-lg-X
效果：
源码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>1</title> <link rel="stylesheet" href="dist/css/bootstrap.css" /> <link rel="stylesheet" href="dist/css/bootstrap-theme.css" /> </head> <body> <div class="container"> <!--顶部导航--> <div class="row"> <div class="nav col-lg-12 navbar-brand"> <ul class="nav nav-tabs navbar-default "> <li> <a>首页</a> </li> <li class="active"> <a>水果</a> </li> <li> <a>自我介绍</a> </li> <li> <a>fuxk</a> </li> </ul> </div> </div> <br /> <!--内容--> <div class="row"> <div class="col-lg-1"> <ul class="nav nav-list navbar-default nav-pills "> <li> <a>XXXX</a> </li> <li class="active"> <a>XXXX</a> </li> <li> <a>XXXX</a> </li> <li> <a>XXXX</a> </li> <li> <a>XXXX</a> </li> <li> <a>XXXX</a> </li> </ul> </div> <div class="col-lg-11"> <table class="table table-hover"> <thead> <tr class="alert-info active table-"> <td><b>名称</b></td> <td><b>单价</b></td> <td><b>库存</b></td> </tr> </thead> <tbody> <tr> <td>番茄</td> <td>1.1</td> <td>3</td> </tr> <tr> <td>苹果</td> <td>2.5</td> <td>10</td> </tr> <tr> <td>哈密瓜</td> <td>2.5</td> <td>10</td> </tr> <tr> <td>草莓</td> <td>2.5</td> <td>10</td> </tr> </tbody> </table> </div> </div> </div> <script type="text/javascript" src="dist/js/jquery-3.1.1.js"></script> <script type="text/javascript" src="dist/js/bootstrap.min.js"></script> </body> </html>
原文：http://www.cnblogs.com/dannyyao/p/6275674.html