栅格系统

使用我们强大的移动优先弹性框网格来构建各种形状和大小的布局，这得益于十二列系统、五个默认响应层、Sass 变量和混合以及数十个预定义类。

实现原理

定义：栅格系统是通过将页面划分为多个列（或称网格）来实现布局和内容分布的工具。

实现方式：通常通过 CSS 定义的固定宽度列或百分比列来构建，页面上的内容块可以放置在这些列中。

工作原理

基础单位：栅格系统基于12列或24列等网格的划分，每一列都占据页面的某一部分宽度。

排列：列之间可以有固定的间距（gutter），通过排列和组合这些列来形成不同的布局。

流式布局：栅格系统允许响应式布局，使得页面可以适应不同设备的屏幕宽度。

网格选项

虽然 Bootstrap 使用ems 或rems 来定义大多数尺寸，用于网格断点和容器宽度。这是因为视口宽度以像素为单位，不会随着字体大小而变化。

通过方便的表格了解 Bootstrap 网格系统的各个方面如何在多种设备上工作。

使用方法

基本用法

容器：栅格系统中的元素通常放在一个容器（container）内，用于约束最大宽度。

行和列：

  • row 类用于创建一行，内部包含多个列（col）。

  • col 类通过不同的尺寸前缀（如 col-md-, col-lg-）来定义列的宽度和排列方式。

等宽示例
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 lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>Container</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-4">等宽列</h3>
<div class="row">
    <div class="col border py-3 bg-light">二分之一</div>
    <div class="col border py-3 bg-light">二分之一</div>
</div>
<div class="row">
    <div class="col border py-3 bg-light">三分之一</div>
    <div class="col border py-3 bg-light">三分之一</div>
    <div class="col border py-3 bg-light">三分之一</div>
</div>
<div class="row">
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="col border py-3 bg-light">四分之一</div>

</div>
<div class="row">
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

设置一个列宽

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>Container</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-4">设置一个列宽</h3>
<div class="row">
    <div class="col border py-3 bg-light">左</div>
    <div class="col-7 border py-3 bg-light">中</div>
    <div class="col border py-3 bg-light">右</div>
</div>
<div class="row">
    <div class="col-3 border py-3 bg-light">左</div>
    <div class="col border py-3 bg-light">中</div>
    <div class="col border py-3 bg-light">右</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
可变宽度的内容
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>Container</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-4">可变宽度的内容</h3>
<div class="row justify-content-md-center">
    <div class="col col-lg-2 border py-3 bg-light">左</div>
    <div class="col-md-auto border py-3 bg-light">中(在屏幕>=768px时，可根据内容自动调整列宽度)</div>
    <div class="col col-lg-2 border py-3 bg-light">右</div>
</div>
<div class="row">
    <div class="col border py-3 bg-light">左</div>
    <div class="col-md-auto border py-3 bg-light">中(在屏幕>=768px时，可根据内容自动调整列宽度)</div>
    <div class="col col-lg-2 border py-3 bg-light">右</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
覆盖所有设备
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>Container</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-4">覆盖所有设备</h3>
<div class="row">
    <div class="col border py-3 bg-light">col</div>
    <div class="col border py-3 bg-light">col</div>
    <div class="col border py-3 bg-light">col</div>
</div>
<div class="row">
    <div class="col-8 border py-3 bg-light">col-8</div>
    <div class="col-4 border py-3 bg-light">col-4</div>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
水平排列
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>Container</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-4">水平排列</h3>
<!--在sm（>=576px）型设备上开始水平排列-->
<div class="row">
    <div class="col-sm-8 border py-3 bg-light">col-sm-8</div>
    <div class="col-sm-4 border py-3 bg-light">col-sm-4</div>
</div>
<!--在md(>=768型设备上开始水平排列)-->
<div class="row">
    <div class="col-md-8 border py-3 bg-light">col-md-8</div>
    <div class="col-md-4 border py-3 bg-light">col-md-4</div>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
混合搭配
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>快速掌握Bootstrap4布局</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-4">混合搭配</h3>
<!--在小于md型的设备上显示为一个全宽列和一个半宽列，在大于等于md型设备上显示为一列，分别占八份和一份-->
<div class="row">
    <div class="col-12 col-md-8 border py-3 bg-light">.col-12 .col-md-8</div>
    <div class="col-6 col-md-4 border py-3 bg-light">.col-6 .col-md-4</div>
</div>
<!--在任何类型的设备上，列的宽度都是占50%-->
<div class="row">
    <div class="col-6 border py-3 bg-light">.col-6</div>
    <div class="col-6 border py-3 bg-light">.col-6</div>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

列偏移

偏移定义：使用 offset 类来使某一列向右移动一定的列数，例如 col-md-offset-3 表示该列右移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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>快速掌握Bootstrap4布局</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-4">偏移类示例</h3>
<div class="row">
    <div class="col-md-6 offset-md-3 border py-3 bg-light">.col-md-6 .offset-md-3</div>
</div>
<div class="row">
    <div class="col-md-4 offset-md-1 border py-3 bg-light">.col-md-4 .offset-md-1</div>
    <div class="col-md-4 offset-md-2 border py-3 bg-light">.col-md-4 .offset-md-2</div>
