6.2.1 网格布局基础

发表于 更新于 分类于 ， ， Waline： 本文字数： 8.3k 阅读时长 ≈ 8 分钟

6.2.1 网格布局基础

网格布局的基本规则

网格布局的基本规则为:

  1. 通过为HTML元素指定class="row"来定义行。在class="row"的HTML元素内通过指定class="col-xx-N"来定义单元格。其中xx可换成xs、sm、md、lg,它们代表了前面介绍的4挡浏览器的viewport宽度,表明对特定宽度的浏览器viewport起作用。N可换为1到12的整数,表明该单元格占几列的宽度。提示:Bootstrap非常聪明,它避免了传统CSS布局中通过多少像素指定宽度的不足;Bootstrap将整个行的宽度分成12等分,开发者只要通过col-xx-N的N指定占多少等分即可确定该单元格的宽度,这样非常方便。
  2. class="row"的HTML元素必须放在class="container"或class="container-fluid"的HTML元素内;class="col-xx-N"的HTML元素必须放在class="row"的元素内;其他被布局的HTML元素必须放在class="col-xx-N"的HTML元素内。
  3. 通过为”单元格(class="col-xx-N")”元素设置padding属性可设置单元格与单元格之间的间隔。通过为”行(class="row")”元素设置负的margin可以抵消掉为”容器(class="container")”元素设置的padding,也就间接将”行(row)元素”所包含的”单元格(class="col-xx-N")”的padding抵消掉了。

程序示例

下面代码示范了网格布局的基本用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- 设置viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 网格 </title>
    <!-- 引入bootstrap的样式 -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
    <style type="text/css">
        /* 设置网格各行之间的样式 */

        .row {
            margin-bottom: 20px;
        }

        /* 设置网格各单元格之间的样式 */

        [class*="col-"] {
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #eee;
            background-color: rgba(86, 61, 124, .15);
            border: 1px solid #ddd;
            border: 1px solid rgba(86, 61, 124, .2);
        }
    </style>
</head>

<body>
    <!-- 网格布局的根容器 -->
    <div class="container">
        <div class="row">
            <div class="col-lg-8">第一行（1）.col-lg-8</div>
            <div class="col-lg-4">第一行（2）.col-lg-4</div>
        </div>
        <div class="row">
            <div class="col-lg-4">第二行（1）.col-lg-4</div>
            <div class="col-lg-4">第二行（2）.col-lg-4</div>
            <div class="col-lg-4">第二行（3）.col-lg-4</div>
        </div>
        <div class="row">
            <div class="col-lg-5">第三行（1）.col-lg-5</div>
            <div class="col-lg-7">第三行（2）.col-lg-7</div>
        </div>
        <div class="row">
            <div class="col-lg-9">第四行（1）.col-lg-9</div>
            <div class="col-lg-3">第四行（2）.col-lg-3</div>
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

在该页面代码中定义了4行:

  • 在第一行内定义2个单元格,其中第一个单元格占8列的宽度,第二个单元格占4列的宽度;
  • 在第二行内定义了3个单元格,每个单元格占4列的宽度。
  • 在第三行内定义了2个单元格,第一个单元格占5列的宽度,第二个单元格占7列的宽度。
  • 在第四行内定义了2个单元格,第一个单元格占9列的宽度,第二个单元格占3列的宽度。

在该页面代码中指定单元格宽度时使用了”lg“挡,表明这些宽度定义仅当浏览器viewport的宽度大于等于1200px时才发挥作用。

在Bootstrap的网络布局中原本并没有边框、背景色,行与行之间也没有间距,本节的示例为了让读者更好地看清各行、各单元格的分布,因此通过额外的CSS样式为它们增加了边框、背景色以及行与行之间的间距。
当浏览器viewport大于1200px,但.container容器的宽度并不会占满整个容器,它总是保持固定的宽度:1170px。
如果将代码中容器的class属性值改为container-fluid,此时整个网格布局的宽度将总是占满整个浏览器viewport。
如果对浏览器的宽度进行调整,则只要调整到宽度小于1200px,浏览器viewport就不再是lg尺寸了,此时将会看到页面堆叠效果。

