BootStrap--响应式设计

标签：

响应式布局

　　响应式布局的基本结构为：

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6">
        </div>
        <div class="col-lg-4 col-md-6">
        </div>
        <div class="col-lg-4 col-md-6">
        </div>
    </div>
</div>

　　栅格系统通过定义容器的大小，然后将容器分为12等份调整内外边距结合媒体查询来实现

　　在栅格系统中可以组合class来实现不同分辨率的适配

　　class="container"是最外层的容器提供了对齐方式

　　class="row"定义一个列容器

　　class="col-xx-n"定义一个列，xx表示了不同的分辨率，n表示当前列占当前列容器的%

　　-lg-:在分辨率>1220px时生效

　　-md-:在分辨率>=992px时生效

　　-sm-:在分辨率>=768px时生效

　　-xs-:在分辩率小于768px时生效

　　假如我们有这样是一个列：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
    </div>
</div>

　　在我们的屏幕分辨率在768px以下时col-xs-12的样式起作用当前列占容器的100%

　　在我们的屏幕分辨率在1220px以上时col-lg-3的样式起作用当前列占容器的1/4

　　在我们的屏幕分辨率在992px以上且在1220px以下时col-md-4的样式起作用当前列占容器的1/3

　　在我们的屏幕分辨率在768px以上且在992px以下时col-sm-6的样式起作用当前列占容器的1/2

　　假如我们此时屏幕的分辨率为1300px此时col-sm-6、 col-md-4 、col-lg-3都是生效的此时就按照优先级的规则进行覆盖了，样式表的定义顺序为xs、sm、md、lg

　　可以通过col-xx-offset-n进行向右列的偏移

　　可以通过col-xx-push-n和col-xx-pull-n进行列移动push表示向右移动pull表示向左移动

　　假如有如下代码：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        1
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        2
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        3
        </div>
    </div>
</div>

　　当处在超大屏幕时明显右侧的1/4没有内容我们可以在row里面的第三个div设置col-lg-offset-3的class来让该元素向右移动1/4， 或者通过col-lg-push-3来实现

BootStrap--响应式设计

标签：

原文地址：http://www.cnblogs.com/shinhwazt/p/5982990.html