Bootstrap - banner

展示效果.png

所用到组件：Carousel

Carousel是一个用于轮播内容的javascript组件，也就是我们经常要使用到的滚动广告，护着轮播图片。
文档地址：https://v3.bootcss.com/javascript/#carousel

一个Carousel的基本结构：

图片.png

代码：

  
  

    

    

    

  

  
  

    

      
      

        ...
      
    
    

      
      

        ...
      
    
     

      
      

        ...
      
    
    ...
  

  
  
    
    Previous
  
  
    
    Next
  

我们一般需要限制这个Banner的高度，以及里面内容，图片的属性，

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

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

.carousel image {
      height: 100%;
}

基本结构图片与代码的对应关系：
1）

对应的是，下面的略缩点。
2）

是轮播的内容。
3）有两个标签，是对应的向前或者向后的两个按钮。

这些节点只需要写这些class就可以完成他们的任务。
首先我们为这个轮播组件设置一个id，eg:id="carousel-example-generic"
下面的轮播组件导航，对应的是data-target，eg:data-target="#carousel-example-generic"
还有就是左右切换的也是这样的id。