Bootstrap Img 图片样式(推荐)


Posted in Javascript onDecember 13, 2016

 Bootstrap提供了四种用于<img>类的样式,分别是:

.img-rounded:圆角 (IE8 不支持),添加 border-radius:6px 来获得图片圆角;

.img-circle:圆形 (IE8 不支持),添加 border-radius:50% 来让整个图片变成圆形。

.img-thumbnail:缩略图功能,添加一些内边距(padding)和一个灰色的边框。

.img-responsive:图片响应式 (将很好地扩展到父元素)。

使用:

将类样式直接添加到class中即可:

<img class="img-circle" src="img.jpg" alt="头像"/>

效果如下:

Bootstrap Img 图片样式(推荐)

从图中可以看到使用各种样式得到的效果,处理起图片来非常的简单方便。有时候根据需要,比如我们需要用一个具有内边距和灰色边框的圆形头像时,可以将circle和thumbnail两个样式叠加使用,效果如上图circle thumbnail所示。

img-responsive使得我们的图片具有响应式的效果。所谓响应式,就是变化的,随着某一个元素的变化而变化,从而实现自适应的效果。上图中的responsive两个图片代码如下:

<figure style="width: 150px;height: 150px;"> 
      <figcaption>responsive(150*150)</figcaption> 
      <img class="img-responsive " src="img.jpg" alt="头像"/> 
 </figure> 
<figure style="width: 100px;height: 100px;"> 
      <figcaption>responsive(100*100)</figcaption> 
      <img class="img-responsive " src="img.jpg" alt="头像"/> 
 </figure>

在这里我们没有设置图片的大小,但是设置了包裹他的元素figure 的大小,无论figure为150px*150px或者100px*100px,图片都能够很好的扩展到父元素figure。

如果大家决定上文介绍的不够详细,大家可以参考下:

以上所述是小编给大家介绍的Bootstrap Img 图片样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript几种形式的树结构菜单
May 10 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
vuex实现数据状态持久化
Nov 11 Javascript
原生JS实现烟花效果
Mar 10 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 #Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 #Javascript
AngularJS自定义控件实例详解
Dec 13 #Javascript
Node.js中process模块常用的属性和方法
Dec 13 #Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 #Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 #Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 #Javascript
You might like
常用的php对象类型判断
2008/08/27 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
简单的php文件上传(实例)
2013/10/27 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
django中的setting最佳配置小结
2017/11/21 Python
python 正确保留多位小数的实例
2018/07/16 Python
python3 enum模块的应用实例详解
2019/08/12 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
Python如何将函数值赋给变量
2020/04/28 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
学前班学生评语
2014/12/29 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
教师节随笔
2015/08/15 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers