bootstrap-13

　　bootstrap框架中制作导航条主要通过“.nav”样式。默认的.nav样式不提供默认的导航方式，必须附加另外一个样式才会有效，比如.nav-tabs,.nav-pill之类。

导航（标签型导航）：

　　也称为选项卡导航，特别是在很多内容分块显示时，使用这种选项卡类分组十分合适。

　　标签形导航是通过nav-tabs样式来实现。在制作标签型导航时候需要在原导航nav上追加此类名

<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>

　　实现原理：将菜单项li按块显示，并且他们在同一个水平排列，然后定义非高亮菜单的样式和鼠标悬浮效果。

　　一般情况下，选项卡教会有一个当前选中项。其实Bootstrap框架也相应提供了。假设我们想让Home项为当前选中项，只需要在其标签上添加类名class="active".

　　除了当前项之外，有的选项卡还带有禁用状态，实现这样的效果，只需要在标签上添加class="disabled"即可。

　　注意：我们看到的选项卡效果，点击菜单项就可以切换内容，如果要实现这样的效果需要配个js插件，这部分将在后面的内容中介绍。

导航（胶囊形（pills）导航）

　　胶囊形（pills）导航听起来有点别扭，因为其外形看起来有点像胶囊形状。当前项高亮显示，并带有圆角效果。其实现方法和"nav-tabs"类似，同样的结构，只需要把类名（"nav-tabs"）换成"nav-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>

导航(垂直堆叠的导航)

　　制作垂直导航只需要在"nav-pills"的基础上添加一个"nav-stacked"类名即可。　

<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>

　　垂直堆叠导航和胶囊形导航相比，主要让导航项不浮动，让其垂直排列，然后给相邻导航项留有一定的间距.

　　在垂直堆叠导航也具有这样的效果，只需要添加在导航项之间添加<li class="nav-divider"></li>即可。

自适应导航(使用)

　　自适应导航值得是导航占据容器全部宽度，而且菜单可以像表格的单元格一样自适应宽度。自适应导航和前面使用的"btn-group-justified"制作的自适应按钮是一样的。只不过在制作自适应导航时更换了另一个类名叫"nav-justified",当然他需要和"nav-tabs"或者"nav-pills"配合在一起使用。

<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>）上设置了宽度为"100%",然后每个菜单项<li>设置了"display:table-cell",让列表以模拟表格单元格的形式显示。

　　这里有一个媒体查询条件："@media(min-width:768px){...}"表示自适应导航仅在浏览器视窗宽度大于768px才能按上图风格显示。当你的浏览器视窗宽度小于768px的时候，将会按下图的风格展示。

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

　　在Boostrap框架中制作二级导航，只需要将li当做父容器，使用类名"dropdown",同时在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>

            …

       </ul>

     </li>

     <li><a href="##">关于我们</a></li>

</ul>

　　只需要添加<li class="nav-divider"></li>这样一个标签就可以了。

面包屑导航：

　　面包屑一般用于导航，主要是起的作用是告诉用户现在所处页面的位置，在BootStrap框架中面包屑也是一个独立的模块组件：

　　使用方式，为ol加入breadcrumb类。

<ol class="breadcrumb">

  <li><a href="#">首页</a></li>

  <li><a href="#">我的书</a></li>

  <li class="active">《图解CSS3》</li>

</ol>

巴特西

bootstrap-13

最新文章

热门文章