bootstrap 导航条

![Uploading 屏幕快照 2016-08-26 14.22.44_655322.png . . .]在bootstrap中导航条和导航有区别，导航条（navbar）有一个背景色，可以是纯链接，可也以是表单以及二者的结合。
简单的导航条举例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>

    <div class="navbar navbar-default" role="navigation">
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">天天发呆的博客</a></li>
            <li><a href="##">所有文章</a></li>
            <li><a href="##">HTML教程</a></li>
            <li><a href="##">Python教程</a></li>
        </ul>
    </div>

    <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a href="##" class="navbar-brand">慕课网</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">网站首页</a></li>
            <li class="dropdown">
                <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="##">PHP</a></li>
                    <li><a href="##">Python</a></li>
                    <li><a href="##">Java</a></li>
                </ul>
            </li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
        </ul>

    </div>

    <script src="./bootstrap-3.3.7-dist/js/jquery.js"></script>
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>

效果如图

屏幕快照 2016-08-26 14.22.44.png

固定导航条

有时我们希望将导航条固定在首部或底部，。Bootstrap框架提供了两种固定导航条的方式：

☑ .navbar-fixed-top：导航条固定在浏览器窗口顶部

☑ .navbar-fixed-bottom：导航条固定在浏览器窗口底部

响应式导航条

代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>

    <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="##" class="navbar-brand">慕课网</a>
        </div>
        <div class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="##">网站首页</a></li>
                <li><a href="##">系列教程</a></li>
                <li><a href="##">名师介绍</a></li>
                <li><a href="##">成功案例</a></li>
                <li><a href="##">关于我们</a></li>
            </ul>
        </div>
    </div>

    <script src="./bootstrap-3.3.7-dist/js/jquery.js"></script>
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>

效果

屏幕快照 2016-08-26 15.01.44.png

全部栏目

bootstrap 导航条

固定导航条

响应式导航条