如何使用 bootstrap 生成缩略图和自定义？

Bootstrap 帮助 Web 开发人员创建缩略图，这些缩略图用于在网格中显示链接图像，其中包含有助于减少代码长度的预定义类。创建缩略图是为了提供带有小图像的图像的快速预览。

缩略图：缩略图是代表较大图像的小图像。 Bootstrap 有一个简单的方法来使用缩略图来做到这一点。 Bootstrap 的.thumbnail类用于在网格（网格系统）中显示链接的图像，缩略图是使用元素 中的.thumbnail类创建的。类.col-sm-*和.col-md-* （其中 * 代表数字），它用于创建图像的网格。

实施的分步指南：

步骤 1：在所有其他样式表之前将 Bootstrap 和 jQuery CDN 包含到 标签中以加载我们的 CSS。

第 2 步：在带有 class 行的 HTML 正文中添加

标记。在那个

中创建四个div部分来创建四个图像。

第 3 步：将“col-sm-6”和“col-md-3”添加到创建网页响应的四个 div 部分。

步骤4：添加带有类值缩略图的标签以定义下一行中图像的链接。

示例 1：以下示例显示了缩略图图像的创建。

HTML

  
    Thumbnail images
    
    
    
    
    
  
  
    Bootstrap thumbnails
    
      
        
          
        
      
      
        
          
        
      
      
        
          
        
      
      
        
          
        
      
    
  

---

输出：在下面的输出图像中，我们可以看到缩略图。这些也响应不同的屏幕尺寸。

响应式缩略图

向缩略图添加标题和按钮：

步骤1：我们创建了类值为缩略图的div并插入图像，然后添加类.caption的div来定义图像的描述

。

第 2 步：使用 标签和 class 创建按钮。 btn .btn-成功。

示例：以下示例演示了向缩略图添加标题和按钮。

HTML

  
    
    
    
    
    
  
  
    
      Bootstrap Thumbnails with Captions and Button
    
    
      
        
          
        
        
          GfG Web-Development
          
            Web development refers to the building,
            creating, maintaining of
            websites.
          
  
          
            
             Learn More
            
          
  
        
      
      
        
          
        
        
          GfG Machine Learning
          
            Machine Learning is the study to 
            learn without being explicitly
            programmed.
          
  
          
            
             Learn More
            
          
  
        
      
      
        
          
        
        
          GfG Programming
          
            Competitive Programming enables you 
            to code a given problem under
            provided constraints.
          
  
          
            
             Learn More
            
            
  
        
      
      
        
          
        
        
          GfG Java
          
            Java is one of the most popular 
            and widely used programming
            language.
          
  
          
            
             Learn More
            
          
  
        
      
    
  

输出：在下面的输出图像中，我们可以看到带有标题和按钮的图像。这些也响应不同的屏幕尺寸。

支持的浏览器：

• 谷歌浏览器
• 火狐
• IE浏览器
• 苹果浏览器
• 歌剧