</div>
<div class="row">
    <div class="col-md-4 border py-3 bg-light">.col-md-4</div>
    <div class="col-md-4 offset-md-4 border py-3 bg-light">.col-md-4 .offset-md-4</div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

使用margin类实现列偏移

使用margin类也可以完成列偏移

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>快速掌握Bootstrap4布局</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-4">使用margin类实现列偏移</h3>
<div class="row">
    <div class="col-md-4 border py-3 bg-light">.col-md-4</div>
    <div class="col-md-4 ml-auto border py-3 bg-light">.col-md-4 .ml-auto</div>
</div>
<div class="row">
    <div class="col-md-3 ml-md-auto border py-3 bg-light">.col-md-3 ml-md-auto</div>
    <div class="col-md-3 ml-md-auto border py-3 bg-light">.col-md-3 ml-md-auto</div>
    <div class="col-md-3 ml-md-auto border py-3 bg-light">.col-md-3 ml-md-auto</div>
</div>
<div class="row">
    <div class="col-auto mr-auto border py-3 bg-light">.col-auto .mr-auto</div>
    <div class="col-auto border py-3 bg-light">.col-auto</div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

列排序

排序类：通过 order 类来改变列的显示顺序，允许不同尺寸设备下列的重新排列。

自定义顺序：在移动端和桌面端可以使用不同的 order 值来实现灵活的布局。

排列顺序

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>快速掌握Bootstrap4布局</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-4">排列顺序</h3>
<!--在小于md型的设备上显示为一个全宽列和一个半宽列，在大于等于md型设备上显示为一列，分别占八份和一份-->
<div class="row no-gutters">
    <div class="col order-12 border py-3 bg-light">order-12</div>
    <div class="col order-1 border py-3 bg-light">order-1</div>
    <div class="col order-6 border py-3 bg-light">order-6</div>
    <div class="col border py-3 bg-light">col</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

列嵌套

嵌套结构：在某一列内部再创建一行和多列，以实现更复杂的布局。

嵌套效果：通过嵌套，允许在同一列中具有不同的栅格分布，使布局更灵活。

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>快速掌握Bootstrap4布局</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <style>
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body class="container">
<h3 class="mb-4">嵌套</h3>
<div class="row">
    <div class="col-12 col-lg-6">
<!--        嵌套行-->
        <div class="row border no-gutters">
            <div class="col-12 col-sm-3"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592380068202&di=0eee2ce7449491428f479285020a7040&imgtype=0&src=http%3A%2F%2Fwww.cflac.org.cn%2Fxw%2F201810%2FW020181008346545600505.jpg" alt=""></div>
            <div class="col-12 col-sm-9 pl-3">李白诗歌的语言，有的清新如同口语，有的豪放，不拘声律，近于散文，但都统一在"清水出芙蓉，天然去雕饰"的自然美之中。</div>

        </div>
    </div>
      <div class="col-12 col-lg-6">
<!--        嵌套行-->
        <div class="row border no-gutters">
            <div class="col-12 col-sm-3"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592380151056&di=17af252bd8370ee0591ecf708741f42c&imgtype=0&src=http%3A%2F%2Fimage3.cnpp.cn%2Fupload%2Fimages%2F20151227%2F00041237439_400x508.jpg" alt=""></div>
            <div class="col-12 col-sm-9 pl-3">在杜甫中年因其诗风沉郁顿挫，忧国忧民，杜甫的诗被称为"诗史"。他的诗词以古体，律诗见长，风格多样，以"沉郁顿挫"四字准确概括出他自己的作品风格，而以沉郁为主。</div>

        </div>
    </div>
</div>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

案例：开发电商网站特效

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>开发电商网站特效</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <style>
        .product-grid{
            text-align: center;
            overflow: hidden;
            position: relative;
            transition: all 0.5s ease 0s;
        }
        .product-grid .product-image{
            overflow: hidden;
        }
        .product-grid .product-image img{
            width: 100%;
            height: auto;
            transition: all 0.5s ease 0s;
        }
        .product-grid:hover .product-image img{
            transform: scale(1.5);
        }
        .product-grid .product-content{
            padding: 12px 12px 15px 12px;
            transition: all 0.5s ease 0s;
        }
        .product-grid:hover .product-content{
            opacity: 0;
        }
        .product-grid .title{
            font-size: 20px;
            font-weight: 600;
            margin: 0 0 10px;
        }
        .product-grid .title a{
            color: #000;
        }
        .product-grid .title a:hover{
            color: #2e86de;
        }
        .product-grid .price{
            font-size: 18px;
            font-weight: 600;
            color: #2e86de;
        }
        .product-grid .price span{
            color: #999;
            font-size: 15px;
            font-weight: 400;
            text-decoration: line-through;
            margin-left: 7px;
            display: inline-block;
        }
        .product-grid .social{
            background-color: #fff;
            width: 100%;
            padding: 0;
            margin: 0;
            list-style: none;
            opacity: 0;
            position: absolute;
            bottom: -50%;
            transition: all 0.5s ease 0s;
        }
        .product-grid:hover .social{
            opacity: 1;
            bottom: 20px;
        }
        .product-grid .social li{
            display: inline-block;
        }
        .product-grid .social li a{
            color: #909090;
            font-size: 16px;
            line-height: 45px;
            text-align: center;
            height: 45px;
            width: 45px;
            margin: 0 7px;
            border: 1px solid #909090;
            border-radius: 50px;
            display: block;
            position: relative;
            transition: all 0.5s ease-in-out;

        }
        .product-grid .social li a:hover{
            color: #fff;
            background-color: #2e86de;
        }
    </style>
