Bootstrap-缩略图 - 芒果文档

📜 Bootstrap-缩略图

📅 最后修改于: 2020-10-27 06:14:52 🧑 作者: Mango

本章讨论有关Bootstrap缩略图的信息。许多站点都需要一种在网格中布置图像，视频，文本等的方式，Bootstrap提供了一种使用缩略图实现此目的的简便方法。使用Bootstrap创建缩略图-

在图像周围添加带有.thumbnail类的标记。

这将添加四个填充像素和一个灰色边框。

悬停时，动画发光会勾勒出图像轮廓。

以下示例演示了默认缩略图-

现场演示

添加自定义内容

现在我们有了基本的缩略图，可以在缩略图中添加任何类型的HTML内容，例如标题，段落或按钮。请按照以下步骤-

将具有.thumbnail类的标记更改为
。

在该

内部，您可以添加所需的任何内容。由于这是一个

，因此我们可以使用默认的基于span的命名约定进行大小调整。

如果要对多张图像进行分组，请将它们放置在无序列表中，并且每个列表项都将浮动到左侧。

以下示例演示了这一点-

现场演示


   
      
         
      
      
      
         Thumbnail label
         Some sample text. Some sample text.
         
         
            
               Button
             
            
            
               Button
            
         
      
   
   
   
      
         
      
      
      
         Thumbnail label
         Some sample text. Some sample text.
         
         
            
               Button
             
            
            
               Button
            
         
      
   
   
   
      
         
      
      
      
         Thumbnail label
         Some sample text. Some sample text.
         
         
            
               Button
             
            
            
               Button
            
         
      
   
   
   
      
         
      
      
      
         Thumbnail label
         Some sample text. Some sample text.
         
         
            
               Button
             
            
            
               Button