网格系统 · Bootstrap Metro UI CSS 中文版

默认网格系统

    <div class="grid">
        <div class="row">
            <div class="spanN">...</div>
            ...
            <div class="spanN">...</div>
        </div>
    </div>

网格没有max-width值和父容器设置100%. 单元格都具有从span1到span12这样的类名spanN。类spanN设置了margin-left等于20px和margin-bottom等于5px.

单元格尺寸

N	单元格类名	单元格宽度
1	span1	60px
2	span2	140px
3	span3	220px
4	span4	300px
5	span5	380px
6	span6	460px
7	span7	540px
8	span8	620px
9	span9	700px
10	span10	780px
11	span11	860px
12	span12	940px

类spanN可以用在任何标签上，用来设置宽度。

例如

span1

span2

span3

span4

span5

span6

span7

span8

span9

span10

网格的嵌套

你可以在网格中嵌套网格

    <div class="grid">
        <div class="row">
            <div class="spanN">
                <div class="row">
                    <div class="spanN">
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div>

例如

主网格

子网格1

子网格2

子网格3

子网格1

子网格2

主网格

偏移

offset1

offset2

offset3

offset4

offset5

offset6

offset7

offset8

offs9

偏移尺寸

N	单元格类名	单元格宽度
1	offset1	80px
2	offset2	160px
3	offset3	240px
4	offset4	320px
5	offset5	400px
6	offset6	480px
7	offset7	560px
8	offset8	640px
9	offset9	720px
10	offset10	800px
11	offset11	880px
12	offset12	960px

类名offsetN可以用来给任何标签设置margin-left的值。