蓝蓝站点

Java读书笔记

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

6.2.4 单元格偏移

Bootstrap 提供了.col-xx-offset-N 来控制单元格向右偏移,其中xx 表示xs、sm、md、lg这4个viewport的尺寸,N表示1到12之间的整数,即向右偏移的列数量。例如.col-md-offset-4表示对md尺寸的viewport起作用,将该单元格向右偏移4列。

程序示例

下面的页面代码示范了列偏移的效果。

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
<!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-md-3">.col-md-3</div>
            <!-- 占三列向右偏移3列 -->
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        </div>
        <div class="row">
            <!-- 占5列,向右偏移2列 -->
            <div class="col-md-5 col-md-offset-2">.col-md-5 .col-md-offset-2</div>
            <div class="col-md-3 col-md-offset-1">.col-md-3 .col-md-offset-1</div>
        </div>
        <div class="row">
            <!-- 在中等md视图下占6列偏移3列,在小视图下占8列,偏移2列 -->
            <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">.col-md-6 .col-md-offset-3 .col-sm-offset-2</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>

在该代码中定义了3行,其中对第一行的第二个单元格指定偏移3列;

  • 第二行的第一个单元格偏移2列,第二个单元格偏移1列;
  • 第三行只定义了一个单元格,且该单元格
    • 在md尺寸的viewport中宽6列、偏移3列;
    • 在sm尺寸的viewport中宽8列、偏移2列
    • 可见第三行支持响应式布局。

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

6.2.5 单元格排序

Bootstrap提供了.col-xx-push-N、.col-xx-pull-N来控制列排序,其中,
.col-xx-push-N表示让单元格向右浮动,xx表示xs、sm、md和lg等尺寸,N表示1到12的整数,表示浮动几列;
对应地,.col-xx-pull-N表示让单元格向左浮动。

看如下示例代码:

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
58
59
60
61
62
<!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-sm-3">（1）.col-md-3</div>
            <div class="col-sm-3">（2）.col-md-3</div>
            <div class="col-sm-3">（3）.col-md-3</div>
            <div class="col-sm-3">（4）.col-md-3</div>
        </div>
        <div class="row">
            <!-- 在sm宽度下占3列,并向左移动三列 -->
            <div class="col-sm-3 col-sm-pull-3">（1）.col-md-3</div>
            <div class="col-sm-3">（2）.col-md-3</div>
            <div class="col-sm-3">（3）.col-md-3</div>
            <div class="col-sm-3">（4）.col-md-3</div>
        </div>
        <div class="row">
            <!-- 在sm宽度下占3列,并向右浮动3列 -->
            <div class="col-sm-3 col-sm-push-3">（1）.col-md-3</div>
            <div class="col-sm-3">（2）.col-md-3</div>
            <div class="col-sm-3">（3）.col-md-3</div>
            <div class="col-sm-3">（4）.col-md-3</div>
        </div>
        <div class="row">
            <!-- 推开3列,向右浮动3列 -->
            <div class="col-sm-3 col-sm-push-3">（1）.col-md-3</div>
            <!-- 向左浮动3列 -->
            <div class="col-sm-3 col-sm-pull-3">（2）.col-md-3</div>
            <div class="col-sm-3">（3）.col-md-3</div>
            <div class="col-sm-3">（4）.col-md-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行,其中第一行包含4个单元格,每个单元格宽度为3列,因此它们正好平分12列,我们可以把它们当成标准与后面的行进行对比。
第二行的第一个单元格被指定了col-sm-pull-3,这意味着第一个单元格将会向左浮动3列。
第三行的第一个单元格被指定了col-sm-push-3,这意味着第一个单元格将会向右浮动3列,因此该行的第一个单元格将会与第二个单元格重叠在一起。
第四行的第一个单元格被指定了col-sm-push-3,这意味着第一个单元格将会向右浮动3列,第二个单元格被指定了col-sm-pull-3,这意味着第二个单元格将会向左浮动3列,这样该行的第一个和第二个单元格将会交换位置。

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

6.2.3 响应式列重置

很多时候,某个单元格内的内容比较多,因此该单元格就会比其他单元格高。如果我们使用响应式布局来管理这些单元格,就可能造成问题。看如下代码:

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
<!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-xs-6 col-sm-3">.col-xs-6 .col-sm-3
                <br>该格比其他格高.</div>
            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-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个单元格:对于xs尺寸的viewport,这4个单元格每个单元格占6列的宽度,需要分2行显示;对于sm及更大尺寸的viewport,这4个单元格每个单元格占3列宽度,因此它们可以显示在一行之内。
