展示效果.png

所用到組件：Carousel

Carousel是一個用于輪播內容的javascript組件，也就是我們經常要使用到的滾動廣告，護著輪播圖片。
文檔地址：https://v3.bootcss.com/javascript/#carousel

一個Carousel的基本結構：

圖片.png

代碼：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
     <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

我們一般需要限制這個Banner的高度，以及里面內容，圖片的屬性，

.carousel {
      height: 300px;
      background-color: #000;   # 沒有圖片填充的地方，使用黑色來填充。
}

.carousel .item {
      height: 300px;
      background-color: #000;
}

.carousel image {
      height: 100%;
}

基本結構圖片與代碼的對應關系：
1）<ol>對應的是，下面的略縮點。
2） <div class="carousel-inner" role="listbox">
是輪播的內容。
3）有兩個<a>標簽，是對應的向前或者向后的兩個按鈕。

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"></a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"></a>

這些節點只需要寫這些class就可以完成他們的任務。
首先我們為這個輪播組件設置一個id，eg:id="carousel-example-generic"
下面的輪播組件導航，對應的是data-target，eg:data-target="#carousel-example-generic"
還有就是左右切換的也是這樣的id。