1
00:00:03,730 --> 00:00:06,755
在之前的课中

2
00:00:06,755 --> 00:00:12,055
我们学习了响应设计和 bootstrap 网格系统

3
00:00:12,055 --> 00:00:18,050
我们已经看到了 bootstrap 网格如何允许我们设计响应性的网站

4
00:00:18,050 --> 00:00:21,890
现在是我们进行下一项练习的时候了

5
00:00:21,890 --> 00:00:27,755
我们将使用我们在之前的练习中创建的 index.html 

6
00:00:27,755 --> 00:00:34,945
并应用 bootstrap 网格类来使其响应

7
00:00:34,945 --> 00:00:40,760
在浏览器中快速查看我们的网页, 我们看到,

8
00:00:40,760 --> 00:00:46,415
虽然字体改进了一点, 但仍然很糟糕,

9
00:00:46,415 --> 00:00:50,645
我们现在使用的是 bootstrap 的默认字体

10
00:00:50,645 --> 00:01:00,930
现在让我们尝试将 bootstrap 网格类应用于 index.html 以改进其布局

11
00:01:00,930 --> 00:01:03,805
进入 index.html 页面

12
00:01:03,805 --> 00:01:07,960
让我迅速提请您注意这一行

13
00:01:07,960 --> 00:01:12,805
我们已经在前面的练习中已经包含

14
00:01:12,805 --> 00:01:14,660
我提到过这行

15
00:01:14,660 --> 00:01:17,065
在我们讨论 bootstrap 网格系统时

16
00:01:17,065 --> 00:01:23,895
在这里, 我们看到我们已经指定了一个视图端口和内容的 meta 标签,

17
00:01:23,895 --> 00:01:26,090
宽度是设备宽度,

18
00:01:26,090 --> 00:01:29,205
初始规模为 1, shrink-to-fit 为 no

19
00:01:29,205 --> 00:01:33,210
所以这个元标签允许我们使

20
00:01:33,210 --> 00:01:39,225
我们的网页通过查看端口来响应

21
00:01:39,225 --> 00:01:42,630
向前迈进一步

22
00:01:42,630 --> 00:01:49,080
我们要向下滚动到该 index.html 的 body,

23
00:01:49,080 --> 00:01:54,570
然后查找第一个 div, 它正好在头标签下面,

24
00:01:54,570 --> 00:02:00,480
在这个 div 上, 你要应用 container 类

25
00:02:00,480 --> 00:02:05,550
我们已经在上一堂课了解了 container 类

26
00:02:05,550 --> 00:02:09,125
所以一旦我们应用了 container 类,

27
00:02:09,125 --> 00:02:12,410
就看一下我们的网页, 我们看到

28
00:02:12,410 --> 00:02:16,620
部分内容已经改变

29
00:02:16,620 --> 00:02:23,080
看看这里和下面的内容之间的差异

30
00:02:23,080 --> 00:02:25,370
现在下面的内容,

31
00:02:25,370 --> 00:02:30,960
位于首页的页脚中.而此内容位于页眉中

32
00:02:30,960 --> 00:02:36,890
但中间的内容是我们网页的实际内容,

33
00:02:36,890 --> 00:02:40,785
它在我们应用 container 的 div 内

34
00:02:40,785 --> 00:02:47,480
因此, 应用 container 类, 您可以立即看到

35
00:02:47,480 --> 00:02:50,700
我们的内容所在的页面的宽度现在已经

36
00:02:50,700 --> 00:02:54,660
收缩, 在两边有一些额外的空间,

37
00:02:54,660 --> 00:02:58,935
这个 container 宽度是一个固定大小的 container,

38
00:02:58,935 --> 00:03:02,330
我们的内容将被固定在这个特定的宽度上

39
00:03:02,330 --> 00:03:07,425
屏幕两边有足够留白

40
00:03:07,425 --> 00:03:13,315
让我们同时对页眉和页脚应用相同的 container 类,

41
00:03:13,315 --> 00:03:17,355
然后查看内容的改变

42
00:03:17,355 --> 00:03:20,200
回到我们的网页

43
00:03:20,200 --> 00:03:24,940
我现在要做的是对这里的内部内容,

44
00:03:24,940 --> 00:03:28,165
 container 内部的 div,

45
00:03:28,165 --> 00:03:34,110
我将对第一个 div

46
00:03:34,110 --> 00:03:35,885
应用 row class 这个类,

