Bootstrap第二部分：全局CSS样式-图片样式
.img-rounded 圆角图片
.img-circle 圆形图片
.img-thumbnail 缩略图片
.img-responsive响应式图片
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>Bootstrap 101 Template</title> 8 9 <!-- Bootstrap --> 10 <link href="css/bootstrap.css" rel="stylesheet"> 11 12 <!--[if lt IE 9]> 13 <script src="js/html5shiv.min.js"></script> 14 <script src="js/respond.min.js"></script> 15 <![endif]--> 16 </head> 17 <body> 18 <h3>圆角图片</h3><!--这个效果是在IE8以下是实现不出来的--> 19 <img src="img/1.jpg" class="img-rounded"> 20 <img src="img/2.jpg" class="img-rounded"> 21 <img src="img/3.jpg" class="img-rounded"> 22 <img src="img/4.jpg" class="img-rounded"> 23 24 <h3>圆形图片</h3> 25 <img src="img/1.jpg" class="img-circle"> 26 <img src="img/2.jpg" class="img-circle"> 27 <img src="img/3.jpg" class="img-circle"> 28 <img src="img/4.jpg" class="img-circle"> 29 30 <h3>以下是缩略图</h3> 31 <img src="img/1.jpg" class="img-thumbnail"> 32 <img src="img/2.jpg" class="img-thumbnail"> 33 <img src="img/3.jpg" class="img-thumbnail"> 34 <img src="img/4.jpg" class="img-thumbnail"> 35 <h3>响应式图片</h3> 36 <img src="img/1.jpg" class="img-responsive"> 37 <img src="img/2.jpg" class="img-responsive"> 38 <img src="img/3.jpg" class="img-responsive"> 39 <img src="img/4.jpg" class="img-responsive">