不同viewport宽度下的网格系统行为

viewport宽度 网格系统行为
超小 总是水平排列
小 当viewport宽度大于等于768px时,以水平方式显示,否则以堆叠方式显示
中等 当viewport宽度大于等于992px时,以水平方式显示,否则以堆叠方式显示
大 当viewport宽度大于等于1200px时,以水平方式显示,否则以堆叠方式显示

不同viewport宽度下的.container容器的最大宽度

viewport宽度 .container容器的最大宽度
超小 等于容器宽度
小 最大宽度等于750px
中等 最大宽度等于970px
大 最大宽度等于1170px

不同viewport宽度下的类名前缀

viewport 类名前缀
超小 .col-xs-
小 .col-sm-
中等 .col-md-
大 .col-lg-

不同viewport宽度下的每列的最大宽度

viewport 每列的最大宽度
超小 自动
小 约等于62px
中等 约等于81px
大 约等于97px

对于上面示例,如果希望该页面中行内的单元格在浏览器viewport宽度≥992px时也能水平排列,不堆叠显示,则可将该页面代码改为如下形式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 网格 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
    <style type="text/css">
        .row {
            margin-bottom: 20px;
        }

        /* 设置单元格样式 */
        [class*="col-"] {
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #eee;
            background-color: rgba(86, 61, 124, .15);
            border: 1px solid #ddd;
            border: 1px solid rgba(86, 61, 124, .2);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-8">第一行（1）.col-lg-8</div>
            <div class="col-lg-4 col-md-4">第一行（2）.col-lg-4</div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-4">第二行（1）.col-lg-4</div>
            <div class="col-lg-4 col-md-4">第二行（2）.col-lg-4</div>
            <div class="col-lg-4 col-md-4">第二行（3）.col-lg-4</div>
        </div>
        <div class="row">
            <div class="col-lg-5 col-md-5">第三行（1）.col-lg-5</div>
            <div class="col-lg-7 col-md-7">第三行（2）.col-lg-7</div>
        </div>
        <div class="row">
            <div class="col-lg-9 col-md-9">第四行（1）.col-lg-9</div>
            <div class="col-lg-3 col-md-3">第四行（2）.col-lg-3</div>
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

可以看到,指定了单元格的CSS类名,同时指定了col-lg-N和col-md-N两种样式,这表明当浏览器viewport宽度≥992px以及≥1200px时都能以水平方式显示。
此时即使将浏览器宽度调为小于1200px(只要大于992px),依然可以看到行内各单元格水平排列,如图6.7所示。

同理,如果希望该页面中行内的单元格总能水平排列,不堆叠显示,则可为表示单元格的<div>元素指定如下class属性值:
col-lg-9 col-md-9 col-sm-g col-xs-g

上面一共指定了4个class名,对lg、md、sm和xs这4种viewport都会起作用,这样就可以覆盖所有viewport尺寸。
该页面的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 网格 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
    <style type="text/css">
        .row {
            margin-bottom: 20px;
        }

        [class*="col-"] {
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #eee;
            background-color: rgba(86, 61, 124, .15);
            border: 1px solid #ddd;
            border: 1px solid rgba(86, 61, 124, .2);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">第一行（1）.col-lg-8</div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">第一行（2）.col-lg-4</div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">第二行（1）.col-lg-4</div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">第二行（2）.col-lg-4</div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">第二行（3）.col-lg-4</div>
        </div>
        <div class="row">
            <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">第三行（1）.col-lg-5</div>
            <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">第三行（2）.col-lg-7</div>
        </div>
        <div class="row">
            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">第四行（1）.col-lg-9</div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">第四行（2）.col-lg-3</div>
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>