47
00:03:35,885 --> 00:03:38,125
我将简单地复制这个

48
00:03:38,125 --> 00:03:44,675
我要对第二个 进行相同的操作

49
00:03:44,675 --> 00:03:49,230
然后向下滚动到第三个 div,

50
00:03:49,230 --> 00:03:51,375
我也在这里应用 row 类

51
00:03:51,375 --> 00:03:56,110
所以现在, 这个最外层的 container 类中的内容,

52
00:03:56,110 --> 00:03:57,950
现在分为三部分,

53
00:03:57,950 --> 00:04:01,395
所以在这里面的东西是一部分

54
00:04:01,395 --> 00:04:02,640
在这里面的东西

55
00:04:02,640 --> 00:04:06,150
是第二部分, 在这里面的是第三部分

56
00:04:06,150 --> 00:04:10,380
稍后我们将对此应用 column 类

57
00:04:10,380 --> 00:04:17,695
现在让我们移动到主页 body 中的 header

58
00:04:17,695 --> 00:04:23,970
我将要对其设置 class="jumbotron"

59
00:04:23,970 --> 00:04:28,265
jumbotron 允许您将 jumbotron

60
00:04:28,265 --> 00:04:33,805
中的内容与页面的其余部分分开

61
00:04:33,805 --> 00:04:39,035
当我们查看网页时, 我们将很快看到结果

62
00:04:39,035 --> 00:04:42,215
现在, 对这个 header 中的 div,

63
00:04:42,215 --> 00:04:46,360
我要对它应用 container 类,

64
00:04:46,360 --> 00:04:49,410
所以, 无论是里面是什么内容, 都将

65
00:04:49,410 --> 00:04:52,945
受到 container 宽度的限制

66
00:04:52,945 --> 00:04:57,670
同样地, 向下移动到页脚,

67
00:04:58,780 --> 00:05:01,650
在页脚中,

68
00:05:01,650 --> 00:05:04,720
对其中的第一个 div

69
00:05:04,720 --> 00:05:09,360
我将要设置 class="container"

70
00:05:09,360 --> 00:05:13,055
然后在这个 div 里面

71
00:05:13,055 --> 00:05:16,755
我将要设置 class="row"

72
00:05:16,755 --> 00:05:19,735
对里面的 div

73
00:05:19,735 --> 00:05:25,225
所以这个 div 会一路带我们到下面这个 div

74
00:05:25,225 --> 00:05:29,105
然后下一个 div

75
00:05:29,105 --> 00:05:31,820
我也将设置 class="row"

76
00:05:31,820 --> 00:05:35,380
所以现在我的页脚包含 2 rows,

77
00:05:35,380 --> 00:05:38,520
我们一会儿将使用 column 类

78
00:05:38,520 --> 00:05:40,110
来改变内容样式

79
00:05:40,110 --> 00:05:42,365
回到 header

80
00:05:42,365 --> 00:05:51,500
我将在这里将 row 类应用于 container div 中的第二个 div

81
00:05:51,500 --> 00:05:54,920
所以这个 div 匹配这个,

82
00:05:54,920 --> 00:05:58,605
将在页眉中仅有 1 row

83
00:05:58,605 --> 00:06:02,400
我们先看下在网页上呈现的结果

84
00:06:02,400 --> 00:06:04,365
进入我们的网页

85
00:06:04,365 --> 00:06:09,300
你可以看到 header 内容现在已和

86
00:06:09,300 --> 00:06:14,935
其余内容区分开来, 在顶部灰色背景中

87
00:06:14,935 --> 00:06:22,735
但它的内容现在与下面的内容对齐

88
00:06:22,735 --> 00:06:25,685
这是使用 container 的结果

89
00:06:25,685 --> 00:06:27,550
移动到页脚,

90
00:06:27,550 --> 00:06:32,635
你可以看到页脚内容也与 container 对齐

91
00:06:32,635 --> 00:06:36,800
但是这个页面看起来还不是很好,

92
00:06:36,800 --> 00:06:44,705
现在, 让我们继续对内部 divs 应用 column 类

93
00:06:44,705 --> 00:06:48,665
返回到 index.html 页,

94
00:06:48,665 --> 00:06:51,865
我们现在开始应用 column 类

95
00:06:51,865 --> 00:06:58,365
所以前往 header, 到 jumbotron 内第二个内部 div

