Bootstrap 图片及缩略图

   1、通过为 元素添加以下相应的类，可以让图片呈现不同的形状。

• .img-rounded：添加 border-radius:6px 来获得图片圆角。
• .img-circle：添加 border-radius:50% 来让整个图片变成圆形。
• .img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

 2、响应式图片

      通过在 标签添加 .img-responsive 类来让图片支持响应式设计。 其实质是为图片设置了 max-width: 100%; 和 height: auto;

      如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。

    1、通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。

• 在图像周围添加带有 class .thumbnail 的 标签。
• 这会添加四个像素的内边距（padding）和一个灰色的边框。
• 当鼠标悬停在图像上时，会动画显示出图像的轮廓

 2、添加自定义的内容

    现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。

    在仅有缩略图的基础上，添加了一个div名为“caption“的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等。

具体步骤如下：

• 把带有 class .thumbnail 的 标签改为
  。
• 在该
  内，您可以添加任何您想要添加的东西。由于这是一个

  ，我们可以使用默认的基于 span 的命名规则来调整大小。
• 如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。

        

            

                

                    
                    

                        缩略图标签
                        
一些示例文本。
                        

                             按钮1
                             按钮2
                        
                    
                
            
            

                

                    
                    

                        缩略图标签
                        
一些示例文本。
                        

                             按钮1
                             按钮2
                        
                    
                
            
            

                

                    
                    

                        缩略图标签
                        
一些示例文本。
                        

                             按钮1
                             按钮2