1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Bootstrap 实例 - 默认的导航栏</title> 5 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 6 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 7 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 8 9 </head> 10 <body> 11 <div> 12 <div class="col-xs-2"> 13 <div class="panel-group" id="accordion2"> 14 <div class="panel-heading"> 15 <strong style="font-size: 30px;">论坛分类</strong> 16 </div> 17 <div class="panel panel-default"> 18 <div class="panel-heading" data-toggle="collapse" 19 data-parent="#accordion2" href="#collapseOne"> 20 <a class="accordion-toggle">Java</a> 21 </div> 22 <div id="collapseOne" class="panel-collapse collapse" 23 style="height: 0px;"> 24 <div class="panel-body"> 25 <ul class="nav nav-pills nav-stacked"> 26 <li><a href="#">Java基础</a></li> 27 <li><a href="#">Java面向对象</a></li> 28 <li><a href="#">Java核心API</a></li> 29 <li><a href="#">JavaEE</a></li> 30 </ul> 31 </div> 32 </div> 33 </div> 34 <div class="panel panel-default"> 35 <div class="panel-heading" data-toggle="collapse" 36 data-parent="#accordion2" href="#collapseTwo"> 37 <a class="accordion-toggle">数据库</a> 38 </div> 39 <div id="collapseTwo" class="panel-collapse collapse" 40 style="height: 0px;"> 41 <div class="panel-body"> 42 <ul class="nav nav-pills nav-stacked"> 43 <li><a href="#">SQL基础</a></li> 44 <li><a href="#">Oracle</a></li> 45 <li><a href="#">MySQL</a></li> 46 </ul> 47 </div> 48 </div> 49 </div> 50 <div class="panel panel-default"> 51 <div class="panel-heading" data-toggle="collapse" 52 data-parent="#accordion2" href="#collapseThree"> 53 <a class="accordion-toggle">技术前沿</a> 54 </div> 55 <div id="collapseThree" class="panel-collapse in" 56 style="height: 0px;"> 57 <div class="panel-body"> 58 <ul class="nav nav-pills nav-stacked"> 59 <li><a href="#">NoSQL</a></li> 60 <li><a href="#">Hadoop</a></li> 61 <li><a href="#">WebService</a></li> 62 </ul> 63 </div> 64 </div> 65 </div> 66 </div> 67 </div> 68 <div class="col-xs-10"> 69 <table class="table"> 70 <caption>基本的表格布局</caption> 71 <thead> 72 <tr> 73 <th>名称</th> 74 <th>城市</th> 75 </tr> 76 </thead> 77 <tbody> 78 <tr> 79 <td>Tanmay</td> 80 <td>Bangalore</td> 81 </tr> 82 <tr> 83 <td>Sachin</td> 84 <td>Mumbai</td> 85 </tr> 86 </tbody> 87 </table> 88 </div> 89 </div> 90 </body> 91 </html>
最简单的导航栏，为了尝试在旁边加另外一个div，还是花了一段时间，还是自己前端不熟悉造成的，以后还是要加强的。