96
00:06:58,365 --> 00:07:06,230
让我添加 class="col-12, col-sm-6"

97
00:07:06,230 --> 00:07:09,960
这里, 第一个 div 的内容

98
00:07:09,960 --> 00:07:15,525
对额外小尺寸的屏幕将占据整行,

99
00:07:15,525 --> 00:07:18,770
其他则占据一行的一半，原因是

100
00:07:18,770 --> 00:07:24,235
我们用 col-sm-6 表示小到超大屏幕尺寸

101
00:07:24,235 --> 00:07:26,480
现在, 同样对于第二个 div ,

102
00:07:26,480 --> 00:07:28,715
虽然它不包含任何内容,

103
00:07:28,715 --> 00:07:37,840
我将在这里定义类为 "col-12 col-sm"

104
00:07:37,840 --> 00:07:40,990
因此, 请注意, 在这里通过指定 col-12,

105
00:07:40,990 --> 00:07:45,270
我明确地指出对于额外的小屏幕尺寸, 
无论在这个 div 里面内容是什么

106
00:07:45,270 --> 00:07:49,860
都将堆积在这里的内容下面

107
00:07:49,860 --> 00:07:54,150
对小到额外大的屏幕尺寸,

108
00:07:54,150 --> 00:07:59,270
此内容将占用行中

109
00:07:59,270 --> 00:08:04,925
剩余的的列

110
00:08:04,925 --> 00:08:09,255
所以在这种情况下, 因为 6 列被这个内容占据,

111
00:08:09,255 --> 00:08:12,745
它将占用剩余的 6 列

112
00:08:12,745 --> 00:08:18,030
向下移动到这里表示内容的 rows,

113
00:08:18,030 --> 00:08:20,110
对于这里的内容,

114
00:08:20,110 --> 00:08:22,860
第一个内容,

115
00:08:22,860 --> 00:08:24,590
这是一个标签,

116
00:08:24,590 --> 00:08:29,240
我将要使用这些类,

117
00:08:29,240 --> 00:08:34,985
col-12, col-sm-4, col-md-3

118
00:08:34,985 --> 00:08:39,770
因此, 对于额外的小屏幕尺寸,

119
00:08:39,770 --> 00:08:42,650
它将占据整行, 对小屏幕尺寸,

120
00:08:42,650 --> 00:08:44,160
它将占据整列,

121
00:08:44,160 --> 00:08:46,585
对中等到超大的屏幕尺寸,

122
00:08:46,585 --> 00:08:50,395
它将占据该行中的三列

123
00:08:50,395 --> 00:08:56,810
剩下的部分将被下面的内容占占据

124
00:08:56,810 --> 00:09:00,575
所以对于它，我将设置 class="col"

125
00:09:00,575 --> 00:09:05,715
表明在额外的小屏幕尺寸

126
00:09:05,715 --> 00:09:11,025
这将堆积在这里的内容下面

127
00:09:11,025 --> 00:09:12,690
然后我会给它 col-sm,

128
00:09:12,690 --> 00:09:16,940
这意味着它将占据余下的 8 列,

129
00:09:16,940 --> 00:09:19,300
因为 4 列已经被占据,

130
00:09:19,300 --> 00:09:22,360
然后我会给它 col-md,

131
00:09:22,360 --> 00:09:24,320
这意味着它将占据

132
00:09:24,320 --> 00:09:27,300
余下的 9 列, 因为 3 列已经

133
00:09:27,300 --> 00:09:33,230
在中等到额外大屏幕大小
被以上内容占据

134
00:09:33,230 --> 00:09:37,810
现在, 我已经定义了第一个 row 的内容,

135
00:09:37,810 --> 00:09:43,070
我将在这里采用相同的操作,

136
00:09:43,070 --> 00:09:49,415
然后将其应用到第二个 row,

137
00:09:49,415 --> 00:09:52,345
还有第三个 row

138
00:09:52,345 --> 00:09:57,240
同样, 我要复制这一个, 然后应用相同的

139
00:09:57,240 --> 00:10:04,690
这下面的 div

140
00:10:04,690 --> 00:10:11,950
现在我们已经配置了 header 和表示内容的部分

141
00:10:11,950 --> 00:10:14,690
现在让我们向下移动到 footer

142
00:10:14,690 --> 00:10:21,260
在 footer 中, 你会注意到此 div 内部包含三个 divs,

143
00:10:21,260 --> 00:10:23,720
对于内部的三个 divs,

