bootstrap css之响应式导航栏

-
使用 Twitter Bootstrap 3 创建响应式导航栏
-

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

先看一下最终效果：

一：设置页面为“响应式”

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

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

二：创建导航栏的 html 标签

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

效果预览：

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

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

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

三：修改样式

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

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

效果预览：

四：固定导航栏

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>

五：完整代码

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

实现原理：
http://lixh1986.iteye.com/blog/2376864

引用请注明
原文出处： http://lixh1986.iteye.com/blog/2321482
-

-

bootstrap css之响应式导航栏

猜你喜欢