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>

Bootstrap 图片及缩略图相关推荐

Bootstrap 图片样式
Bootstrap为图片提供了 3 种显示效果,使用方法也非常简单,只需为 <img> 元素应用 .img-rounded..img-circle..img-polaroid 类即可.其中 ...
将指定路径下的所有SVG文件导出成PNG等格式的图片（缩略图或原图大小）
原文:将指定路径下的所有SVG文件导出成PNG等格式的图片(缩略图或原图大小) WPF的XAML文档(Main.xaml): <Window x:Class="SVG2Image.Ma ...
thumbnails 变黑_phpcms v9图片生成缩略图变成黑色解决方法
今天客户反映,上传的图片生成缩略图有的图片变成黑色, 出现问题就百度了一下,有不少网友也遇到这样的问题,但是官方论坛也没有给出解决办法,那还得靠自己解决了,于是就研究phpcms v9 图片压缩代码. ...
html 图片放大缩小轮播,jQuery左右滚动支持图片放大缩略图图片轮播代码分享
本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果,常用的jQuery图片左右轮播 ...
win7系统不显示图片的缩略图的终极解决方法
win7系统不显示图片的缩略图的终极解决方法参考文章: (1)win7系统不显示图片的缩略图的终极解决方法 (2)https://www.cnblogs.com/senior-engineer/p/ ...
如何让电脑显示SVG图片的缩略图
如何让电脑显示SVG图片的缩略图工具/原料 SVG图形文件的缩略图补丁程序方法/步骤 1 默认电脑是无法查看SVG图形文件的缩略图. 2 安装SVG图形文件的缩略图补丁,运行dssee_setup ...
织梦5.7版本后台栏目新增“栏目图片” / “图片地址” / “缩略图” 功能的方法
"栏目图片 / 栏目缩略图" 搭配"外部链接"功能真的非常好用,织梦5.7版本的发现栏目没有此功能,那只能自己手动添加了.添加的时候大家不要怕麻烦,按照步骤仔细 ...
java 修改pdf图片_java代码将pdf 转换成图片加缩略图 -3
写的这些功能主要就是放在定时任务上,每分钟查询是否要有转换的图片,有的换然后就转换,前端展示图片就可以,大家可以浏览图片.不用在去下载哪些文件了. 下面的是pdf转图片加缩略图的 import jav ...
bootstrap 图片上传入门
Bootstrap 图片上传入门导入图片上传 css js **下载地址 :**https://github.com/kartik-v/bootstrap-fileinput 这里我们先放一个图片 ...
bootstrap图片叠加_图片 | Images
图片 | Images 文档和示例用于选择图像为响应行为%28,这样它们就不会比父元素%29大,并向它们添加轻量级样式--所有这些都是通过类实现的. 响应图像引导带中的图像是通过以下方式做出响应的. ...

Bootstrap 图片及缩略图

一、图片形状

二、缩略图

Bootstrap 图片及缩略图相关推荐

最新文章

热门文章