144
00:10:23,720 --> 00:10:26,570
我将要应用相应的 column 类

145
00:10:26,570 --> 00:10:27,680
对于第一个,

146
00:10:27,680 --> 00:10:35,280
包含构成本网站一部分的各种页面链接,

147
00:10:35,280 --> 00:10:38,395
我将要应用一个 column 类

148
00:10:38,395 --> 00:10:46,045
col-4, col-sm-2

149
00:10:46,045 --> 00:10:50,840
意思是对于额外的小屏幕尺寸,

150
00:10:50,840 --> 00:10:55,320
它将占据 4 列，对于小到特大屏幕尺寸,

151
00:10:55,320 --> 00:10:58,660
它只会占据 2 列

152
00:10:59,040 --> 00:11:01,790
然后对于第二个,

153
00:11:01,790 --> 00:11:08,425
第二个 div, 我将应用 class="col-7"

154
00:11:08,425 --> 00:11:12,050
请注意我在这里用了 4, 然后在这里用了 7,

155
00:11:12,050 --> 00:11:14,755
所以总共占用了 11 列

156
00:11:14,755 --> 00:11:16,430
我留出了 1 列

157
00:11:16,430 --> 00:11:21,520
我稍后回来设置一个 offset 来处理这一额外的列

158
00:11:21,520 --> 00:11:23,400
这是 7 列,

159
00:11:23,400 --> 00:11:31,345
然后是 col-sm-5

160
00:11:31,345 --> 00:11:33,630
所以这是 2 加 5, 等于7

161
00:11:33,630 --> 00:11:36,390
我还剩下 5 列

162
00:11:36,390 --> 00:11:40,685
我可以给第三个 div 使用

163
00:11:40,685 --> 00:11:44,610
对额外小的屏幕尺寸,

164
00:11:44,610 --> 00:11:47,700
这两个内容将并排放置,

165
00:11:47,700 --> 00:11:52,080
然后这个 div 包含链接到

166
00:11:52,080 --> 00:11:58,585
社交媒体网站将在下面独占一行

167
00:11:58,585 --> 00:12:04,390
但是对于小到超大屏幕尺寸,

168
00:12:04,390 --> 00:12:07,680
第一个 div 将占据 2 列,

169
00:12:07,680 --> 00:12:10,240
第二个 div 将占据 5 列, 其余的将

170
00:12:10,240 --> 00:12:13,545
被这里的社交媒体链接占据

171
00:12:13,545 --> 00:12:15,230
所以对于第三个

172
00:12:15,230 --> 00:12:18,650
我将要设置

173
00:12:18,650 --> 00:12:26,515
class="col-12 col-sm-4"

174
00:12:26,515 --> 00:12:32,625
所以 col-12, col-sm-4 意味着这将

175
00:12:32,625 --> 00:12:37,090
在先前的内容后面占据 12 列

176
00:12:37,090 --> 00:12:42,310
在额外的小屏幕尺寸

177
00:12:42,310 --> 00:12:45,040
但对于小到特大的屏幕尺寸, 它将占据 4 列

178
00:12:45,040 --> 00:12:46,815
所以在这里我们是 4 加 5,

179
00:12:46,815 --> 00:12:48,430
9 加 2, 11

180
00:12:48,430 --> 00:12:52,635
所以对于小到特大的屏幕尺寸，仍有 1 列剩余

181
00:12:52,635 --> 00:12:57,510
所以这是我将如何对它应用 column 类

182
00:12:57,510 --> 00:13:03,250
现在, 我们在这下面还有一项, 它包含了版权信息

183
00:13:03,250 --> 00:13:08,745
我将要设置 class="col-auto"

184
00:13:08,745 --> 00:13:12,050
这意味着这个内容将占据

185
00:13:12,050 --> 00:13:15,515
仅供内容所需的列

186
00:13:15,515 --> 00:13:20,405
稍后你会看到, 我会在将这一内容置于屏幕中心

187
00:13:20,405 --> 00:13:26,385
使用另一个 bootstrap CSS 类

188
00:13:26,385 --> 00:13:29,035
我们会在下一个练习中提到

189
00:13:29,035 --> 00:13:33,405
因此, 我们已经将各种 column 类应用于 header

190
00:13:33,405 --> 00:13:35,880
内容和 footer

191
00:13:35,880 --> 00:13:39,280
现在是一个好时机来保存修改

