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>

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

<ul class="nav nav-pills">
<li class="active"><a href="##">首页</a></li>
<li class="dropdown">
<a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li class=”nav-divider”></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
</li>
<li><a href="##">关于我们</a></li>

面包屑式导航

使用方式就很简单，为ol加入breadcrumb类：

 

转载于:https://www.cnblogs.com/EmilyGarden/p/8507311.html