在本章中，我们将学习 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. [Leetcode][Python]54: Spiral Matrix

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 54: Spiral Matrixhttps://leetcode.com/p ...

  2. Android使用Google推荐的联网框架Volley,让连接网络更加简单

    大家好.随着技术的进步.科技的发达,非常少有应用是单机的了,大部分都须要联网訪问server,曾经我们都用 httpclient和httpurlconnection,感觉是不是非常麻烦,而Google ...

  3. oracle子查询

    子查询:在一个查询的内部包含另外一个查询. 普通子查询 -- 查询出比7654工资还高的所有雇员的信息 select * from emp e where e.sal > (select sal ...

  4. 用cssText属性批量操作样式

    给一个HTML元素设置css属性,如 var head= document.getElementById("head"); head.style.width = "200 ...

  5. PHP自学4——通过函数将数组数据输出到html的Table标签中（使用函数的例子）

    这一节其实说实话并没有什么干货,不过为了防止PO主的懒癌的复发,还是坚持放一点东西,即使是内容和长度都令人发指.这一节通过一个函数来实现将数组中的内容输出html的Table标签当中显示. 函数文件— ...

  6. js触摸屏案例

    js 手机端触发事事件.javascript手机端/移动端触发事件   处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: 1 2 3 4 touchstart:  ...

  7. 在一个apk中调用另外一个apk中的activity

    今天忽然想到如果要在一个activity中调用另外一个activity该怎么办呢? 感觉这个应该比较简单,应为activity的启动方式就两种:显式启动.隐式启动: 显式启动的话肯定不行,那就只能使用 ...

  8. JS取地址栏参数的两种方法

    第一种方法: function GetQueryString(name){ var reg = new RegExp("(^|&)"+ name +"=([^&a ...

  9. jquery 实现横向滑动自动切换源码（同时显示多张图片）

    html代码: <!doctype html> <html lang="en"> <head> <meta charset="U ...

  10. HTML5新元素

    <figure> 标签规定独立的流内容(图像.图表.照片.代码等等). <figure> 元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的.如果被删除,则不应对文 ...