上面4个单元格中第一个单元格的内容较多,因此它会比其他单元格更高一些。当这些单元格显示为一行时,基本上问题不大。但如果在xs尺寸的viewport中浏览该页面,这4个单元格会自动分成2行,此时该页面的效果如图6.9所示。
图6.9所示的效果显得特别丑陋,为了让第二行内所有单元格整齐地排列,需要对第二列使用列重置,Bootstrap 使用.clearfix 样式执行列重置。但该页面只需要对xs尺寸的viewport使用列重置,因此还应该结合使用.visible-xs-block 样式。使用该样式后,只有在xs尺寸的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
<!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-xs-6 col-sm-3">.col-xs-6 .col-sm-3
                <br>该格比其他格高.</div>
            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
            <!-- 增加一个只对xs尺寸viewport起作用的clearfix -->
            <div class="clearfix visible-xs-block"></div>
            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-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>

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

6.2.2 多余的列另起一行

Bootstrap的每行被分成12等分,如果用户在同一行内指定的所有单元格宽度加起来超过了12,则超过部分的单元格将会自动换行。例如如下代码:

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
<!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-sm-9 col-md-9 col-lg-9">第一行（1）.col-xx-9</div>
            <div class="col-sm-4 col-md-4 col-lg-4">第一行（2）.col-xx-4
                <br>由于 9 + 4 = 13 &gt; 12, 因此该单元格将会自动另起一行</div>
            <div class="col-sm-6 col-md-6 col-lg-6">第一行（3）.col-xs-6
                <br>
            </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>

该示例定义了一行,该行内第一个单元格占9列宽度,第二个单元格要占4列宽度,这样两个单元格加起来就超过了12列,因此第二个单元格会自动换行。

发表于 更新于 分类于 ， ， 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>

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

6.2 网格布局

什么是网格布局

网格布局是Bootstrap提供的一套页面布局系统,它的基本思路是:将整个网页分为N行×M列的网格(M最大为12),其他HTML元素都应该放在特定的单元格内。与此同时,这套网格布局还结合了媒体查询(Media Query)机制,因此可以支持响应式布局。

网格布局的容器

Bootstrap要求将网格布局放在一个特定的容器内,这个容器通常应该是class为.container或.container-fluid的div元素,.container和.container-fluid是Bootstrap提供的两个CSS类选择器的名称。

  • .container:用于固定宽度并支持响应式布局的容器。
  • .container-fluid:用于占领viewport宽度的100%的容器。

.container和.container-fluid的区别

.container:支持响应式布局,它根据浏览器viewport的宽度,按768px、992px、1200px将viewport分成4挡。

  • 当浏览器viewport 的宽度小于768px 时,.container 容器使用最大宽度,效果与.container-fluid一样。
  • 当浏览器viewport 的宽度大于等于768px时,.container 容器的宽度固定为750px。而.container-fluid容器的宽度则总是等于浏览器viewport的宽度。
  • 当浏览器viewport 的宽度大于等于992px时,.container 容器的宽度固定为970px。而.container-fluid容器的宽度则总是等于浏览器viewport的宽度。
  • 当浏览器viewport 的宽度大于等于1200px 时,.container 容器的宽度固定为1170px。而.container-fluid容器的宽度则总是等于浏览器viewport的宽度。

一般来说,使用.container-fluid时,容器宽度会比使用.container时的容器宽度略宽。而且由于padding等属性的原因,这两种容器不能互相嵌套。

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

6.1 Bootstrap

Bootstrap其实是一个CSS库,因此下载和安装Bootstrap的重点是引入CSS文件。

6.1.1 Bootstrap简介

Bootstrap是一个目前非常受欢迎的前端框架,其实它更多的是一个CSS框架。**Bootstrap提供了大量的CSS样式、组件,开发者使用Bootstrap提供的CSS样式和组件,可以快速、方便地开发出优雅、美观的界面**。
Bootstrap和早期的Ext JS、Dojo等前端框架不同,Ext JS和Dojo等框架需要使用大量的JavaScript或框架本身的标签构建界面,而Bootstrap的做法则更加简单,它不需要使用特别的JavaScript代码,也不需要使用任何特别的标签,它只要在原生HTML标签上通过class属性指定Bootstrap样式即可。
此外,Bootstrap在jQuery的基础上也提供了JavaScript插件支持,这一点又进一步增强了Bootstrap的功能。

