讲解Bootstrap中轮播插件的使用

Bootstrap 是一个免费的开源工具集，用于创建响应式网站和 Web 应用程序。它是最流行的 HTML、CSS 和 JavaScript 框架，用于开发响应式、移动优先的网站。它解决了我们曾经遇到的许多问题，包括跨浏览器兼容性问题。

Carousel 是引导程序的幻灯片组件，广泛用于幻灯片或循环浏览 HTML 文档的不同元素，尤其是图像容器或文本。

Bootstrap CDN 链接：要了解引导轮播的使用，我们必须将 Bootstrap 和 jQuery CDN 库文件包含到 HTML 代码中。

用途： carousel 插件的主要用途是实现图像的滑块或幻灯片。包含图像的 HTML div 也可以包含文本。在本节中，我们将使用以下步骤在 Bootstrap 轮播插件的帮助下制作图像幻灯片。

• 创建一个带有“carousel”类的 HTML div 元素。如果您想自动幻灯片显示图像，那么还要添加一个类“幻灯片”。
• 为 div 元素提供一个 id “carouselExampleControls”，以使用按钮控制幻灯片。
• 将“data-ride”属性添加为“carousel”以触发 JavaScript 操作。
• 在 div 中创建另一个嵌套 div，类为“carousel-inner”。这个 div 将包含除了用于控制轮播的按钮之外的所有轮播元素。
• 在该 div 中，创建另一个 div “carousel-item”。将“活动”类添加到默认轮播幻灯片，添加轮播幻灯片的图像和标题。添加任意数量的轮播项目。
• 分别将“carousel-control-prev”和“carousel-control-next”类添加到上一张和下一张幻灯片链接。
• 为轮播的上一个和下一个图标添加“数据幻灯片”属性作为“上一个”和“下一个”。

例子：

HTML

  

    
    
    
  
    
    
  
    
    
    
    
    
    
    
  
    
        img {
            display: block;
            width: 100%;
        }
    

  

    
        
              
            
                
                    
                    
                        Red Image
  
                        
                            Here we can include some 
                            text for the Red Image
                        
                    
                
  
                
                    
                    
                        Blue Image
  
                        
                            Here we can include some 
                            text for the Blue Image
                        
                    
                
  
                
                    
                    
                        Green Image
  
                        
                            Here we can include some 
                            text for the Green Image
                        
                    
                
            
  
            
                  
                
                
            
  
            
                  
                
                
            
        
    

  

输出：