</div>
這里的id被上面的data-target所綁定。也就是說，上面的按鈕打開的既是這個id所包含的內容
<div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right"> navbar-right將此ul內容靠container右顯示 <li><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><div id="myCarousel" class="carousel slide">slide可將左右設置成一個區塊，向前向后 <ol class="carousel-indicators">加上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">加上carousel-inner將圖片收起來，隱藏 <div class="item active"><img src="imgs/img1.jpg" alt="圖片1"></div><!-- 若是圖片寬度不夠 可在圖片左右截取臨界點的RGB，將背景設置為RGB--> <div class="item"><img src="imgs/img2.jpg" alt="圖片2"></div> <div class="item"><img src="imgs/img3.jpg" alt="圖片3"></div></div><a href="#myCarousel" data-slide="PRev" id="carousel-control-left" class="carousel-control left">‹</a><a href="#myCarousel" data-slide="next" id="carousel-control-right" class="carousel-control right">›</a></div>不能再忘記要最先將jQuery導入<script src="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script><script> $(function() { //輪播圖自動播放 $('#myCarousel').carousel({ //自動3秒播放 interval:3000, }) //將剪頭垂直居中 $('.carousel-control').CSS('line-height',$('.carousel-inner img').height() + 'px'); $(window).resize(function(){resize即大小刷新時的動作，綁定這個匿名函數 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'); }); }); //每當圖片輪播為active時，其圖片大小均為0px, //這時第一張圖片狀態下，箭頭位置沒有問題。 但是第二張圖片會出問題因而我定義一個變量$height，接收三個圖片里其大小不為0的值</script>新聞熱點
疑難解答