192
00:13:39,280 --> 00:13:43,475
看一眼更新的 index.HTML 页面

193
00:13:43,475 --> 00:13:46,690
看一眼我们的 index.HTML 页面,

194
00:13:46,690 --> 00:13:51,315
你会注意到 header 中, 即 Jumbotron

195
00:13:51,315 --> 00:13:55,145
内容现在仅占了屏幕的一半

196
00:13:55,145 --> 00:14:00,210
此行的另一半屏幕现在已留空

197
00:14:00,210 --> 00:14:03,180
进入内容行,

198
00:14:03,180 --> 00:14:07,685
您会看到左侧的标签占据

199
00:14:07,685 --> 00:14:14,280
3 或 4 列, 取决于屏幕大小,

200
00:14:14,280 --> 00:14:18,250
其余的被余下内容占据

201
00:14:18,250 --> 00:14:19,780
所以在这里我们有一行,

202
00:14:19,780 --> 00:14:21,770
第二行, 第三行

203
00:14:21,770 --> 00:14:26,330
然后在这里的页脚, 你可以看到链接在左侧,

204
00:14:26,330 --> 00:14:28,065
地址在中间

205
00:14:28,065 --> 00:14:31,150
社交媒体链接在右边

206
00:14:31,150 --> 00:14:35,460
这是在一个中等大小的屏幕上

207
00:14:35,460 --> 00:14:42,765
现在, 如果你想看到它在额外小或小屏幕上的样子

208
00:14:42,765 --> 00:14:45,045
如果你使用的是谷歌浏览器

209
00:14:45,045 --> 00:14:47,960
它自带开发工具, 你可以

210
00:14:47,960 --> 00:14:51,010
通过单击视图开发工具来打开,

211
00:14:51,010 --> 00:14:53,105
当开发工具出现时,

212
00:14:53,105 --> 00:14:56,890
你会注意到 (让我缩小这里的尺寸)

213
00:14:56,890 --> 00:15:00,930
你会注意到这里的小窗口

214
00:15:00,930 --> 00:15:06,500
点击它将打开对网站的响应视图

215
00:15:06,500 --> 00:15:15,680
你可以看到这个相同的网页在 pixel 上的视图,

216
00:15:15,680 --> 00:15:19,300
在纵向模式下是 411x731

217
00:15:19,300 --> 00:15:22,805
对应一个额外的小屏幕尺寸

218
00:15:22,805 --> 00:15:25,300
你可以看到内容的布局

219
00:15:25,300 --> 00:15:28,145
可以看到 Jumbotron 内容在那里

220
00:15:28,145 --> 00:15:31,745
剩下的部分在下面

221
00:15:31,745 --> 00:15:34,585
然后下到页脚

222
00:15:34,585 --> 00:15:40,500
在页脚中, 你可以看到链接和地址并排

223
00:15:40,500 --> 00:15:45,880
缩小屏幕尺寸让我们看到页脚是如何呈现的

224
00:15:45,880 --> 00:15:48,735
剩下的部分, 链接在左边

225
00:15:48,735 --> 00:15:51,470
地址在右边

226
00:15:51,470 --> 00:15:56,515
社交媒体链接在下面自成一行

227
00:15:56,515 --> 00:15:59,775
版权在最底部

228
00:15:59,775 --> 00:16:04,935
这是一个有趣的视图, 让我们看到
额外小的屏幕尺寸上的呈现方式

229
00:16:04,935 --> 00:16:07,450
回到我们的代码,

230
00:16:07,450 --> 00:16:11,710
我将要应用 order 和 offset 类

231
00:16:11,710 --> 00:16:17,255
使得此内容以稍微不同的方式显示

232
00:16:17,255 --> 00:16:21,850
去到这里的内容行,

233
00:16:21,850 --> 00:16:27,820
对于这里包含内容的两个 divs,

234
00:16:27,820 --> 00:16:32,020
我将要设置

235
00:16:32,020 --> 00:16:40,150
class="order-sm-last"

236
00:16:40,150 --> 00:16:50,120
然后对于下面这一项
我将设置 order-sm-first

237
00:16:50,120 --> 00:16:53,300
也就是说, 当显示此内容时,

238
00:16:53,300 --> 00:16:56,090
此内容将被拉到屏幕的左侧, 然后

239
00:16:56,090 --> 00:16:58,880
这一列将被推到屏幕的右侧

