bootstrap-响应式导航（二）

代码：

<!--导航  start-->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!--小屏幕导航按钮和logo start-->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="index.html" class="navbar-brand">麦子学院</a>
            </div>
            <!--小屏幕导航按钮和logo end-->
            <!--导航 start-->
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="index.html">首页</a> </li>
                    <li><a href="index.html">论坛</a> </li>
                    <li><a href="index.html">前端开发</a> </li>
                    <li><a href="index.html">最新课程</a> </li>
                    <li><a href="index.html">移动APP</a> </li>
                    <li><a href="index.html">联系我们</a> </li>
                </ul>
            </div>
            <!--导航 end-->
        </div>
    </nav>
   <!-- 导航 end-->

设置CSS样式：

1.设置整个网站字体

body{
    font-family: 'Microsoft YaHei', sans-serif;
}

2.设置nav的背景颜色、边框、下阴影

.navbar-default{
    background-color: #fff;
    border: none;
    box-shadow: 0px 2px 8px 0px rgba(50,50,50,0.25);
}

3.设置logo的字体大小、字体加粗、字体颜色、高度、行高

.navbar-default .navbar-brand {
    font-size: 30px;
    font-weight: bold;
    color: #40D2B1;
    height: 70px;
    line-height: 35px;
}

4.设置导航的字体大小、字体加粗、字体颜色、高度、行高

.navbar-default .navbar-nav>li>a {
    font-size: 16px;
    font-weight: bold;
    color: #666;
    height: 70px;
    line-height: 35px;
}

5.设置屏幕缩小时菜单的样式

1）位置

2）鼠标悬浮时颜色变化

3）按钮里横线的颜色

.navbar-toggle{
    margin-top: 17px;
}
.navbar-default .navbar-toggle:hover {
    border-color: #40D2B1;
    background-color: rgb(69, 210, 184);
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #1C9982;
}

效果图：