Bootstap-- 默认的导航栏

 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，还是花了一段时间，还是自己前端不熟悉造成的，以后还是要加强的。

相关阅读:
利用delegate调试Ajax应用(转)
Js悟透阅读节选（转）
我的第一个PHP连接MSSQL2000示例。
C# 时间相减得到天数
 修改桌面路径。其它路径。
Player 网页歌曲播放器（CMP）
麦咖啡导出安全策略.reg文件。
js实现几秒页面跳转的几种方式
 19，随机数，不重复。
marquee 无缝循环
原文地址：https://www.cnblogs.com/wonder223/p/5693285.html