首页 > 代码库 > BootStrap--响应式设计

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--响应式设计