如何製作全屏BootStrap旋轉木馬

如何通過單擊按鈕將Bootstrap旋轉木馬強制爲全屏模式？ Here是一個工作樣本，這是我的代碼：如何製作全屏BootStrap旋轉木馬

<div class="container"> 
<div class="well span9 columns"> 
    <div id="myCarousel" class="carousel slide"> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="" /> 
      </div> 
      <div class="item"> 
       <img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="" /> 
      </div> 
      <div class="item"> 
       <img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="" /> 
      </div> 
     </div> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> 
    </div> 
     <button type="button" class="btn btn-inverse fulesize"><i class="icon-fullscreen icon-white"></i></button> 
</div> 
</div>

和jQuery是：

$(".fulesize").click(function(){ 
    $(".carousel-inner, .carousel, .item, .active ").addClass("full"); 
});

和CSS：

html{height:100%;} 
.full{height:100%;}

來源

2013-07-24 Mona Coder

此問題已被詢問了幾次。這裏是一個解決方案：http://stackoverflow.com/questions/16350902/bootstrap-carousel-full-screen –

嗨邁克爾，感謝您的回覆，我已經看到這篇文章，我試圖在我的示例中使用相同的代碼，但它不工作！ –

你想讓你的圖片伸展以填充整個屏幕嗎？請注意，它們可能會變形。 –

我已經使用這個全尺寸背景圖片，但我相信它也可以用於傳送帶。請參閱http://css-tricks.com/perfect-full-page-background-image/，更改類以滿足您的需求。

$(window).load(function() {  

    var theWindow  = $(window), 
     $bg    = $("#bg"), 
     aspectRatio  = $bg.width()/$bg.height(); 

    function resizeBg() { 

     if ((theWindow.width()/theWindow.height()) < aspectRatio) { 
      $bg 
       .removeClass() 
       .addClass('bgheight'); 
     } else { 
      $bg 
       .removeClass() 
       .addClass('bgwidth'); 
     } 

    } 

    theWindow.resize(resizeBg).trigger("resize"); 

});

來源

2013-07-25 01:23:53

如何製作全屏BootStrap旋轉木馬

回答

相關問題