当前位置:首页 > 电脑知识 > 正文内容

学到了吗(bootstraping方法)Bootstrap菜鸟教程,Bootstrap教程:响应式/圆角/圆形/缩略图图像设置,Bootstrap教程:响应式/圆角/圆形/缩略图图像设置,

sauo2年前 (2022-12-15)电脑知识45

Bootstrap在网页制作中图像也是经常用到的元素,在Bootstrap框架中对于图像的样式风格提供以下几种风格:

1、img-responsive:响应式图片,主要针对于响应式设计 2、img-rounded:圆角图片 3、img-circle:圆形图片 4、img-thumbnail:缩略图片

使用方法:

使用方法非常简单,只需要在<img>标签上添加对应的类名,如下代码:

<imgalt="140x140"src="http://placehold.it/140x140"><imgclass="img-rounded"alt="140x140"src="http://placehold.it/140x140"><imgclass="img-circle"alt="140x140"src="http://placehold.it/140x140"><imgclass="img-thumbnail"alt="140x140"src="http://placehold.it/140x140"><imgclass="img-responsive"alt="140x140"src="http://placehold.it/140x140">

响应式图片

通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。

.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上:

<divclass="container"><h2>响应式图片</h2><p> .img-responsive类让图片支持响应式,将很好地扩展到父元素 (通过改变窗口大小查看效果):</p><imgsrc="cinqueterre.jpg"class="img-responsive"alt="Cinque Terre"width="500"height="236"></div>

设置图片大小:

由于样式没有对图片做大小上的样式限制,所以在实际使用的时候,需要通过其他的方式来处理图片大小。比如说控制图片容器大小。(注意不可以通过css样式直接修改img图片的大小,这样操作就不响应了)

注意:

对于圆角图片和圆形图片效果,因为是使用了CSS3的圆角样式来实现的,所以注意对于IE8以及其以下版本不支持,是没有圆角效果的。

Bootstrap框架为了大家更好的维护图像的样式,同样将这部分样式独立出来: 1、LESS版本,可以查阅scaffolding.less 2、Sass版本,可以查阅_scaffolding.scss 大家可以修改其中之一,重新编译就可以得到自己需要的图片样式效果。

(window.slotbydup = window.slotbydup || []).push({ id: "u6835052", container: "_96bek913mdb", async: true });

本文链接:http://blog.sauo.top/?id=476 感谢分享!

分享到:

扫描二维码推送至手机访问。

版权声明:本文由冬眠先生个人博客发布,如需转载请注明出处。

本文链接:http://blog.sauo.top/?id=476

分享给朋友:

“学到了吗(bootstraping方法)Bootstrap菜鸟教程,Bootstrap教程:响应式/圆角/圆形/缩略图图像设置,Bootstrap教程:响应式/圆角/圆形/缩略图图像设置,” 的相关文章

硬核推荐(ubuntu取消自动休眠)ubuntu关闭自动休眠命令,ubuntu 关闭自动休眠模式的方法,ubuntu 关闭自动休眠模式的方法,

硬核推荐(ubuntu取消自动休眠)ubuntu关闭自动休眠命令,ubuntu 关闭自动休眠模式的方法,ubuntu 关闭自动休眠模式的方法,

免费领取腾讯云服务器! 在使用ssh连接ubuntu系统时,发现长时间不输入ssh命令ssh就会自动断开。查找了一下原因,发现是安装ubuntu的电脑自动进入了休眠模式,而ubuntu系统中有多种关闭自动休眠的方法,下面就来说一说使用ssh命令来关闭ubu...

万万没想到(Ubuntu安装ssh服务)ubuntu配置ssh服务器,ubuntu安装ssh服务器的方法,ubuntu安装ssh服务器的方法,

万万没想到(Ubuntu安装ssh服务)ubuntu配置ssh服务器,ubuntu安装ssh服务器的方法,ubuntu安装ssh服务器的方法,

免费领取腾讯云服务器! 安装了一个ubuntu系统,想着在内网中用ssh进行远程连接管理。下面这篇博文就说说如果在ubuntu系统中安装ssh远程管理服务。 ubuntu 安装ssh服务器的方法 1、安装 openssh-s...

一篇读懂(PHP for循环)php跳出循环的语句,php中的几种循环语句,php中的几种循环语句,

免费领取腾讯云服务器! 列举几种php脚本中常用的几种循环语句,比如,for,foreach,do....while 等。 php for循环 for循环在很多语言中都经常用到,比如js语言,c语言,java语言等。...

深度揭秘(Linux查看文件md5)linux命令查看md5值,Linux系统下查看文件md5的方法,Linux系统下查看文件md5的方法,

深度揭秘(Linux查看文件md5)linux命令查看md5值,Linux系统下查看文件md5的方法,Linux系统下查看文件md5的方法,

免费领取腾讯云服务器! 上两篇博文,分别写了在window系统下获取文件md5值的方法与mac苹果系统下获取文件md5值的方法,今天这篇博文就写一下在linux系统下获取文件md5值的方法。 Linux系统下获取文件md5值的方法...

没想到(php获取IP地址)php获取当前时间的函数,php获取顶级域名/一级域名的方法,php获取顶级域名/一级域名的方法,

免费领取腾讯云服务器! 列出几个网上收集的关于利用php脚本获取顶级域名的方法,可能分析的不是很完全,大家可以参考一下,适当的做一些调整。 php获取顶级域名的方法 示例1: Jav...

没想到(js判断域名是否可用)js判断域名是否合法,js判断域名是否为顶级域名的方法,js判断域名是否为顶级域名的方法,

免费领取腾讯云服务器! 写了一个查询域名资料的小项目,需要用户输入查询域名的顶级域名,为了保证用户输入的域名为顶级域名,就写一个通过JS脚本代码来判断输入的域名是否为顶级域名的方法,下面飞鸟慕鱼博客就来分享一下,大家可以做个参考! js判断...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。