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>