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

相关阅读:
Mybatis 是否支持延迟加载？如果支持，它的实现原理是什么？
MyBatis 实现一对多有几种方式,怎么操作的？
利用 ps 怎么显示所有的进程? 怎么利用 ps 查看指定进程的信息？
哪个命令专门用来查看后台任务?
什么是 MyBatis 的接口绑定？有哪些实现方式？
什么是端到端微服务测试？
我们如何在测试中消除非决定论？
什么是持续监测？
怎么使一个命令在后台运行?
博客园样式美化(兼容为知笔记)
原文地址：https://www.cnblogs.com/wonder223/p/5693285.html