Bootstrap排版基础样式和响应式图片-20140521

Bootstrap基础排版样式

.col-xs-*
//<768px用col-xs-*表示，在容器里定义它直接默认

.col-sm-*
>=768用col-sm-*表示，在容器里定义它直接默认

.col-md-*
>=970px用col-md-*表示，在容器里定义它直接默认

.col-lg-*
>=1200px用col-lg-*表示，在容器里定义它直接默认

//1 - 12是后面放在*号的问题，1最小12最大，在上面的基础样式中1可以放置12个
12就相当于百分之百的概念

这里是响应式图片的一些用法和需要注意到的地方

//响应式图片在这个样的情况下可以正常实现效果
<div class="col-xs-12">
    <img src="" class="响应式类">
</div>

//下面两种要是的情况下都没办法实现响应式图片的效果
<div class="固定了长宽">
    <img src="" class="响应式类">
</div>

<div class="col-xs-12">
    <img src="" class="固定了长宽">
</div>

相适应图片有一个特定的类，那么这个类在外面容器和图片本身定义了 固定的长宽参数的情况下是没有作用的，只有在容器里定义了基础样式，或者在图片内直接定义响应式的class才会有效果，所以这个大家要注意的就是，如果要把图片也做成响应式的图片的，就会比较的麻烦。