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 相关文章推荐
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 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读取csv数据保存到数组的方法
2015/01/03 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
Django Highcharts制作图表
2016/08/27 Python
带你了解python装饰器
2017/06/15 Python
详解django三种文件下载方式
2018/04/06 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
Django中的session用法详解
2020/03/09 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
运行Python编写的程序方法实例
2020/10/21 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
门卫岗位安全职责
2013/12/13 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
中层干部考核评语
2015/01/04 职场文书
运动会宣传稿100字
2015/07/23 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android