Bootstrap排版基础样式和响应式图片-20140521
程序员文章站
2022-07-12 21:31:12
...
Bootstrap基础排版样式
这里是响应式图片的一些用法和需要注意到的地方
相适应图片有一个特定的类,那么这个类在外面容器和图片本身定义了 固定的长宽参数的情况下是没有作用的,只有在容器里定义了基础样式,或者在图片内直接定义响应式的class才会有效果,所以这个大家要注意的就是,如果要把图片也做成响应式的图片的,就会比较的麻烦。
.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才会有效果,所以这个大家要注意的就是,如果要把图片也做成响应式的图片的,就会比较的麻烦。