BootStrap中的缩略图

最新推荐文章于 2023-07-18 23:59:11 发布

江西师范大学-20届-吴悠

最新推荐文章于 2023-07-18 23:59:11 发布

阅读量701

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发

本文链接：https://blog.youkuaiyun.com/qq_39905917/article/details/85108520

前端开发专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用BootStrap创建缩略图效果，并展示了如何通过添加不同类来改变图像样式，如圆角、圆形和缩略图样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BootStrap中的缩略图

将图片元素包裹在带有.thumbnail类的链接< a >元素中即可以创建一个缩略图。缩略图会添加四个像素的内边距（padding）和一个灰色的边框，当鼠标悬停在图像上时会动画显示出图像的轮廓。
代码如下：

<div class="row">
	<div class="col-lg-4 col-md-4 col-sm-4">
		<a href="#" class="thumbnail"><img src="img/11.jpg" /></a>
	</div>
	<div class="col-lg-4 col-md-4 col-sm-4">
		<a href="#" class="thumbnail"><img src="img/12.jpg" /></a>
	</div>
	<div class="col-lg-4 col-md-4 col-sm-4">
		<a href="#" class="thumbnail"><img src="img/13.jpg" /></a>
	</div>
</div>

效果如下：
在这里插入图片描述

图像形状：
通过给图像元素应用下面几个样式类，可以让图像呈现出不同的形状。
img-rounded：添加border-radius:6px ;获得图像圆角。
img-circle：添加border-radius:500px ;让整个图像变成圆形。
img-thumnail：添加一些内边距（padding）和一个灰色的边框，图像呈现缩略图样式。
代码如下：

<img src="img/pic.jpg" alt="圆角" class="img-rounded" />
<img src="img/pic.jpg" alt="圆形" class="img-circle" />
<img src="img/pic.jpg" alt="缩略图样式" class="img-thumbnail" />