导航组件
<h4>1.导航组件相关代码</h4>
<ul>
<li>css文件引入：
<pre><code class="language-java"><link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"></code></pre></li>
<li>js文件引入：
<pre><code class="language-java"><script src="/js/jquery.min.js?v=2.1.4"></script>
<script type="text/javascript" src="/js/bootstrap.min.js?v=3.3.6"></script></code></pre></li>
</ul>
<p>html代码：</p>
<pre><code class="language-java"><div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
点击我进行展开，再次点击我进行折叠。第 1 部分
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
</div>
</div>
</div></code></pre>
<blockquote>
<p>panel-group可划分组，多个panel可关联控制，只会展开一个panel，相应的控制关闭其他panel</p>
</blockquote>
<h5>2、参数使用说明</h5>
<table>
<thead>
<tr>
<th>类</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>.nav nav-tabs</td>
<td>标签页</td>
</tr>
<tr>
<td>.nav nav-pills</td>
<td>胶囊式标签页</td>
</tr>
<tr>
<td>.nav nav-pills nav-stacked</td>
<td>胶囊式标签页以垂直方向堆叠排列的</td>
</tr>
<tr>
<td>.nav-justified</td>
<td>两端对齐的标签页，在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。</td>
</tr>
<tr>
<td>.disabled</td>
<td>禁用的标签页</td>
</tr>
<tr>
<td>.tab-content</td>
<td>与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改</td>
</tr>
<tr>
<td>.tab-pane</td>
<td>与 .tab-content 和 data-toggle="tab" (data-toggle="pill")一同使用, 设置标签页对应的内容</td>
</tr>
</tbody>
</table>