Bootstrap实现圆角、圆形头像和响应式图片


Posted in Javascript onDecember 14, 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实现圆角、圆形头像和响应式图片

从图中可以看到使用各种样式得到的效果,处理起图片来非常的简单方便。有时候根据需要,比如我们需要用一个具有内边距和灰色边框的圆形头像时,可以将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。

本文参考来自:http://www.runoob.com/bootstrap/bootstrap-images.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
vue router demo详解
Oct 13 Javascript
vue实现跨域的方法分析
May 21 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 #Javascript
深入理解jquery中的each用法
Dec 14 #Javascript
Bootstrap基本模板的使用和理解1
Dec 14 #Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 #Javascript
jQuery的extend方法【三种】
Dec 14 #Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 #Javascript
Bootstrap导航条的使用和理解3
Dec 14 #Javascript
You might like
php在线生成ico文件的代码
2007/10/09 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
简述vue中的config配置
2018/01/23 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
python文件选择对话框的操作方法
2019/06/27 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
大学生村官典型材料
2014/01/12 职场文书
大学生就业意向书范文
2014/04/01 职场文书
大学新闻系求职信
2014/06/03 职场文书
好的旅游活动方案
2014/08/19 职场文书
学习考察心得体会
2014/09/04 职场文书
同意报考证明
2015/06/17 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android