bootstrap学习笔记（六）导航

导航（基础样式）

<ul class="nav nav-tabs">
<li><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>

<ul class="nav nav-tabs">
<li class = "active"><a href="##">商品介绍</a></li>----------假设我们想让“Home”项为当前选中项，只需要在其标签上添加类名“class="active"”
<li><a href="##">规格参数</a></li>
<li><a href="##">商品评价</a></li>
<li  class="disabled"><a href="##">售后保证</a></li>--------有的选项卡还带有禁用状态，实现这样的效果，只需要在标签项上添加“class="disabled"”即可
</ul>

导航（胶囊形(pills)导航）当前项高亮显示，并带有圆角效果。

<ul class="nav nav-pills">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li class="disabled"><a href="##">Responsive</a></li>
</ul>

导航（垂直堆叠的导航）

<ul class="nav nav-pills nav-stacked">
     <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li class="disabled"><a href="##">Responsive</a></li>
</ul>

自适应导航（使用）

<ul class="nav nav-tabs nav-justified">
     <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li><a href="##">Responsive</a></li>
</ul>

导航加下拉菜单（二级导航）