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 function对象那些迷惑分析
Oct 24 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
详解node中创建服务进程
May 09 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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读MYSQL中文乱码的解决方法
2006/12/17 PHP
浅析PHP Socket技术
2013/08/02 PHP
php文件缓存类汇总
2014/11/21 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
js style动态设置table高度
2014/10/21 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
Python将string转换到float的实例方法
2019/07/29 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
美国在线宠物商店:Chewy
2019/01/12 全球购物
护理学毕业生求职信
2013/11/14 职场文书
集团薪酬管理制度
2014/01/13 职场文书
优良学风班申请材料
2014/02/13 职场文书
环保建议书100字
2014/05/14 职场文书
庆元旦演讲稿
2014/09/15 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
python之json文件转xml文件案例讲解
2021/08/07 Python
Redis分布式锁的7种实现
2022/04/01 Redis