标签：
<!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;}
效果：
<body style="padding: 20px;">
<div class = "container">
<img src = "5.jpg" class="img-circle" >
</div>
</body>
.img-circle{border-radius:50%;}
效果(因为本图片的宽高大小不同，所以呈现出椭圆，如果将width和height设置相同，那么会呈现出一个圆)：
<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> background-color:#FFF;border:1px solid #DDD;border-radius:4px;transition:all 0.2s ease-in-out;}
<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属性值被忽略)：
标签：
原文地址：http://blog.csdn.net/liuyan19891230/article/details/50448871
