Bootstrap学习日记之导航栏元素

在一个优秀的网站中，导航栏是必不可少的，接下来我们就来学习导航栏元素，这些元素有个特点就是使用相同的标记和基类.nav。Bootstrap中也提供了一个用于共享标记和状态的帮助器类，该表装饰的class，在不同的样式之间切换。

表格导航或者标签

需要一个class="nav"的无序列表
添加一个class="nav-tabs"

 <ul class="nav nav-tabs">
            <li class="active"><a href="#">Java</a></li>
            <li>
                <a href="#">Html</a>
            </li>
            <li>
                <a href="#">
                    Php
                </a>
            </li>
            <li>
                <a href="#">JavaScript</a>
            </li>
        </ul>

代码解读：如上nav是基类，类似字体图标中必须的类glyphicon，我们添加了class="nav-tabs"样式

运行结果

胶囊式的导航栏

如果需要胶囊式的导航栏的话，只需要将上述样式的class="nav-tabs"换成class="nav-pills"

<ul class="nav nav-pills">
            <li class="active"><a href="#">Java</a></li>
            <li>
                <a href="#">Html</a>
            </li>
            <li>
                <a href="#">
                    Php
                </a>
            </li>
            <li>
                <a href="#">JavaScript</a>
            </li>
        </ul>

运行结果

垂直的导航栏

使用垂直的导航栏也非常简单，只需要在<ul>中加上class="nav-stacked"，导航栏的风格是可以堆叠的，比如我们可以设计垂直的胶囊导航栏，那么<ul>就变成<ul class="nav nav-pills nav-stacked">。

  <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#">Java</a></li>
            <li>
                <a href="#">Html</a>
            </li>
            <li>
                <a href="#">
                    Php
                </a>
            </li>
            <li>
                <a href="#">JavaScript</a>
            </li>
        </ul>

运行结果

两端对齐自适应的导航栏

我们知道Bootstrap是移动设备优先的响应流式布局，同样的在这个导航栏上同样是有着响应式的优点。

我们只需要在有<ul class="nav nav-tabs">或者<ul class="nav nav-pills">的标签导航栏或者胶囊导航栏上添加class="nav-justified"即可

 <ul class="nav nav-tabs nav-justified">
            <li class="active"><a href="#">Java</a></li>
            <li>
                <a href="#">Html</a>
            </li>
            <li>
                <a href="#">
                    Php
                </a>
            </li>
            <li>
                <a href="#">JavaScript</a>
            </li>
        </ul>

代码解读：在<768px的屏幕下，它会发生重叠，在>768px的屏幕下，它会充满整个父元素

当缩小窗口的时候它显然发生了堆叠

禁用链接

在基类为nav的<ul>中的<li>，添加class="disabled"可以禁用<li>的链接，该链接会变成灰色，而且改变鼠标的悬浮状态。

<ul class="nav nav-tabs nav-justified">
            <li class="active"><a href="#">Java</a></li>
            <li>
                <a href="#">Html</a>
            </li>
            <li class="disabled">
                <a href="#">
                    Php
                </a>
            </li>
            <li>
                <a href="#">JavaScript</a>
            </li>
        </ul>

代码解读：我们在第三个<li>中添加了class="disabled"禁用了该链接

运行结果

下拉菜单与导航栏

要想添加下拉菜单在导航栏中，你需要做的是

由于导航栏是通过<ul>中的<li>来展示各个链接的，那么你应该在你所想要展开的<li>上编写下拉菜单
<li class="dropdown"></li>中编写下拉菜单

<ul class="nav nav-tabs">
            <li class="active"><a href="#">Java</a></li>
            <li>
                <a href="#">Html</a>
            </li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    Php<span class="caret"></span>
                    <ul class="dropdown-menu">
                        <li>
                           <a href="#">PHP简介</a>
                        </li>
                        <li>
                            <a href="#">PHP教程</a>
                        </li>
                        <li>
                            <a href="#">PHP应用</a>
                        </li>
                        <li>
                            <a href="#">PHP优秀源代码</a>
                        </li>
                    </ul>
                </a>
            </li>
            <li>
                <a href="#">JavaScript</a>
            </li>
        </ul>

代码解读：我们在PHP的<li>中编写了下拉菜单，具体格式如下

<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
   PHP<span class="caret"></span>
    <ul class="dropdown-menu">
    <li>....</li>
    <li>....</li>
      <ul>
</li>

当用户点击导航栏上的PHP图标时，就会显示出下拉菜单。

运行结果

当然了，胶囊式的标签页也是一样的

注：本篇文章为博主在菜鸟教程学习的日记，菜鸟教程：http://www.runoob.com/