6.1.2 下载和安装Bootstrap

下载和安装Bootstrap请按如下步骤进行:
登录Bootstrap的中文文档网站,下载Bootstrap的最新版,本书用的是

Boostrap压缩版目录结构

这里下载bootstrap-3.3.7的压缩版本,将会得到一个bootstrap-3.3.7-dist.zip文件,解压该文件将可以看到如下所示的文件结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
G:\Desktop\随书源码\库文件\bootstrap-3.3.7-dist
├─css\
│ ├─bootstrap-theme.css
│ ├─bootstrap-theme.css.map
│ ├─bootstrap-theme.min.css
│ ├─bootstrap-theme.min.css.map
│ ├─bootstrap.css
│ ├─bootstrap.css.map
│ ├─bootstrap.min.css
│ └─bootstrap.min.css.map
├─fonts\
│ ├─glyphicons-halflings-regular.eot
│ ├─glyphicons-halflings-regular.svg
│ ├─glyphicons-halflings-regular.ttf
│ ├─glyphicons-halflings-regular.woff
│ └─glyphicons-halflings-regular.woff2
└─js\
  ├─bootstrap.js
  ├─bootstrap.min.js
  └─npm.js
  • bootstrap/css目录下包含8个文件,但其实真正要用的只有2个。
    • bootstrap.css:Bootstrap核心CSS库(bootstrap.min.css是经过压缩的最小化版本,*.map文件是CSS源码映射表,可以在某些浏览器的开发工具中使用)。
    • bootstrap-theme.css:Bootstrap主题相关的CSS库(bootstrap-theme.min.css是经过压缩的最小化版本,*.map文件是CSS源码映射表,可以在某些浏览器的开发工具中使用)。
  • bootstrap/js目录下包含了Bootstrap的JS插件支持文件,其中bootstrap.min.js是经过压缩的最小化版本。
  • bootstrap/fonts目录下包含了Bootstrap依赖的字体库。

为在页面中使用Bootstrap,只需要将用到的bootstrap源文件引入整个到项目中即可。

  • 对于bootstrap/css目录下的文件只需要使用bootstrap.min.css和bootstrap-theme.min.css文件,
  • 而对于bootstrap/js目录下的文件则只需要使用bootstrap.min.js文件。

使用Bootstrap的CSS样式

如果仅需要使用Bootstrap的CSS样式,则只需要导入bootstrap.min.css和bootstrap-theme.min.css的两个CSS样式文件即可。
也就是HTML页面的head标签下增加如下两行link标签即可:

1
2
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">

移动设备上合适的绘制和触屏缩放

为了保证HTML页面在移动设备上进行合适的绘制和触屏缩放,需要在<head>元素中添加viewport元数据标签。例如如下代码:

1
<meta name="viewport" content="width=device-width, initial-scale=1">

其中,href属性的值根据你项目中的实际路径做相应的修改,让href属性指向这两个CSS样式单文件所在的位置。

禁止用户缩放网页

如果希望禁止用户缩放网页,只能滚动网页,则可以为viewport元数据添加user-scalable=no设置。例如改成如下viewport元数据则可禁止用户缩放网页:

1
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

程序示例

下面提供了一个使用Bootstrap框架的网页模板。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Bootstrap模板 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <!-- panel、panel-danger是Bootstrap提供的CSS样式 -->
    <div class='panel panel-danger'>Bootstrp</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>

使用Bootstrap非常简单,直接使用它提供的CSS样式即可。

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

第6章 Bootstrap全局样式

本章要点

  • 下载和安装Bootstrap
  • 使用网格布局
  • 使用Less和mixin
  • Bootstrap提供的排版相关的样式
  • 表格相关样式
  • 条纹表格、边框表格、响应式表格等
  • 图片相关样式
  • 各种辅助样式
  • 响应式布局相关样式
  • 表单相关样式
  • 行内表单和水平表单
  • 多选框和单选框
  • 表单校验相关的样式

Bootstrap简介

Bootstrap是一个非常流行的前端框架,这个框架与jQuery不同,它的主要用途并不是JS编程,它更像一个CSS框架,因此它可以简化前端界面的开发。
使用Bootstrap基本不需要使用JS脚本,大部分时间,Bootstrap只需要在传统HTML标签上添加CSS样式即可。本章将会从Bootstrap的下载和安装开始介绍,然后详细介绍Bootstrap提供的全局CSS样式。

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

