在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：

.img-rounded：添加 border-radius:6px 来获得图片圆角。

.img-circle：添加 border-radius:500px 来让整个图片变成圆形。

.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
</head>
<body>
<img src="/course/554b2aa0d7e0396d67b0a556/download02.png"class="img-rounded">
<img src="/course/554b2aa0d7e0396d67b0a556/download02.png"class="img-circle">
<img src="/course/554b2aa0d7e0396d67b0a556/download02.png"class="img-thumbnail">
</body>
</html>

响应式图片

在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

如果需要让使用了 .img-responsive 类的图片水平居中，请使用.center-block 类，不要用 .text-center。

SVG 图像和 IE 8-10

在 Internet Explorer 8-10 中，设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题，在出问题的地方添加width: 100% \9; 即可。Bootstrap 并没有自动为所有图像元素设置这一属性，因为这会导致其他图像格式出现错乱。

图片形状

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。

跨浏览器兼容性

请时刻牢记：Internet Explorer 8 不支持 CSS3 中的圆角属性。

类 描述
.img-rounded 为图片添加圆角 (IE8 不支持)
.img-circle 将图片变为圆形 (IE8 不支持)
.img-thumbnail 缩略图功能
.img-responsive 图片响应式 (将很好地扩展到父元素)

bootstrap注意事项（七）图片的更多相关文章

  1. Bootstrap入门（七）组件1：字体图标

    Bootstrap入门(七)组件1:字体图标   包括200个来自 Glyphicon Halflings 的字体图标,允许 Bootstrap 免费使用. 部分可用图标截图: 所有图标都需要一个基类 ...

  2. 第二百三十四节，Bootstrap表单和图片

    Bootstrap表单和图片 学习要点: 1.表单 2.图片 本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一．表单 Bootstrap ...

  3. MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件

    场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...

  4. bootstrap学习笔记<七>（图标，图像）

    图像 bootstrap为图像预加载提供了很简洁的样式.(CDN:http://placehold.it/140x140:) PS:该CDN链接后的140x140可以根据网站需要更换合适的尺寸.例如: ...

  5. bootstrap注意事项（一）

    1.移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备. 现在 ...

  6. Bootstrap框架下实现图片切换

    准备图片,把相关记录添加至数据库表中: 创建一个存储过程,获取所有记录: 在ASP.NET MVC专案中,部署Bootstrap环境...... 然后创建一个model: using System; ...

  7. bootstrap file input 多图片上传编辑THINKPHP5

    {layout name="layout" title="文章添加" /} <form id="defaultForm" role=& ...

  8. Bootstrap入门八：图片

    1.响应式图片 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.其实质是为图片设置了 max-width: 100%;. height ...

  9. bootstrap基础学习七篇

    bootstrap图片 Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle ...

随机推荐

  1. 二探ListView

    使用draw9patch 打开内置terminal 输入CD C:\Users\Gaby\AppData\Local\Android\sdk 在该目录下输入draw9patch 导入图片,开始绘制 本 ...

  2. UbuntuOpenStack core componennts

    <1,keystone安装配置> 1,yum -y install openstack-keystone python-keystoneclient; 2,配置实用mysql存储keyto ...

  3. java logger级别

    typedef enum android_LogPriority { ANDROID_LOG_UNKNOWN = 0, ANDROID_LOG_DEFAULT,    /* only for SetM ...

  4. 去除express.js 3.5中报connect.multipart() will be removed in connect 3.0的警告

     1 $ node app.js  2 connect.multipart() will be removed in connect 3.0  3 visit https://github.com/s ...

  5. jmx使用应该注意的基本规范

    1.标准MBean 名称必需是在要监控的类名后面加上“MBean ”. 2.监控的类和MBean 接口必需在同一包下,也可以理解为注册的接口名字必须以MBean结尾,接口实现类比接口名字少了MBean ...

  6. .net通用权限框架B/S(一)

    一直做软件实施,用过一些二次开发平台,最近看了一些大神写的框架,于是参考写了一个B/S通用权限框架,项目使用MVC4+EF5+EASYUI(.net framework4),开发环境vs2010+sq ...

  7. CentOS用gparted实现无损调整磁盘分区大小

    作者: sheldon 测试服务器硬盘挂载在/usr下的分区大小只有10G,随着必须软件都安装在这个目录下,这个分区已经满额,给分区扩容刻不容缓,window下有PQ分区工具,Linux下也有gpar ...

  8. UVA 529 - Addition Chains，迭代加深搜索+剪枝

    Description An addition chain for n is an integer sequence  with the following four properties: a0 = ...

  9. ckplayer 网页视频播放

    最近做文件上传,可以上传的资源有图片,也有视频,在显示列表中点击视频播放图片(图1),需要弹出播放窗口(图2),播放视频.具体效果画面如下: 图1 图2:播放窗口 实现该功能使用的是ckplayer播 ...

  10. Linux man 后面的数字含义及作用

    Linux的man很强大,该手册分成很多section,使用man时可以指定不同的section来浏览,各个section意义如下: 1 Executable programs or shell co ...