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