在本章中，我们将学习 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. python爬爬爬之单网页html页面爬取

    python爬爬爬之单网页html页面爬取 作者:vpoet mail:vpoet_sir@163.com 注:随意copy 不用告诉我 #coding:utf-8 import urllib2 Re ...

  2. OpenstackUbuntu

    1,create user

  3. Linux 零碎知识点

    ln -s ../libs/ libs 在当前目录下建立一个符号链接文件libs,使它指向上一层目录的libs文件夹 关于su和su -的区别切换用户是可以使用su tom或者su - tom来实现, ...

  4. PHP-xml-1

    SimpleXML 解析xml 假设xml没有声明encoding默认使用utf-8进行解码.终于得到的数据编码为utf-8格式. 我猜想它内部实现了iconv(encoding='utf-8', ' ...

  5. Elasticsearch的javaAPI之percolator

    Elasticsearch的javaAPI之percolator percolator同意一个在index中注冊queries,然后发送包括doc的请求,返回得到在index中注冊过的而且匹配doc的 ...

  6. Web 开发中 9 个有用的提示和技巧

    在本文中,我们给出 9 个有用的 HTML.CSS 和 JavaScript 的技巧和提示,可能在做 Web 开发中经常会需要用到的,其中有几个是关于 HTML5 和 CSS3 的,如果你是一个前端开 ...

  7. vbox下安装 linux 64 bit出现“kernel requires an x86_64 cpu

        今天在vbox下安装linux 64bit出现"kernel requires an x86_64 cpu, but only detected "的错误,网上有很多文章介 ...

  8. JDK8环境变量配置相关问题

    1.右键选择 计算机→属性→高级系统设置→高级→环境变量 2.系统变量→新建 变量名:JAVA_HOME 变量值:(变量值填写你的jdk的安装目录,例如本人是 E:Javajdk1.7.0) 3.在系 ...

  9. .net 生成缩略图

    public static void CreateSmallImage(string minImageFullPath, System.Drawing.Image originalImage, int ...

  10. linux常用命令详解 （二）文件处理命令

    ◆ 文件处理命令:file.mkdir.grep.dd.find.mv.ls.diff.cat.ln: 系统信息存放在文件里,文件与普通的公务文件类似.每个文件都有自己的名字.内容.存放地址及其它一些 ...