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>
View Code
最简单的导航栏，为了尝试在旁边加另外一个div，还是花了一段时间，还是自己前端不熟悉造成的，以后还是要加强的。
转载于:https://www.cnblogs.com/wonder223/p/5693285.html