3.11 本章小结

本章详细介绍了一个非常优秀的JavaScript 库jQuery,它提供了另一种优雅的设计思路:
把DOM对象包装成jQuery对象进行处理,从而开发者可以不再面向DOM对象编程而是面向jQuery对象编程。
掌握这种设计思路之后,使用jQuery将非常简单,只要2步即可:①获取jQuery对象;②调用jQuery对象的方法。
本章的知识组织也遵循以下两个步骤:先介绍了获取jQuery对象的核心方法jQuery(),并介绍了该方法支持的各种选择器。然后详细讲解了如何访问类数组的jQuery对象里包含的元素。接下来详细讲解了jQuery对象支持的各种方法:如操作属性、操作CSS样式、动态更新HTML页面、事件编程支持、Ajax支持等。除此之外本章还重点介绍了jQuery的两个新特性:Callbacks对象和Deferred对象,以及如何使用Callbacks对象和Deferred对象管理回调函数。最后,详细介绍了如何扩展jQuery,并通过示例进行了演示,且简要介绍了jQuery的各种插件及jQueryUI。

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

3.10 扩展jQuery和jQuery插件

jQuery具有极好的可扩展性,如果开发者需要为jQuery增加新的函数和功能,则可通过jQuery提供的以下两个方法来进行扩展。

方法 描述
jQuery.fn.extend(object) 为所有jQuery对象扩展新的方法。其中object 是一个形如{name1:fn1,name2,fn2...}的对象。经过这种扩展之后,所有jQuery对象都可使用name1、name2等方法。
jQuery.extend(object) 为jQuery命名空间扩展新的方法。其中object 是一个形如{name1:fn1,name2,fn2...}的对象。经过这种扩展之后,jQuery 命名空间下就会增加name1、name2等方法。

下面的程序示范了如何利用这两个方法来扩展jQuery。

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
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 使用fn.extends扩展jQuery </title>
</head>

<body>
    用户名：
    <input name="name" type="text" />
    <br /> 喜欢的颜色：
    <br /> 红色：
    <input name="color" type="checkbox" value="red" /> 绿色：
    <input name="color" type="checkbox" value="green" /> 蓝色：
    <input name="color" type="checkbox" value="blue" />
    <br />
    <input id="check" type="button" value="选中所有复选框" />
    <input id="uncheck" type="button" value="取消选中所有复选框" />
    <input id="bn" type="button" value="单击我" />
    <br />
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 为所有jQuery对象扩展新的方法
        $.fn.extend(
            {
                // 为jQuery对象扩展check方法
                check: function () {
                    // 遍历jQuery里每个DOM对象，指定其checked属性为true
                    return this.each(function () {
                        this.checked = true;
                    });
                },
                // 为jQuery对象扩展uncheck方法
                uncheck: function () {
                    // 遍历jQuery里每个DOM对象，指定其checked属性为false
                    return this.each(function () {
                        this.checked = false;
                    });
                }
            });
        // 为jQuery命名空间扩展新方法
        $.extend(
            {
                // 为jQuery命名空间扩展test方法
                test: function () {
                    alert("为jQuery命名空间扩展的测试方法");
                }
            });
        // 为id为check的按钮绑定事件处理函数
        $("#check").click(function () {
            $(":input").check();
        });
        // 为id为uncheck的按钮绑定事件处理函数
        $("#uncheck").click(function () {
            $(":input").uncheck();
        });
        // 为id为bn的按钮绑定事件处理函数
        $("#bn").click(function () {
            // 调用为jQuery命名空间扩展的新方法
            $.test();
        });
    </script>
</body>
</html>

该程序中分别为jQuery对象和jQuery命名空间扩展了新的方法,从而允许后面的粗体字代码使用这些新扩展的方法。通过这个程序可以看出,不论是第三方还是开发者,都能非常方便地扩展jQuery,从而为jQuery引入新的功能。
实际上,由于jQuery越来越受欢迎,已经出现了大量的jQuery插件,这些插件极大地丰富了jQuery的功能。登录jQuery插件站点即可看到在jQuery官方注册的一系列jQuery插件,读者可以根据自己的需要选择合适的插件。

值得一提的是,jQuery官方提供了一套优秀的界面库jQueryUI,登录jQueryUI的官方站点即可看到这些丰富的UI效果。如果读者需要使用这些UI效果,则可以在项目中使用jQueryUI。