项目实战--响应式导航[1]

一．响应式导航

 

.logo {

         padding:0;

}

#myCarousel {

         margin: 50px 0 0 0;   //轮播图和导航不会重叠

} 

#navbar-collapse ul {

         margin-top:0;

}

.carousel-inner img {

         margin: 0 auto;    //让轮播器的图片自动居中

}

.carousel-control {

         font-size: 100px;

}

 

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

 

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

         <div class="container">

                   <div class="navbar-header">

<a href="#" class="navbar-brand logo"><img src="img/logo.png" alt="瓢城企训网"></a>

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">

//大屏时隐藏，缩小时显示

                                     <span class="icon-bar"></span>

                                     <span class="icon-bar"></span>

                                     <span class="icon-bar"></span>

                            </button>

                   </div>

                   <div class="collapse navbar-collapse" id="navbar-collapse">

//响应式导航，缩小时消失

                            <ul class="nav navbar-nav navbar-right">

<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>

<li><a href="#"><span class="glyphicon glyphicon-list"></span> 资讯</a></li>

<li><a href="#"><span class="glyphicon glyphicon-fire"></span> 案例</a></li>

<li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li>

                            </ul>        

                   </div>

         </div>

</nav>