240
00:16:58,880 --> 00:17:02,400
这一列将被分配到右侧, 这一列将被分配到左侧

241
00:17:02,400 --> 00:17:08,075
正如我在前面的课程中所解释的 order 命令

242
00:17:08,075 --> 00:17:09,880
第二行, 同样地,

243
00:17:09,880 --> 00:17:13,330
我将让它保持原样，但第三行，我将应用

244
00:17:13,330 --> 00:17:17,240
相同的 order 类

245
00:17:17,240 --> 00:17:20,290
我现在来到第三行这里,

246
00:17:20,290 --> 00:17:25,425
对它设置 order-sm-last

247
00:17:25,425 --> 00:17:30,850
然后对这里设置 order-sm-first

248
00:17:31,460 --> 00:17:36,450
同样地, 这一行会重新排序

249
00:17:36,450 --> 00:17:38,300
使得这一内容显示在

250
00:17:38,300 --> 00:17:40,870
左侧而这一内容显示在右侧

251
00:17:40,870 --> 00:17:46,640
这只是以更有趣的方式安排内容

252
00:17:46,640 --> 00:17:50,210
现在向下移到页脚,

253
00:17:50,210 --> 00:17:54,690
我要在这里设置一个 offset

254
00:17:54,690 --> 00:18:00,440
请注意我提到过这两列将占据 4 加 7, 11

255
00:18:00,440 --> 00:18:02,130
所以 1 列是剩余的

256
00:18:02,130 --> 00:18:07,295
我将要对它设置 class="offset-1"

257
00:18:07,295 --> 00:18:12,320
这意味着这个 div 上的内容将被右推 1 列

258
00:18:12,320 --> 00:18:14,710
类似地, 因为我使用 offset-1

259
00:18:14,710 --> 00:18:23,145
这将被应用到额外小一直到额外大的屏幕尺寸

260
00:18:23,145 --> 00:18:28,235
使用 offset 类就说到这里

261
00:18:28,235 --> 00:18:30,060
现在既然我们已经做了修改,

262
00:18:30,060 --> 00:18:36,285
让我们保存更改, 然后去看看浏览器中我们的网页

263
00:18:36,285 --> 00:18:38,430
回到浏览器中,

264
00:18:38,430 --> 00:18:43,715
你看到 header 和以前一样

265
00:18:43,715 --> 00:18:46,850
但在第一个内容行中,

266
00:18:46,850 --> 00:18:49,090
你可以看到这一内容已被推到

267
00:18:49,090 --> 00:18:51,925
左侧，标签被推到了右侧

268
00:18:51,925 --> 00:18:56,090
第二行不同，它保持以前的模样

269
00:18:56,090 --> 00:18:58,330
但对于第三行, 你会看到, 这一内容

270
00:18:58,330 --> 00:19:00,780
被推到了右边, 这一内容被推到了左边

271
00:19:00,780 --> 00:19:06,900
这是使用的 order-sm-last 和 order-sm-first 的缘故

272
00:19:06,900 --> 00:19:08,530
现在去页脚,

273
00:19:08,530 --> 00:19:18,195
你可以看到, 此处第一个 div 中的内容
已被向右推了 1 列

274
00:19:18,195 --> 00:19:21,560
你可以看到这里有一列空白,

275
00:19:21,560 --> 00:19:27,790
这一列被向右推, 其余的列也做了相应调整

276
00:19:27,790 --> 00:19:32,235
因此, 我们完成了

277
00:19:32,235 --> 00:19:37,790
对我们这门课 index.html 的修改

278
00:19:37,790 --> 00:19:41,665
如此我们完成了这个训练

279
00:19:41,665 --> 00:19:46,235
在本练习中, 我们学习了 container 的使用, row,

280
00:19:46,235 --> 00:19:53,800
和 column 类, 来使我们的网页设计得稍微好一点

281
00:19:53,800 --> 00:19:57,705
在紧接着的第二部分的练习中,

282
00:19:57,705 --> 00:20:04,680
我们将添加更多改变，尝试改进网页的呈现方式

283
00:20:04,680 --> 00:20:08,375
我还是不满意

284
00:20:08,375 --> 00:20:12,920
显然, 还有改进的余地

285
00:20:12,920 --> 00:20:16,290
这或许是一个好时机
来进行一个 git commit

286
00:20:16,290 --> 00:20:21,470
信息为 Bootstrap Grid Part One