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;}
效果：
### 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设置相同，那么会呈现出一个圆)：
### 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;}
1.
效果：
### 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属性值被忽略)：
- 前言
- jQuery轮播图插件
- JS模拟事件操作
- JS闭包与变量
- JS绑定事件
- HTML5之file控件
- JavaScript的this词法
- JavaScript的this词法（二）
- JS this词法（三）
- JS检测浏览器插件
- JS拖拽组件开发
- number输入框
- Modernizr.js和yepnode.js
- DOM变化后事件绑定失效
- div和img之间的缝隙问题
- 详解JavaScript作用域
- bootstrap入门
- 表单验证（登录/注册）
- Bootstrap网格系统
- Bootstrap排版
- Bootstrap创建表单（一）
- Bootstrap表单（二）
- Bootstrap按钮
- Bootstrap图片
- Bootstrap字体图标(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜单
- Bootstrap按钮组
- Bootstrap按钮菜单
- Bootstrap输入框组
- Bootstrap导航元素
- Bootstrap导航栏
- sublimeText频频崩溃
- JQuery不同版本的差异（checkbox）
- Bootstrap面包屑导航、分页、标签、徽章
- Bootstrap警告
- Bootstrap进度条
- 前端的上传下载
- JS字符串的相关方法
- CSS3选择器（全）
- CSS3新增文本属性详述
- 利用CSS3实现图片切换特效
- CSS3新增颜色属性
- CSS3的border-radius属性详解
- JS创建对象几种不同方法详解
- JS实现继承的几种方式详述（推荐）
- CSS3响应式布局
- JS模块化开发(requireJS)
- 利用@font-face实现个性化字体
- 前端在html页面之间传递参数的方法
- CSS自动换行、强制不换行、强制断行、超出显示省略号
- 如何在Html中引入外部页面
- reactJS入门
- React组件生命周期
- 使用React实现类似快递单号查询效果
- ReactJS组件生命周期详述
- React 属性和状态详解