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

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

sauo3年前 (2022-12-15)电脑知识127

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系统中的防火墙使用的是iptables,而为了方便防火墙的设置ubuntu提供了一个防火墙管理工具ufw.下面这篇文章就说一说关于防火墙管理工具ufw的安装与使用方法。 ubuntu防火墙ufw的安装与设...

不看后悔(php全局变量有哪些)php全局变量和局部变量的区别,php全局变量与js全局变量的区别,php全局变量与js全局变量的区别,

免费领取腾讯云服务器! 因为经常写php与js代码,有时候使用全局变量的时候经常的混淆,这篇文章就来说说js中的全局变量与php中的全局变量的区别。 js全局变量与php全局变量的区别 php全局变量 php...

一看就会(imagefilter过滤图像方法)php imagefill,php imagefilter()图片滤镜函数的用法与示例,php imagefilter()图片滤镜函数的用法与示例,

一看就会(imagefilter过滤图像方法)php imagefill,php imagefilter()图片滤镜函数的用法与示例,php imagefilter()图片滤镜函数的用法与示例,

免费领取腾讯云服务器! 有个小需求,需要使用php代码对图片进行颜色调整,比如变成灰色,改变图片的亮度,对比度等等。而php中就内置了一个图片的滤镜函数 imagefilter() ,下面就来具体说说这个函数的用法。 php imagefi...

这都可以?(常用正则表达式大全)常用正则表达式大全图片,常用正则表达式大全,常用正则表达式大全,

免费领取腾讯云服务器! 网上收集了一些常用的正则表达式,基本上都全,需要的可以拿去了。 关于号码的正则表达式 QQ号正则表达式 BASIC /^[1-9][0-9]{...

这都可以(判断是否是ajax请求)php判断请求方式,php判断是否为ajax请求的方法,php判断是否为ajax请求的方法,

免费领取腾讯云服务器! 在后端可以利用php代码来判断前台提交的数据是否通过ajax进行提交的,其方法也非常的简单,只需要判断$_SERVER["HTTP_X_REQUESTED_WITH"] 是否存在,以及判断 $_SERVER["HTTP_X_REQU...

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

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

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

发表评论

访客

看不清,换一张

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