Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖,本文的主要內(nèi)容是在導(dǎo)航條的下方做一張輪播圖，自動(dòng)播放最新的重要?jiǎng)討B(tài)，感興趣的小伙伴們可以參考一下

本節(jié)課前一節(jié)我們開始設(shè)計(jì)第一個(gè)項(xiàng)目， 一個(gè)內(nèi)訓(xùn)公司的企業(yè)網(wǎng)站， 本節(jié)課學(xué)習(xí)響應(yīng)式導(dǎo)航部分。

基本導(dǎo)航組件+響應(yīng)式：

//基本導(dǎo)航組件+響應(yīng)式

<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="瓢城企訓(xùn)網(wǎng)"></a>

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

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

 <span class="sr-only">切換導(dǎo)航</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> 關(guān)于</a>

 </li>

 </ul>

 </div>

 </div>

</nav>

后一節(jié)我們要在導(dǎo)航條的下方做一張輪播圖，自動(dòng)播放最新的重要?jiǎng)討B(tài)。

//響應(yīng)式輪播圖

<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({

 //設(shè)置自動(dòng)播放/2 秒

 interval : 3000,

}); 

//調(diào)整輪播器箭頭位置

$('.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;

}

以上就是本文的全部內(nèi)容，希望對(duì)大家學(xué)習(xí)Bootstrap程序設(shè)計(jì)有所幫助。