详解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 相关文章推荐
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
javascript实现2048游戏示例
May 04 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 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
PHP中PDO事务处理操作示例
2018/05/02 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
js自带函数备忘 数组
2006/12/29 Javascript
js 替换
2008/02/19 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
React中的render何时执行过程
2018/04/13 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
js实现小时钟效果
2020/03/25 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
win与linux系统中python requests 安装
2016/12/04 Python
python 异或加密字符串的实例
2018/10/14 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
文秘专业应届生求职信范文
2013/11/14 职场文书
小学生操行评语
2014/04/22 职场文书
健康家庭事迹材料
2014/05/02 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang