欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-12 21:31:12
...
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才会有效果,所以这个大家要注意的就是,如果要把图片也做成响应式的图片的,就会比较的麻烦。