Bootstrap - banner

展示效果.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。