</head>
<body class="container">
<div class="row">
    <div class="col-md-3 col-sm-6">
        <div class="product-grid">
<!--        产品图片-->
            <div class="product-image">
                <a href="#">
                    <img class="pic-1" src="./images/touxiang.jpg" alt="">
                </a>

            </div>
<!--            产品说明及价格-->
            <div class="product-content">
                <h3 class="title"><a href="#">男士衬衫</a></h3>
                <div class="price">￥29.00
                <span>$14.00</span>
                </div>
            </div>
<!--            功能按钮-->
            <ul class="social">
                <li><a href=""><i class="fa fa-search"></i></a></li>
                <li><a href=""><i class="fa fa-shopping-bag"></i></a></li>
                <li><a href=""><i class="fa fa-shopping-cart"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="product-grid">
<!--        产品图片-->
            <div class="product-image">
                <a href="#">
                    <img class="pic-1" src="./images/touxiang.jpg" alt="">
                </a>

            </div>
<!--            产品说明及价格-->
            <div class="product-content">
                <h3 class="title"><a href="#">男士衬衫</a></h3>
                <div class="price">￥29.00
                <span>$14.00</span>
                </div>
            </div>
<!--            功能按钮-->
            <ul class="social">
                <li><a href=""><i class="fa fa-search"></i></a></li>
                <li><a href=""><i class="fa fa-shopping-bag"></i></a></li>
                <li><a href=""><i class="fa fa-shopping-cart"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="product-grid">
<!--        产品图片-->
            <div class="product-image">
                <a href="#">
                    <img class="pic-1" src="./images/touxiang.jpg" alt="">
                </a>

            </div>
<!--            产品说明及价格-->
            <div class="product-content">
                <h3 class="title"><a href="#">男士衬衫</a></h3>
                <div class="price">￥29.00
                <span>$14.00</span>
                </div>
            </div>
<!--            功能按钮-->
            <ul class="social">
                <li><a href=""><i class="fa fa-search"></i></a></li>
                <li><a href=""><i class="fa fa-shopping-bag"></i></a></li>
                <li><a href=""><i class="fa fa-shopping-cart"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="product-grid">
<!--        产品图片-->
            <div class="product-image">
                <a href="#">
                    <img class="pic-1" src="./images/touxiang.jpg" alt="">
                </a>

            </div>
<!--            产品说明及价格-->
            <div class="product-content">
                <h3 class="title"><a href="#">男士衬衫</a></h3>
                <div class="price">￥29.00
                <span>$14.00</span>
                </div>
            </div>
<!--            功能按钮-->
            <ul class="social">
                <li><a href=""><i class="fa fa-search"></i></a></li>
                <li><a href=""><i class="fa fa-shopping-bag"></i></a></li>
                <li><a href=""><i class="fa fa-shopping-cart"></i></a></li>
            </ul>
        </div>
    </div>
</div>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

1.整体布局结构：

  • 使用了一个包含整个页面的 container-fluid 容器，以便页面可以全宽度适应不同屏幕。
  • 通过 row 类创建了每个大块（如头部、导航、内容、页脚）的行。
  • 在每一行中，使用 col 类定义不同列的宽度和排列方式。

2.头部（Header）：

  • 头部占据整行（col-12），显示了招商银行的标题和一句标语。
  • 样式上设置了背景色、文字颜色，并进行了内边距和文本居中的处理。

3.导航（Navigation）：

  • 导航栏使用了6个等宽的列，每个列代表一个导航项。
  • 使用响应式类 col-12 col-md-2，在小屏幕上每个导航项占据整行，而在中等及以上屏幕上每个导航项只占两列。

4.横幅（Banner）：

  • 横幅区域使用了一整行（col-12），在这里显示欢迎信息和简单的说明，背景色和内边距使内容更突出。

5.主要内容区域（Main Content）：

  • 主体内容分为两部分：左边的主要内容（col-12 col-md-8）和右边的次要内容（col-12 col-md-4）。
  • 在左边的列中，嵌套了两行（row），每行包含一个“最新动态”和“在线服务”的功能块（feature）。
  • 右边的列只包含一个“客户支持”功能块。

6.页脚（Footer）：

  • 页脚占据一整行（col-12），用于展示版权信息，背景色为深色以与页面其他部分形成对比。

移动优先设计：通过 col-12 类，所有内容在移动设备上均为整行显示，然后利用 col-md-* 类在中等及以上屏幕上调整布局。

灵活排列：不同列的宽度和顺序根据设备的宽度进行调整，以确保最佳用户体验。