![Bootstrap Web设计与开发实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/609/26943609/b_26943609.jpg)
上QQ阅读APP看书,第一时间看更新
4.4 Bootstrap图片
本节我们简单介绍一下Bootstrap框架中关于图片样式的内容,Bootstrap框架定义了三种图片样式,分别为.img-rounded类、.img-circle类和.img-polaroid类,下面看一段代码示例。
【代码4-28】是一个应用图片样式的设计(详见源代码ch04目录中ch04.image.html文件):
01 <div class="bs-docs-example bs-docs-example-images"> 02 <img data-src="../assets/js/holder/holder.js/90x90" class="img-rounded"> 03 <img data-src="../assets/js/holder/holder.js/90x90" class="img-circle"> 04 <img data-src="../assets/js/holder/holder.js/90x90" class="img-polaroid"> 05 </div>
其页面效果如图4.28所示。
![](https://epubservercos.yuewen.com/D11277/15367247505324306/epubprivate/OEBPS/Images/Figure-0074-0061.jpg?sign=1739259510-74zgT1b7YJ9SWk4eVyFCLuXPHpMwN4dp-0-54348357173e4eb34b5b8a2a530488b0)
图4.28 图片样式