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 相关文章推荐
JavaScript学习笔记(十七)js 优化
Feb 04 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
详解Node.JS模块 process
Aug 31 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 Javascript
用javascript制作qq注册动态页面
Apr 14 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
调频问题解答
2021/03/01 无线电
php for 循环语句使用方法详细说明
2010/05/09 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
PHP分页类集锦
2014/11/18 PHP
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
python线程join方法原理解析
2020/02/11 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
python实现图像外边界跟踪操作
2020/07/13 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
师范生自荐信范文
2013/10/06 职场文书
高中生期末评语大全
2014/01/28 职场文书
大学旷课检讨书
2014/01/28 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
安全生产年活动总结
2014/08/29 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
借款民事起诉状范文
2015/05/19 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
初三英语教学反思
2016/02/15 职场文书
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers