详解Bootstrap四种图片样式


Posted in Javascript onJanuary 04, 2016

在本章中,我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了四个可对图片应用简单样式的class,分别是:

img-rounded 添加 border-radius:6px 来获得图片圆角
img-circle 添加 border-radius:50% 来让整个图片变成圆形
img-thumbnail 添加一些内边距(padding)和一个灰色的边框
img-responsive 图片响应式

1、img-rounded

<!doctype html> 
<html lang="en"> 
<head> 
  <!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码--> 
  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="Keywords" content="关键词一,关键词二"> 
  <meta name="Description" content="网站描述内容"> 
  <meta name="Author" content="Yvette Lau"> 
  <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> 
  <title>BootstrapDemo</title> 
  <!--css js 文件的引入--> 
  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
</head> 
  <body style="padding: 20px;"> 
    <div class = "container"> 
      <img src = "5.jpg" class="img-rounded" >    
    </div> 
  </body> 
</html>

.img-rounded{border-radius:6px;}

效果:

详解Bootstrap四种图片样式

2、img-circle

<body style="padding: 20px;"> 
  <div class = "container"> 
    <img src = "5.jpg" class="img-circle" >    
  </div> 
</body>

.img-circle{border-radius:50%;}

效果(因为本图片的宽高大小不同,所以呈现出椭圆,如果将width和height设置相同,那么会呈现出一个圆):

详解Bootstrap四种图片样式

3、img-thumbnail

<body style="padding: 20px;"> 
  <div class = "container"> 
    <img src = "5.jpg" class="img-thumbnail" >  
    <img src = "4.jpg" class="img-thumbnail" >  
    <img src = "3.jpg" class="img-thumbnail" >  
  </div> 
</body>

.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;
                  background-color:#FFF;border:1px solid #DDD;border-radius:4px;transition:all 0.2s ease-in-out;}

效果:

详解Bootstrap四种图片样式

4、img-responsize

<body style="padding: 20px;"> 
  <div class = "container" style = "width:150px;"> 
    <img src = "5.jpg" class="img-responsive" width="400px" >    
  </div> 
</body>

.img-responsive{display:block;max-width:100%;height:auto;}

效果(img中的width属性值被忽略):

详解Bootstrap四种图片样式

以上内容分步骤给大家介绍了Bootstrap四种图片样式的相关知识,希望大家喜欢。

Javascript 相关文章推荐
Javascript的一种模块模式
Sep 08 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
react中Suspense的使用详解
Sep 01 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
js实现三角形粒子运动
Sep 22 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 #Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 #Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 #Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 #Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 #Javascript
jQuery自动完成插件completer附源码下载
Jan 04 #Javascript
学习javascript面向对象 理解javascript对象
Jan 04 #Javascript
You might like
杏林同学录(六)
2006/10/09 PHP
初识php MVC
2014/09/10 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
全面分析Python的优点和缺点
2018/02/07 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
简单的命令查看安装的python版本号
2020/08/28 Python
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
八一建军节部队活动方案
2014/02/04 职场文书
学习礼仪心得体会
2014/09/01 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
2014小学年度工作总结
2014/12/20 职场文书
移除Selenium中window.navigator.webdriver值
2022/06/10 Python