以下部分都是在<img>标签中操作
响应式图片
实验失败！已引入holder.js文件。data-src="holder.js/100x64时可以出现占位图。但当holder.js/100%x64时，不显示。
<div style="width:100%;height: 64px;display: block;">
<img data-holder-rendered="true" data-src="holder.js/100%x64" class="img-responsive" style="width:100%;height: 64px;display: block;" alt="100%x64" >
</div>找到原因了。极客学院wiki文档翻译有误。
正常情况下使用 .img-fluid类。自动扩充到父类窗体大小!
在补充说明holder.js使用情况。
如果按照百分比显示，不要使用极客学院网站代码上写的data-src="holder.js/100%x250"
正常使用应当是 data-src="holder.js/100px250" 注：p是英文百分比的缩写。坑爹！！！
图片形状
正常的<img>标签、圆角边、圆形、长宽比例变形的圆形、缩略图。
<img data-src="holder.js/100x100" alt="正常模式" >
<img data-src="holder.js/100x100" alt="圆角边" class="img-rounded">
<img data-src="holder.js/100x100" alt="圆形图" class="img-circle">
<img data-src="holder.js/200x100" alt="圆形图" class="img-circle">
<img data-src="holder.js/100x100" alt="带边框的原型图" class="img-thumbnail">对齐图片
使用浮动助手类或者文本对齐类可以实现图片的对齐。
PS：再讲col-xx-*的时候有讲过offset、push和pull。应该就是浮动助手类中的。
文本类，应当以text-xxxxx存在。
左右对齐：
翻看原版文档时发现问题！
具体操作中注意:v4使用类名 .pull-xs-left .而非 .pull-left ！！
具体操作中注意:v4使用类名 .pull-xs-left .而非 .pull-left ！！
浮动在父类的两测。当宽度不够容纳2个图片时，自动换行。
<div class="container">
<div class="row">
<div class="col-sm-8" >
<img data-src="holder.js/100x100" class="img-rounded pull-xs-left" alt="...">
<img data-src="holder.js/100x100" class="img-rounded pull-xs-right" alt="...">
<div>
</div>
</div>中间对齐：
<div class="container">
<div class="row">
<div class="col-sm-8" >
<img data-src="holder.js/100x100" class="img-rounded center-block" alt="...">
<img data-src="holder.js/100x100" class="img-rounded center-block" alt="...">
<div>
</div>
</div>当两个图片都居中时会另起一行。
文本对齐方式：
在外层DIV使用文本对齐类 .text-xs-center类。而非极客学院wiki翻译的text-center。
极客学院翻译仍然有误！
<div class="text-xs-center">
<img data-src="holder.js/100x100" class="img-rounded" alt="...">
</div>拓展一下，xs眼熟吧？sm lg 可以。但是当lg时，屏幕分辨率不够，则text-lg-center失效。
来源：oschina
链接：https://my.oschina.net/u/199513/blog/645042