图片比文字传达信息更加直观、更加具象,具备不可代替的意义。
必不可少的,Bootstrap也为图像提供了一定支持,本篇就来具体介绍下。
2. 响应式图像通过给图像设置.img-responsive类,即可将图像设置为响应式图像,可以自动适应容器的大小。

3. 图像样式
Bootstrap还为图像提供了三种常见的样式:
- .img-rounded:圆角图像
- .img-thumbnail:缩略图样式
- .img-circle:圆形样式
示例代码:
对应效果如下,注意缩略图是有一个边框效果的。
除了可以将单一图像设置为缩略图,还可以将一组图像都设置为缩略图样式,此时需要为图像外围容器设置.thumbnail类。
示例代码:
效果如下:
Bootstrap为图像和缩略图组提供了简单的样式类,主要是作为一个基础效果,其实还提供了一定的灵活度,程序开发人员可以在此基础上进一步定制。



