BootStrap中的网格系统(Grid System)

网格系统

在早期的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之类。

一个简单的例子如下:

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--防止中文乱码-->
<html>
<head>
<title>Bootstrap Grid System Example</title>
<link href="bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet"><!--根据自己的路径引入CSS文件-->
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h1>w3cschool.cc is a web design and development tutorial.</h1>
            </div>
        </div>
    </div>
</body>

 

需要注意的是,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,可使一行中的所有列充满整个容器。

偏移列

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

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--防止中文乱码-->
<html>
<head>
<title>Bootstrap Grid System Example</title>
<link href="bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet"><!--根据自己的路径引入CSS文件-->
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h1>w3cschool.cc is a web design and development tutorial.</h1>
            </div>
            <div class="col-md-2 col-md-offset-4">
                <h1>w3cschool.cc is a web design and development tutorial.</h1>
            </div>
        </div>   
    </div>
</body>

 

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

20 − 12 =

3 + 6 =