在本章中，我们将学习 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. POJ 3522 Slim Span

    题目链接http://poj.org/problem?id=3522 kruskal+并查集,注意特殊情况比如1,0 .0,1.1,1 #include<cstdio> #include& ...

  2. N１必备外来语

    201412: キャリア: ノルマ:(normal)定额,劳动基本定额. チーフ: コスト: バンド:[英] band;皮带,腰带:吹奏乐团,轻音乐乐团(演奏者の一団.楽団.楽隊):营居群 [2014 ...

  3. Atom编辑器快捷键大全

    文件切换 ctrl-shift-s 保存所有打开的文件cmd-shift-o 打开目录cmd-\ 显示或隐藏目录树ctrl-0 焦点移到目录树目录树下,使用a,m,delete来增加,修改和删除cmd ...

  4. 关于各种排列（dfs）

    代码一:数字有重复: #include <cstdio> ],arr[]={,,,}; void dfs(int v){ if(v >= n){ ;i<n;i++) print ...

  5. SHUTDOWN: Active processes prevent shutdown operation

    在使用shutdown immediate关闭数据库时hang住,查看alert 日志,遭遇了SHUTDOWN: Active processes prevent shutdown operation ...

  6. swift Dictionary 字典

    // //  main.swift //  字典 // //  Created by zhangbiao on 14-6-15. //  Copyright (c) 2014年 理想. All rig ...

  7. 整理HTML的一些基础

    HTML,超文本标记语言(HyperText Markup Language) 超文本:指页面内可以包含图片.链接.音乐.程序等非文字元素 标记:页面的由各种标签(标记)组成,文本有隐藏的文本标签 H ...

  8. 异步消息处理机制——Handler用法

    Handler 1. Message Messsge是线程之间传递的消息,它可以在内部携带少量的信息,用于在不同线程之间交换数据,Message的what字段,除此之外还可以使用arg1和arg2字段 ...

  9. iOS开发之性能优化

    1.避免过于庞大的XIB 当加载XIB的时候把所有的东西都放在了内存里,包括任何的图片:如果有一个不会即刻用到的view,就会浪费宝贵的内存资源了. 当加载一个引用了图片或者声音资源的nib时,nib ...

  10. TCP/IP详解之：广播和多播

    第12章 广播和多播 广播是将数据报发送到网络中的所有主机(通常是本地相连的网络): 多播是将数据报发送到网络的一个主机组: 这两个概念的基本点在于当收到送往上一个协议栈的数据帧时采用不同类型的过滤. ...