BootStrap中的网格系统(Grid System)

Contents
[隐藏]

1.网格系统

在早期的BootStrap版本中,使用CSS中的row类(class)来创建水平行,使用spanx类(class)来创建垂直列,其中”spanx“中的x是一个数值,范围从1到12,例如span2span6之类。但是在后期的BootStrap版本(至少为3.0.0版本之后,3.0.0版本之前的没有测试)中,将spanx类替换成了col-md-x类,其中的x依旧是一个数值,范围从1到12,例如col-md-2col-md-6之类。

一个简单的例子如下:

 

需要注意的是,col-md-x中的x越大,列越宽。但x 必须是正整数,且值必须从 1 到 12。例如,如果有三个等宽的列,每个列都是 class="col-md-4",但是如果您想让第一个列比其他两个更大一些,第一个列可以使用 class="col-md-6",其他两个列使用 class="col-md-3"

另外,为了使页面美观,应该满足一行中的列的宽度x之和为12。例如,三个等宽的列,class="col-md-4",满足3*4=12;一个列为class="col-md-6",其他两个列使用 class="col-md-3",满足6+2*3=12。满足列宽和为12,可使一行中的所有列充满整个容器。

2.偏移列

同样,在旧版本中,偏移列的class为offsetx(x依旧为小于12的正整数),在新版本中,偏移列的class改为col-md-offset-xx依旧为小于12的正整数)。例如


 

在上述代码中,在第二列中添加了col-md-offset-4,使第二列偏移原始位置4列。

分享到:

发表评论