图像在网页制作中也是常要用到的元素,在Bootstrap框架中对于图像的样式风格提供以下几种风格:
1、img-responsive:响应式图片,主要针对于响应式设计
2、img-rounded:圆角图片
3、img-circle:圆形图片
4、img-thumbnail:缩略图片
使用方法:
使用方法非常简单,只需要在标签上添加对应的类名,
设置图片大小:
由于样式没有对图片做大小上的样式限制,所以在实际使用的时候,需要通过其他的方式来处理图片大小。比如说控制图片容器大小。(注意不可以通过css样式直接修改img图片的大小,这样操作就不响应了)
注意:
对于圆角图片和圆形图片效果,因为是使用了CSS3的圆角样式来实现的,所以注意对于IE8以及其以下版本不支持,是没有圆角效果的。
Bootstrap框架为了大家更好的维护图像的样式,同样将这部分样式独立出来:
1、LESS版本,可以查阅scaffolding.less
2、Sass版本,可以查阅_scaffolding.scss
大家可以修改其中之一,重新编译就可以得到自己需要的图片样式效果。