Bootstrap每天必学之响应式导航、轮播图,本文的主要内容是在导航条的下方做一张轮播图，自动播放最新的重要动态，感兴趣的小伙伴们可以参考一下

本节课前一节我们开始设计第一个项目， 一个内训公司的企业网站， 本节课学习响应式导航部分。

基本导航组件+响应式：

//基本导航组件+响应式

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

 <div class="container">

 <div class="navbar-header">

 <a href="#" class="navbar-brand"

 style="margin:0;padding:0;"><img src="img/logo.png" alt="瓢城企训网"></a>

 <button type="button" class="navbar-toggle"

 data-toggle="collapse" data-target="#navbar-collapse">

 <span class="sr-only">切换导航</span>

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

 style="margin-top:0;">

 <li class="active">

  <a href="#"><span class="glyphiconglyphicon-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>

后一节我们要在导航条的下方做一张轮播图，自动播放最新的重要动态。

//响应式轮播图

<div id="myCarousel" class="carousel slide">

 <ol class="carousel-indicators">

 <li data-target="#myCarousel" data-slide-to="0"

 class="active"></li>

 <li data-target="#myCarousel" data-slide-to="1"></li>

 <li data-target="#myCarousel" data-slide-to="2"></li>

 </ol>

 <div class="carousel-inner">

 <div class="item active" style="background:#223240;">

 <a href="#"><img src="img/slide1.png" alt="第一张"></a>

 </div>

 <div class="item" style="background:#F5E4DC;">

 <a href="#"><img src="img/slide2.png" alt="第二张"></a>

 </div>

 <div class="item" style="background:#DE2A2D;">

 <a href="#"><img src="img/slide3.png" alt="第三张"></a>

 </div>

 </div>

 <a href="#myCarousel" data-slide="prev" class="carousel-controlleft">‹</a>

 <a href="#myCarousel" data-slide="next" class="carousel-controlright">›</a>

</div>

----------------------------------------------------------------------------------------

//所需要的 jQuery 控制

$('#myCarousel').carousel({

 //设置自动播放/2 秒

 interval : 3000,

}); 

//调整轮播器箭头位置

$('.carousel-control').css('line-height', $('.carousel-innerimg').height() + 'px');

$(window).resize(function() {

 var $height = $('.carousel-inner img').eq(0).height() || $('.carousel-inner img').eq(1).height() || $('.carousel-inner img').eq(2).height();

 $('.carousel-control').css('line-height', $height + 'px');

}); 

------------------------------------------------------------------------

//所需要的 CSS

a:focus {

 outline: none;

}

.navbar-brand {

 padding: 0;

}

#myCarousel {

 margin: 50px 0 0 0;

}

.carousel-inner .item img {

 margin: 0 auto;

}

.carousel-control {

 font-size: 100px;

}

以上就是本文的全部内容，希望对大家学习Bootstrap程序设计有所帮助。