使用Carousel（轮换图片）插件

首页中使用Carousel插件往往能达到吸睛的目的，是用来展示图文内容的最佳手段。在页面中使用carsouel插件很容易，可以分为以下几个步骤：

1.在DIV的class属性中加入carousel

加入carousel后，该DIV就是一个轮换图片插件了

    <div class="carousel slide" data-ride="carousel">

    </div>

2.设置内容区（carsouel-inner）

在上述DIV中加入新的DIV作为其主体内容，其class="carsouel-inner"。

     <div class="carousel-inner" role="listbox">

     </div>

3.在内容区中放入要展示的元素（item）

     <div class="item active">
      <a href="包含图片文章路径">
          <img src="图片路径" alt="图片信息"/></a>
          <div class="carousel-caption">
               <h4 class="alpha">
                   <a style="color:white;" href="包含图片文章路径">图片标题</a>
               </h4>
              </div>

      </div>
      <!--其他item-->

可以看到在元素区中包含文章展示信息——文内图片+标题+指向文章的链接。

4.按钮区（carousel-control）

最后放入，“上一个”，“下一个”按钮（左右箭头），用于用户自主切换。

<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>

图片变形

运行右侧的代码中可以看出,当不同长宽比的图片试图占满元素(item)区时，图片发生了变形。