欢迎使用WAFⅡ帮助系统

12格列布局

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
3
3
3
3
3
9
6
6
5
7
2
10
1
11
12

演示功能说明

    演示功能说明参照Bootstrap，为列布局提供固定的12个CSS宽度，形成12格列布局列布局的宽度可以通过colWidth属性控制，也可以通过tagClass来控制，12栅格通过tagClass来控制宽度，如果提供的默认的12格布局不满足需求，可以通过colWidth来控制默认的12栅格不包含单元格之间的间隙,如果需要间隙，需要给列布局的tagClass属性增加gap,就像本例子中演示的这些一样。12栅格只需要一个布局中的所有列数字加起来等于12就可以，class的规则是从span1到span12，默认的各个宽度为：
    .span1{width:8.333333333%;} .span2{width:16.666666666%;} .span3{width:25%;}
    .span4{width:33.333333333%;} .span5{width:41.666666666%;} .span6{width:50%;}
    .span7{width:58.333333333%;} .span8{width:66.666666666%;} .span9{width:75%;}
    .span10{width:83.333333333%;} .span11{width:91.666666666%;} .span12{width:100%;}
    加上间隙之后的各个宽度：
    .span1{width:6.382978723%;} .span2{width:14.89361702%;} .span3{width:23.404255317%;}
    .span4{width:31.914893614%;} .span5{width:40.425531911%;} .span6{width:48.93617020799999%;}
    .span7{width:57.446808505%;} .span8{width:65.95744680199999%;} .span9{width:74.468085099%;}
    .span10{width:82.97872339599999%;} .span11{width:91.489361693%;} .span12{width:99.99999998999999%;}