bootstrap css之响应式导航栏-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_3352/article/details/82672477

-
[color=green][size=medium][b]使用 Twitter Bootstrap 3 创建响应式导航栏[/b][/size][/color]
-

这里的“响应式”是指导航栏的宽度及菜单样式会根据设备的宽度自动调节。
即：
在宽屏状态下导航栏会扩展到最大宽度。
而在窄屏的时候，导航栏会将导航条目收纳到一个菜单按钮中。

先看一下最终效果：

[img]http://dl2.iteye.com/upload/attachment/0119/6730/e6a0552e-e6ab-3f36-966a-ed2958989a60.png[/img]

[color=olive][b]一：设置页面为“响应式”[/b][/color]

在 html 的 head 标签中加入以下代码:


<meta name="viewport" content="width=device-width, initial-scale=1.0">

[color=olive][b]二：创建导航栏的 html 标签[/b][/color]

注：html5可以使用 nav 标签


<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!--header section -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" 
                    data-toggle="collapse" 
                    data-target=".navbar-ex1-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 class="navbar-brand" href="#">Brand Name</a>
        </div>
        <!-- menu section -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="# ">Home</a></li>
                <li><a href="# ">About</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Support</a></li>
            </ul>
        </div>
    </div>
</nav>

效果预览：
[img]http://dl2.iteye.com/upload/attachment/0119/6732/4c639345-4956-3814-bfad-2a6c8b095ba4.png[/img]

我们对 nav 标签使用了 navbar-default 样式。
导航栏由二部分组成：
1. 导航头：包括企业的标志、名称
2. 导航菜单：包括一个个的导航链接

在导航菜单中，
用 navbar-collapse 样式使导航链接可以在小屏幕状态下收纳到一个菜单按钮中。
用 navbar-right 样式使这些条目居右显示。

注意：
需要包含 role="navigation" 使导航栏可用。

[color=olive][b]三：修改样式[/b][/color]

默认的样式虽然可以用。但是，我们也可以修改它。

custom.css


.navbar {
 background-image: linear-gradient(#54B4EB, #2FA4E7 60%, #1D9CE5);
 background-repeat: no-repeat;
 border-bottom: 1px solid #178ACC;
 box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
 border-radius: 0px;
}

.navbar-default {
     background-color: #2FA4E7;
     border-color: #1995DC;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus ,
.navbar-default .navbar-nav > li > a {
     color: #FFF;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
     color: #FFF;
     background-color: #178ACC;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #178ACC;
}

.navbar-default .navbar-toggle {
    border-color: #178ACC;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #FFF;
}

效果预览：
[img]http://dl2.iteye.com/upload/attachment/0119/6734/31a3d9b5-9fba-3075-aedd-25418f9c38d0.png[/img]

[color=olive][b]四：固定导航栏[/b][/color]

1. 使导航栏固定在顶部

对 nav 标签使用 navbar-fixed-top 样式，使导航栏固定在顶部。


<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

</nav>

2. 使导航栏固定在底部

对 nav 标签使用 navbar-fixed-bottom 样式，使导航栏固定在顶部。


<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">

</nav>

[color=olive][b]五：完整代码[/b][/color]


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


         <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <style media="screen">
            .navbar {
             background-image: linear-gradient(#54B4EB, #2FA4E7 60%, #1D9CE5);
             background-repeat: no-repeat;
             border-bottom: 1px solid #178ACC;
             box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
             border-radius: 0px;
            }

            .navbar-default {
             background-color: #2FA4E7;
             border-color: #1995DC;
            }

            .navbar-default .navbar-brand,
            .navbar-default .navbar-brand:hover,
            .navbar-default .navbar-brand:focus ,
            .navbar-default .navbar-nav > li > a {
             color: #FFF;
            }

            .navbar-default .navbar-nav > li > a:hover,
            .navbar-default .navbar-nav > li > a:focus {
             color: #FFF;
             background-color: #178ACC;
            }

            .navbar-default .navbar-toggle:hover,
            .navbar-default .navbar-toggle:focus {
            background-color: #178ACC;
            }

            .navbar-default .navbar-toggle {
            border-color: #178ACC;
            }

            .navbar-default .navbar-toggle .icon-bar {
            background-color: #FFF;
            }
        </style>
    </head>
    <body>

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!--header section -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 class="navbar-brand" href="#">Brand Name</a>
            </div>
            <!-- menu section -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="# ">Home</a></li>
                    <li><a href="# ">About</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Support</a></li>
                </ul>
            </div>
        </div>
    </nav>

    </body>
</html>