Bootstrap 图片及缩略图

一、图片形状

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

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

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

  

 2、响应式图片

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

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

<img src="..." class="img-responsive" alt="Responsive image">

 

二、缩略图

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

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

        <div class="row">
            <div class="col-sm-4 col-md-4">
                <a href="#" class="thumbnail">
                    <img src="./image/abc123.jpg"  alt="缩略图">
                </a>
            </div>
            <div class="col-sm-4 col-md-4">
                <a href="#" class="thumbnail">
                    <img src="./image/aaa.jpg"  alt="缩略图">
                </a>
            </div>
            <div class="col-sm-4 col-md-4">
                <a href="#" class="thumbnail">
                    <img src="./image/abc123.jpg"  alt="缩略图">
                </a>
            </div>
        </div>

    

 2、添加自定义的内容

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

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

具体步骤如下：

• 把带有 class .thumbnail 的 <a> 标签改为 <div>。
• 在该 <div> 内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。
• 如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。

        <div class="row">
            <div class="col-sm-4 col-md-4">
                <div class="thumbnail">
                    <img src="./image/abc123.jpg"  alt="缩略图">
                    <div class="caption">
                        <h3>缩略图标签</h3>
                        <p>一些示例文本。</p>
                        <p>
                            <a href="#" class="btn btn-primary" role="button"> 按钮1</a>
                            <a href="#" class="btn btn-primary" role="button"> 按钮2</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-md-4">
                <div class="thumbnail">
                    <img src="./image/aaa.jpg"  alt="缩略图">
                    <div class="caption">
                        <h3>缩略图标签</h3>
                        <p>一些示例文本。</p>
                        <p>
                            <a href="#" class="btn btn-primary" role="button"> 按钮1</a>
                            <a href="#" class="btn btn-primary" role="button"> 按钮2</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-md-4">
                <div class="thumbnail">
                    <img src="./image/abc123.jpg"  alt="缩略图">
                    <div class="caption">
                        <h3>缩略图标签</h3>
                        <p>一些示例文本。</p>
                        <p>
                            <a href="#" class="btn btn-primary" role="button"> 按钮1</a>
                            <a href="#" class="btn btn-primary" role="button"> 按钮2</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>