Bootstrap 图片及缩略图

2022-03-21 07:26 417阅读 0赞

### 一、图片形状 ###

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

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

![20190131144108929.png][]

** 2、响应式图片**

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

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

### 二、缩略图 ###

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70][]

** 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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 1][]

[20190131144108929.png]: /images/20220321/4a874a68d2a0416d8e2cf062ef09010f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70]: /images/20220321/da7030983174421db2d2e1ede512859c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 1]: /images/20220321/21c699ab4e7641a5b48d36df86cd28ff.png