栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > Bootstrap教程

Bootstrap教程(13)--图像和缩略图组

Bootstrap教程(13)--图像和缩略图组

1. 概述

图片比文字传达信息更加直观、更加具象,具备不可代替的意义。

必不可少的,Bootstrap也为图像提供了一定支持,本篇就来具体介绍下。

2. 响应式图像

通过给图像设置.img-responsive类,即可将图像设置为响应式图像,可以自动适应容器的大小。


Bootstrap logo
3. 图像样式

Bootstrap还为图像提供了三种常见的样式:

  1. .img-rounded:圆角图像
  2. .img-thumbnail:缩略图样式
  3. .img-circle:圆形样式

示例代码:

  	  

Bootstrap logo

Bootstrap logo

Bootstrap logo

对应效果如下,注意缩略图是有一个边框效果的。

4. 缩略图组

除了可以将单一图像设置为缩略图,还可以将一组图像都设置为缩略图样式,此时需要为图像外围容器设置.thumbnail类。

示例代码:

 		

Bootstrap logo

Bootstrap logo

Bootstrap logo

效果如下:

5. 小结

Bootstrap为图像和缩略图组提供了简单的样式类,主要是作为一个基础效果,其实还提供了一定的灵活度,程序开发人员可以在此基础上进一步定制。

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号