2016年5月31日上午（传智Bootstrap笔记（Bootstrap 导航元素））

Bootstrap 导航元素

　　本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class，可以在不同的样式间进行切换。

　　 .nav是标签页的基类；

　　 .nav-tabs是标签页类样式；

　　 .active是标签页的状态类（当前样式）；

　　<p>标签式的导航菜单</p>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>

　　　　　　　　　　　　

　　2、基本的胶囊式导航菜单

　　　　如果需要把标签改成胶囊的样式，只需要使用 class .nav-pills 代替 .nav-tabs 即可，其他的步骤与上面相同。下面的实例演示了这点：

　　 <p>标签式的导航菜单</p>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>

　　　　　　　　　　

　　3、垂直的胶囊式导航菜单

　　　　您可以在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠。下面的实例演示了这点：

　　<p class="page-header">垂直的胶囊式导航菜单</p>
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">Home</a> </li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>

　　　　　　　　　　

　　4、禁用链接

　　　　对每个 .nav class，如果添加了 .disabled class，则会创建一个灰色的链接，同时禁用了该链接的 :hover 状态，如下面的实例所示：

  <p>导航元素中的禁用链接</p>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li class="disabled"><a href="#">iOS（禁用链接）</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul><br><br>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li  class="disabled"><a href="#">VB.Net（禁用链接）</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>

                                                     

<p>带有下拉菜单的标签</p>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">JAVA
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">Swing</a></li>
                <li><a href="#">jMeter</a></li>
                <li><a href="#">EJB</a></li>
                <li class="divider"></li>
                <li><a href="#">分离的链接</a></li>
            </ul>
        </li>
        <li><a href="#">PHP</a></li>
    </ul>