学到了吗（bootstraping方法）Bootstrap菜鸟教程，Bootstrap教程:响应式/圆角/圆形/缩略图图像设置，Bootstrap教程:响应式/圆角/圆形/缩略图图像设置，
Bootstrap在网页制作中图像也是经常用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：
1、img-responsive：响应式图片，主要针对于响应式设计 2、img-rounded：圆角图片 3、img-circle：圆形图片 4、img-thumbnail：缩略图片
使用方法：
使用方法非常简单，只需要在<img>标签上添加对应的类名，如下代码：
<imgalt="140x140"src="http://placehold.it/140x140"><imgclass="img-rounded"alt="140x140"src="http://placehold.it/140x140"><imgclass="img-circle"alt="140x140"src="http://placehold.it/140x140"><imgclass="img-thumbnail"alt="140x140"src="http://placehold.it/140x140"><imgclass="img-responsive"alt="140x140"src="http://placehold.it/140x140">
响应式图片
通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。
.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：
<divclass="container"><h2>响应式图片</h2><p> .img-responsive类让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果):</p><imgsrc="cinqueterre.jpg"class="img-responsive"alt="Cinque Terre"width="500"height="236"></div>
设置图片大小：
由于样式没有对图片做大小上的样式限制，所以在实际使用的时候，需要通过其他的方式来处理图片大小。比如说控制图片容器大小。（注意不可以通过css样式直接修改img图片的大小，这样操作就不响应了）
注意：
对于圆角图片和圆形图片效果，因为是使用了CSS3的圆角样式来实现的，所以注意对于IE8以及其以下版本不支持，是没有圆角效果的。
Bootstrap框架为了大家更好的维护图像的样式，同样将这部分样式独立出来： 1、LESS版本，可以查阅scaffolding.less 2、Sass版本，可以查阅_scaffolding.scss 大家可以修改其中之一，重新编译就可以得到自己需要的图片样式效果。
(window.slotbydup = window.slotbydup || []).push({
id: "u6835052",
container: "_96bek913mdb",
async: true
});
本文链接：http://blog.sauo.top/?id=476 感谢分享!
