如何在bootstrap中創建一個面板傳送帶3

Question

Bootstrap 3中有任何方法可以讓我可以有一個不同面板的傳送帶，我的意思是帶有文本，圖片和按鈕的框，例如9顯示旋轉木馬每一步中的3個面板？

Answer 1

這裏有一個完整的工作演示用於引導旋轉木馬與JavaScript事件和期權以及 http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Carousel.php

Answer 2

那麼你可以試試這個，我沒試過3，但我查了網站

<div class="item active"> 
    <img src="..." alt="..."> 
    <div class="carousel-caption"> 
    ... 
    </div> 
</div> 

，你可以很容易地把所有的項目ü想的<div class="item active">內，然後將其關閉，然後再打開另一個DIV等在...一定要嘗試只用小圖片來獲得想法... 我曾經這樣做與以前的Bootstrap，所以我敢肯定它會工作:)

Answer 3

你可以做到這一點與單獨引導流體網格，只需指定一個.container流體容器和一個.row流體行並給每個你的列表項目housin g圖像a .span *類，在這種情況下是3（3 * 4 = 12）。

HTML

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="carousel slide" id="myCarousel"> 
      <div class="carousel-inner"> 
       <div class="item active"> 
        <ul class="thumbnails"> 
         <li class="span3"> 
          <div class="caption"> 
           <h5>Caption</h5> 
          </div> 
          <div class="thumbnail"> 
           <img src="http://placehold.it/260x180" alt=""> 
          </div> 
         </li> 
         <li class="span3"> 
          <div class="caption"> 
           <h5>Caption</h5> 
          </div> 
          <div class="thumbnail"> 
           <img src="http://placehold.it/260x180" alt=""> 
          </div> 
         </li> 
         <li class="span3"> 
          <div class="caption"> 
           <h5>Caption</h5> 
          </div> 
          <div class="thumbnail"> 
           <img src="http://placehold.it/260x180" alt=""> 
          </div> 
         </li> 
         <li class="span3"> 
          <div class="caption"> 
           <h5>Caption</h5> 
          </div> 
          <div class="thumbnail"> 
           <img src="http://placehold.it/260x180" alt=""> 
          </div> 
         </li> 
        </ul> 
       </div> 
       <div class="item"> 
        <ul class="thumbnails"> 
         <li class="span3"> 
          <div class="caption"> 
           <h5>Caption</h5> 
          </div> 
          <div class="thumbnail"> 
           <img src="http://placehold.it/260x180" alt=""> 
          </div> 
         </li> 
         <li class="span3"> 
          <div class="caption"> 
           <h5>Caption</h5> 
          </div> 
          <div class="thumbnail"> 
           <img src="http://placehold.it/260x180" alt=""> 
          </div> 
         </li> 
         <li class="span3"> 
          <div class="caption"> 
           <h5>Caption</h5> 
          </div> 
          <div class="thumbnail"> 
           <img src="http://placehold.it/260x180" alt=""> 
          </div> 
         </li> 
         <li class="span3"> 
          <div class="caption"> 
           <h5>Caption</h5> 
          </div> 
          <div class="thumbnail"> 
           <img src="http://placehold.it/260x180" alt=""> 
          </div> 
         </li> 
        </ul> 
       </div> 
       <div class="item"> 
        <ul class="thumbnails"> 
         <li class="span3"> 
          <div class="caption"> 
           <h5>Caption</h5> 
          </div> 
          <div class="thumbnail"> 
           <img src="http://placehold.it/260x180" alt=""> 
          </div> 
         </li> 
         <li class="span3"> 
          <div class="caption"> 
           <h5>Caption</h5> 
          </div> 
          <div class="thumbnail"> 
           <img src="http://placehold.it/260x180" alt=""> 
          </div> 
         </li> 
         <li class="span3"> 
          <div class="caption"> 
           <h5>Caption</h5> 
          </div> 
          <div class="thumbnail"> 
           <img src="http://placehold.it/260x180" alt=""> 
          </div> 
         </li> 
         <li class="span3"> 
          <div class="caption"> 
           <h5>Caption</h5> 
          </div> 
          <div class="thumbnail"> 
           <img src="http://placehold.it/260x180" alt=""> 
          </div> 
         </li> 
        </ul> 
       </div> 
      </div> 
      <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a> 
      <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a> 
     </div> 
</div> 
</diV>