1
00:00:03,730 --> 00:00:06,755
Trong các bài giảng trước đây,

2
00:00:06,755 --> 00:00:12,055
chúng ta đã tìm hiểu về thiết kế đáp ứng và hệ thống lưới bootstrap.

3
00:00:12,055 --> 00:00:18,050
Chúng tôi đã thấy làm thế nào lưới bootstrap cho phép chúng tôi thiết kế các trang web đáp ứng.

4
00:00:18,050 --> 00:00:21,890
Đã đến lúc chúng ta chuyển sang bài tập tiếp theo.

5
00:00:21,890 --> 00:00:27,755
Chúng tôi sẽ bắt đầu làm việc với trang html chỉ mục mà chúng tôi đã tạo ra trong

6
00:00:27,755 --> 00:00:34,945
bài tập trước đó của chúng tôi và áp dụng các lớp lưới bootstrap để làm cho nó đáp ứng.

7
00:00:34,945 --> 00:00:40,760
Hãy xem nhanh trang web của chúng tôi trong trình duyệt chúng tôi thấy rằng

8
00:00:40,760 --> 00:00:46,415
nó vẫn còn khủng khiếp mặc dù các phông chữ đã được cải thiện một chút,

9
00:00:46,415 --> 00:00:50,645
và bây giờ chúng tôi đang sử dụng các phông chữ mặc định bootstraps.

10
00:00:50,645 --> 00:01:00,930
Bây giờ hãy thử và áp dụng các lớp lưới bootstrap để index.html để cải thiện bố cục của nó.

11
00:01:00,930 --> 00:01:03,805
Đi đến trang index.html,

12
00:01:03,805 --> 00:01:07,960
hãy để tôi nhanh chóng thu hút sự chú ý của bạn đến dòng cụ thể này trong

13
00:01:07,960 --> 00:01:12,805
trang index.html mà chúng tôi đã bao gồm trong bài tập trước đó.

14
00:01:12,805 --> 00:01:14,660
Tôi đã đề cập đến dòng này,

15
00:01:14,660 --> 00:01:17,065
sau đó chúng tôi đã nói về hệ thống lưới bootstrap.

16
00:01:17,065 --> 00:01:23,895
Vì vậy, ở đây, chúng ta thấy rằng chúng ta đã chỉ định các thẻ meta với một cổng xem và nội dung,

17
00:01:23,895 --> 00:01:26,090
chiều rộng như chiều rộng thiết bị,

18
00:01:26,090 --> 00:01:29,205
và quy mô ban đầu một và thu nhỏ để phù hợp với không.

19
00:01:29,205 --> 00:01:33,210
Vì vậy, thẻ meta này cho phép chúng

20
00:01:33,210 --> 00:01:39,225
tôi làm cho trang web của chúng tôi đáp ứng bằng cách nhìn vào ký tự cổng xem.

21
00:01:39,225 --> 00:01:42,630
Tiến tới bước tiếp theo.

22
00:01:42,630 --> 00:01:49,080
Chúng tôi sẽ cuộn xuống cơ thể của trang index.html này,

23
00:01:49,080 --> 00:01:54,570
và sau đó tìm kiếm div đầu tiên mà đi ngay bên dưới thẻ tiêu đề có,

24
00:01:54,570 --> 00:02:00,480
để div này bạn sẽ áp dụng các container lớp.

25
00:02:00,480 --> 00:02:05,550
Chúng ta đã tìm hiểu về lớp container trong bài giảng trước đó.

26
00:02:05,550 --> 00:02:09,125
Vì vậy, một khi chúng tôi áp dụng các lớp container,

27
00:02:09,125 --> 00:02:12,410
sau đó tham gia một cái nhìn vào trang web của chúng tôi, chúng tôi thấy

28
00:02:12,410 --> 00:02:16,620
rằng một phần của nội dung ngay tại đó đã thích nghi chính nó.

29
00:02:16,620 --> 00:02:23,080
Hãy nhìn vào sự khác biệt giữa nội dung ở đây và nội dung bên dưới đây.

30
00:02:23,080 --> 00:02:25,370
Bây giờ nội dung này xuống dưới đây,

31
00:02:25,370 --> 00:02:30,960
nằm ở chân trang index.html của chúng tôi và nội dung này nằm trong tiêu đề.

32
00:02:30,960 --> 00:02:36,890
Nhưng nội dung đó ở giữa là nội dung thực tế của trang web của chúng tôi,

33
00:02:36,890 --> 00:02:40,785
đó là bên trong div mà chúng tôi áp dụng các container.

34
00:02:40,785 --> 00:02:47,480
Vì vậy, áp dụng lớp chứa bạn ngay lập tức có thể thấy rằng chiều rộng của trang trong

35
00:02:47,480 --> 00:02:50,700
đó nội dung của chúng tôi được đặt ra bây giờ đã

36
00:02:50,700 --> 00:02:54,660
thu hẹp và sau đó bạn có một số không gian còn lại ở hai bên,

37
00:02:54,660 --> 00:02:58,935
vì vậy với chiều rộng container này là một container kích thước cố định,

38
00:02:58,935 --> 00:03:02,330
nội dung của chúng tôi sẽ được cố định này chiều rộng đặc biệt

39
00:03:02,330 --> 00:03:07,425
trên màn hình để lại đủ lề ở hai bên như không gian trắng.

40
00:03:07,425 --> 00:03:13,315
Hãy áp dụng cùng một lớp chứa cho cả đầu trang và chân trang cũng,

41
00:03:13,315 --> 00:03:17,355
và sau đó xem nội dung thay đổi như thế nào.

42
00:03:17,355 --> 00:03:20,200
Quay trở lại trang web của chúng

43
00:03:20,200 --> 00:03:24,940
tôi, những gì tôi sẽ làm bây giờ là cho nội dung bên

44
00:03:24,940 --> 00:03:28,165
trong ở đây, div bên trong container,

45
00:03:28,165 --> 00:03:34,110
Tôi sẽ áp dụng các lớp như lớp hàng ở đây,

46
00:03:34,110 --> 00:03:35,885
để đầu tiên này,

47
00:03:35,885 --> 00:03:38,125
và tôi sẽ chỉ đơn giản là sao chép này.

48
00:03:38,125 --> 00:03:44,675
Tôi sẽ áp dụng tương tự cho div thứ hai ở đây được xếp hàng cho div,

49
00:03:44,675 --> 00:03:49,230
và cũng di chuyển xuống và sau đó đến div thứ ba ở đây,

50
00:03:49,230 --> 00:03:51,375
Tôi cũng áp dụng các lớp hàng ở đây.

51
00:03:51,375 --> 00:03:56,110
Vì vậy, bây giờ, nội dung bên trong lớp chứa ngoài cùng này,

52
00:03:56,110 --> 00:03:57,950
bây giờ được chia thành ba hàng,

53
00:03:57,950 --> 00:04:01,395
vì vậy bất cứ điều gì bên trong ở đây sẽ

54
00:04:01,395 --> 00:04:02,640
là một hàng, bất cứ điều gì bên trong đây,

55
00:04:02,640 --> 00:04:06,150
sẽ là hàng thứ hai và hàng ở đây sẽ là hàng thứ ba.

56
00:04:06,150 --> 00:04:10,380
Sau đó chúng tôi sẽ áp dụng các lớp cột này.

57
00:04:10,380 --> 00:04:17,695
Bây giờ chúng ta hãy chuyển sang tiêu đề trong cơ thể index.html của chúng tôi.

58
00:04:17,695 --> 00:04:23,970
Và để tiêu đề, tôi sẽ áp dụng một lớp được gọi là jumbotron.

59
00:04:23,970 --> 00:04:28,265
Thành phần jumbotron cho phép bạn thiết lập

60
00:04:28,265 --> 00:04:33,805
nội dung bên trong jumbotron từ phần còn lại của trang.

61
00:04:33,805 --> 00:04:39,035
Chúng tôi sẽ thấy kết quả trong một thời gian ngắn khi chúng tôi tại trang web kết quả.

62
00:04:39,035 --> 00:04:42,215
Bây giờ, để div bên trong tiêu đề này,

63
00:04:42,215 --> 00:04:46,360
tôi sẽ áp dụng các lớp như container,

64
00:04:46,360 --> 00:04:49,410
do đó bất cứ điều gì là bên trong nội dung

65
00:04:49,410 --> 00:04:52,945
sẽ được bây giờ hạn chế bởi chiều rộng container có.

66
00:04:52,945 --> 00:04:57,670
Tương tự như vậy, di chuyển xuống chân trang

67
00:04:58,780 --> 00:05:01,650
ở đây, trong chân trang cũng,

68
00:05:01,650 --> 00:05:04,720
div đầu tiên bên trong chân trang,

69
00:05:04,720 --> 00:05:09,360
tôi sẽ áp dụng các lớp như container.

70
00:05:09,360 --> 00:05:13,055
Và div bên trong đó,

71
00:05:13,055 --> 00:05:16,755
Tôi sẽ áp dụng các lớp như hàng có,

72
00:05:16,755 --> 00:05:19,735
để div bên trong đó.

73
00:05:19,735 --> 00:05:25,225
Vì vậy, div này sẽ đưa chúng ta tất cả các cách để div đặc biệt này ở đây.

74
00:05:25,225 --> 00:05:29,105
Và sau đó div tiếp theo cũng đó là ngay dưới đây,

75
00:05:29,105 --> 00:05:31,820
Tôi sẽ áp dụng các lớp như hàng.

76
00:05:31,820 --> 00:05:35,380
Vì vậy, bây giờ chân trang của tôi chứa hai hàng ở đây,

77
00:05:35,380 --> 00:05:38,520
chúng tôi sẽ phong cách nội dung bằng cách sử dụng cột,

78
00:05:38,520 --> 00:05:40,110
lớp học trong một thời gian ngắn.

79
00:05:40,110 --> 00:05:42,365
Đi đến tiêu đề cũng,

80
00:05:42,365 --> 00:05:51,500
tôi sẽ áp dụng các lớp hàng để div thứ hai bên trong div container ở đây.

81
00:05:51,500 --> 00:05:54,920
Vì vậy, div này phù hợp với tôi đã có điều này,

82
00:05:54,920 --> 00:05:58,605
sẽ là một hàng duy nhất trong tiêu đề.

83
00:05:58,605 --> 00:06:02,400
Chúng ta hãy xem trang web kết quả của chúng tôi.

84
00:06:02,400 --> 00:06:04,365
Đi đến trang web của chúng tôi,

85
00:06:04,365 --> 00:06:09,300
bây giờ bạn có thể thấy rằng nội dung tiêu đề bây giờ được đặt ngoài

86
00:06:09,300 --> 00:06:14,935
phần còn lại bên trong hộp màu xám này trên đầu trang ở đây.

87
00:06:14,935 --> 00:06:22,735
Nhưng bản thân nội dung bây giờ được xếp hàng với nội dung dưới đây.

88
00:06:22,735 --> 00:06:25,685
Bây giờ, đây là kết quả của việc sử dụng container.

89
00:06:25,685 --> 00:06:27,550
Di chuyển đến chân trang,

90
00:06:27,550 --> 00:06:32,635
bây giờ bạn có thể thấy rằng nội dung chân trang cũng được xếp hàng bên trong vùng chứa.

91
00:06:32,635 --> 00:06:36,800
Nhưng trang vẫn trông không tuyệt vời,

92
00:06:36,800 --> 00:06:44,705
bây giờ chúng ta sẽ áp dụng các lớp cột cho các divs bên trong bây giờ.

93
00:06:44,705 --> 00:06:48,665
Quay trở lại trang index.html,

94
00:06:48,665 --> 00:06:51,865
bây giờ chúng ta sẽ bắt đầu áp dụng các lớp cột.

95
00:06:51,865 --> 00:06:58,365
Vì vậy, đi đến tiêu đề, để div bên trong thứ hai bên trong jumbotron đây,

96
00:06:58,365 --> 00:07:06,230
hãy để tôi áp dụng một lớp như cột 12, cột sm-6.

97
00:07:06,230 --> 00:07:09,960
Vì vậy, ở đây nội dung trong

98
00:07:09,960 --> 00:07:15,525
div đầu tiên này sẽ chiếm toàn bộ hàng cho kích thước màn hình nhỏ thêm,

99
00:07:15,525 --> 00:07:18,770
và sau đó sẽ chiếm một nửa hàng vì vậy đó là lý do tại sao cột

100
00:07:18,770 --> 00:07:24,235
sm-6 cho kích thước màn hình nhỏ đến thêm lớn.

101
00:07:24,235 --> 00:07:26,480
Bây giờ, tương tự cho div thứ hai ở đây,

102
00:07:26,480 --> 00:07:28,715
mặc dù nó không chứa bất kỳ nội dung có,

103
00:07:28,715 --> 00:07:37,840
tôi sẽ xác định các lớp cột ở đây như cột 12 và sau đó cột sm.

104
00:07:37,840 --> 00:07:40,990
Vì vậy, lưu ý rằng ở đây bằng cách xác định cột 12,

105
00:07:40,990 --> 00:07:45,270
tôi rõ ràng nói rằng đối với kích thước màn hình nhỏ thêm bất cứ nội dung là

106
00:07:45,270 --> 00:07:49,860
bên trong div này sẽ được xếp chồng lên nhau bên dưới nội dung về ở đây.

107
00:07:49,860 --> 00:07:54,150
Và sau đó đối với kích thước màn hình nhỏ đến cực lớn,

108
00:07:54,150 --> 00:07:59,270
nội dung này sẽ chiếm số lượng

109
00:07:59,270 --> 00:08:04,925
cột còn sót lại trong hàng cho kích thước màn hình nhỏ đến cực lớn.

110
00:08:04,925 --> 00:08:09,255
Vì vậy, ở đây trong trường hợp này vì sáu cột được chiếm bởi nội dung này,

111
00:08:09,255 --> 00:08:12,745
điều này sẽ nhận được sáu cột còn lại ở đó.

112
00:08:12,745 --> 00:08:18,030
Di chuyển xuống hàng nội dung ở đây,

113
00:08:18,030 --> 00:08:20,110
cho nội dung ở đây,

114
00:08:20,110 --> 00:08:22,860
vì vậy đối với nội dung đầu tiên này,

115
00:08:22,860 --> 00:08:24,590
mà là một nhãn ở đây,

116
00:08:24,590 --> 00:08:29,240
tôi sẽ áp dụng các lớp học như cột 12,

117
00:08:29,240 --> 00:08:34,985
cột sm-4, cột md-3.

118
00:08:34,985 --> 00:08:39,770
Vì vậy, nói rằng đối với kích thước màn hình nhỏ thêm,

119
00:08:39,770 --> 00:08:42,650
điều này sẽ chiếm toàn bộ hàng, cho nhỏ,

120
00:08:42,650 --> 00:08:44,160
nó sẽ chiếm cột đầy đủ,

121
00:08:44,160 --> 00:08:46,585
và sau đó cho trung bình đến cực lớn,

122
00:08:46,585 --> 00:08:50,395
nó sẽ chiếm ba cột trong hàng.

123
00:08:50,395 --> 00:08:56,810
Bây giờ, vì vậy phần còn lại sẽ bị chiếm đóng bởi nội dung xuống dưới đây,

124
00:08:56,810 --> 00:09:00,575
do đó, tôi sẽ áp dụng các lớp như col,

125
00:09:00,575 --> 00:09:05,715
chỉ ra rằng điều này sẽ được xếp chồng lên nhau bên dưới

126
00:09:05,715 --> 00:09:11,025
nội dung ở đây trong các kích thước màn hình nhỏ thêm,

127
00:09:11,025 --> 00:09:12,690
và sau đó tôi sẽ nói cột sm,

128
00:09:12,690 --> 00:09:16,940
vì vậy điều đó có nghĩa rằng điều này sẽ chiếm còn lại tám cột ở đây, bởi

129
00:09:16,940 --> 00:09:19,300
vì bốn cột được đưa lên bởi cái này,

130
00:09:19,300 --> 00:09:22,360
và sau đó chúng ta sẽ nói cột md,

131
00:09:22,360 --> 00:09:24,320
do đó, có nghĩa là điều này sẽ chiếm

132
00:09:24,320 --> 00:09:27,300
chín cột còn lại vì ba cột được đưa

133
00:09:27,300 --> 00:09:33,230
lên cho kích thước màn hình trung bình đến cực lớn bởi nội dung ở trên đây.

134
00:09:33,230 --> 00:09:37,810
Bây giờ tôi đã xác định cho hàng nội dung đầu tiên,

135
00:09:37,810 --> 00:09:43,070
tôi sẽ lấy cùng một cột lớp ứng dụng ở đây,

136
00:09:43,070 --> 00:09:49,415
và sau đó áp dụng cho hàng thứ hai ở đây,

137
00:09:49,415 --> 00:09:52,345
và cũng là hàng nội dung thứ ba ở đây.

138
00:09:52,345 --> 00:09:57,240
Tương tự như vậy, tôi sẽ sao chép một trong những này và sau đó áp dụng tương tự cho

139
00:09:57,240 --> 00:10:04,690
các divs nội dung xuống dưới đây.

140
00:10:04,690 --> 00:10:11,950
Vì vậy, bây giờ chúng tôi đã cấu hình cả tiêu đề và các cột nội dung ở đó.

141
00:10:11,950 --> 00:10:14,690
Bây giờ chúng ta hãy di chuyển xuống chân trang.

142
00:10:14,690 --> 00:10:21,260
Trong chân trang, bạn sẽ nhận thấy rằng div này chứa ba divs bên trong đây,

143
00:10:21,260 --> 00:10:23,720
vì vậy đối với mỗi trong ba divs bên trong đây,

144
00:10:23,720 --> 00:10:26,570
tôi sẽ áp dụng các lớp cột tương ứng.

145
00:10:26,570 --> 00:10:27,680
Vì vậy, đối với người đầu tiên, trong

146
00:10:27,680 --> 00:10:35,280
đó có liên kết đến các trang khác nhau mà sẽ tạo thành một phần của trang web này,

147
00:10:35,280 --> 00:10:38,395
tôi sẽ áp dụng một lớp cột,

148
00:10:38,395 --> 00:10:46,045
như cột bốn, cột sm-2 ở đây.

149
00:10:46,045 --> 00:10:50,840
Vì vậy, có nghĩa là đối với kích thước màn hình nhỏ,

150
00:10:50,840 --> 00:10:55,320
điều này sẽ chiếm bốn cột và cho nhỏ đến lớn,

151
00:10:55,320 --> 00:10:58,660
nó sẽ chỉ chiếm hai cột ở đây.

152
00:10:59,040 --> 00:11:01,790
Sau đó, cho thứ hai,

153
00:11:01,790 --> 00:11:08,425
div thứ hai trong đó tôi sẽ áp dụng các lớp như cột bảy.

154
00:11:08,425 --> 00:11:12,050
Vì vậy, chú ý rằng tôi có bốn ở đây và sau đó bảy ở đây,

155
00:11:12,050 --> 00:11:14,755
do đó tổng số chiếm 11 cột.

156
00:11:14,755 --> 00:11:16,430
Tôi đã để lại một cột trống.

157
00:11:16,430 --> 00:11:21,520
Tôi sẽ trở lại sau để áp dụng một bù đắp để chăm sóc cột thêm.

158
00:11:21,520 --> 00:11:23,400
Vì vậy, đây là cột bảy,

159
00:11:23,400 --> 00:11:31,345
và sau đó col-sm-5 đến cột thứ hai.

160
00:11:31,345 --> 00:11:33,630
Đây là hai cộng năm, bảy.

161
00:11:33,630 --> 00:11:36,390
Vì vậy, tôi vẫn còn năm cột còn lại,

162
00:11:36,390 --> 00:11:40,685
mà tôi có thể sử dụng cho div thứ ba ở đây.

163
00:11:40,685 --> 00:11:44,610
Bây giờ cho kích thước màn hình nhỏ thêm,

164
00:11:44,610 --> 00:11:47,700
hai nội dung này sẽ được đặt cạnh nhau,

165
00:11:47,700 --> 00:11:52,080
và sau đó div này có chứa liên kết đến

166
00:11:52,080 --> 00:11:58,585
một trang web truyền thông xã hội sẽ được trong một hàng riêng biệt xếp chồng lên nhau dưới đây.

167
00:11:58,585 --> 00:12:04,390
Nhưng đối với kích thước màn hình nhỏ đến lớn, màn

168
00:12:04,390 --> 00:12:07,680
hình đầu tiên sẽ chiếm hai cột,

169
00:12:07,680 --> 00:12:10,240
thứ hai sẽ chiếm năm và phần còn lại sẽ được

170
00:12:10,240 --> 00:12:13,545
đưa lên bởi các liên kết truyền thông xã hội ở đây.

171
00:12:13,545 --> 00:12:15,230
Vì vậy, đối với thứ ba,

172
00:12:15,230 --> 00:12:18,650
tôi sẽ áp dụng các lớp

173
00:12:18,650 --> 00:12:26,515
như col-12 col-sm-4 ở đây.

174
00:12:26,515 --> 00:12:32,625
Vì vậy, col-12 col-sm-4, có nghĩa là điều này sẽ chiếm

175
00:12:32,625 --> 00:12:37,090
một tập hợp riêng biệt của 12 cột

176
00:12:37,090 --> 00:12:42,310
xếp chồng lên nhau bên dưới nội dung trước đó cho kích thước màn hình nhỏ

177
00:12:42,310 --> 00:12:45,040
thêm, nhưng đối với nhỏ đến cực lớn nó sẽ chiếm bốn cột.

178
00:12:45,040 --> 00:12:46,815
Vì vậy, ở đây chúng ta là bốn cộng năm,

179
00:12:46,815 --> 00:12:48,430
chín cộng với hai 11.

180
00:12:48,430 --> 00:12:52,635
Vì vậy, một cột vẫn còn sót lại cho nhỏ đến cực lớn.

181
00:12:52,635 --> 00:12:57,510
Vì vậy, đó là cách tôi sẽ áp dụng cột đó gần nhất với điều này.

182
00:12:57,510 --> 00:13:03,250
Bây giờ, chúng tôi vẫn có một trong những bên dưới đây, nơi chúng tôi chứa bản quyền đối với điều này.

183
00:13:03,250 --> 00:13:08,745
Tôi sẽ áp dụng các lớp như cột tự động, có

184
00:13:08,745 --> 00:13:12,050
nghĩa là nội dung này sẽ chiếm

185
00:13:12,050 --> 00:13:15,515
chỉ đủ cột như là yêu cầu của nội dung ở đó.

186
00:13:15,515 --> 00:13:20,405
Sau đó bạn sẽ thấy rằng tôi sẽ định vị nội dung này ở trung tâm

187
00:13:20,405 --> 00:13:26,385
của màn hình do đó sử dụng một lớp CSS bootstrap.

188
00:13:26,385 --> 00:13:29,035
Chúng ta sẽ đến với điều đó trong bài tập tiếp theo.

189
00:13:29,035 --> 00:13:33,405
Vì vậy, với điều này, chúng tôi đã áp dụng các lớp cột khác nhau cho tiêu đề

190
00:13:33,405 --> 00:13:35,880
, nội dung và chân trang.

191
00:13:35,880 --> 00:13:39,280
Đây là thời điểm tốt để chúng tôi lưu các thay đổi và sau đó đi và

192
00:13:39,280 --> 00:13:43,475
xem trang được cập nhật được lập chỉ mục hoặc HTML.

193
00:13:43,475 --> 00:13:46,690
Hãy xem trang index.html của chúng tôi,

194
00:13:46,690 --> 00:13:51,315
bạn sẽ nhận thấy làm thế nào trong tiêu đề đó là Jumbotron,

195
00:13:51,315 --> 00:13:55,145
nội dung bây giờ chỉ chiếm một nửa màn hình ở đó.

196
00:13:55,145 --> 00:14:00,210
Nửa còn lại của màn hình của hàng cụ thể này bây giờ được để trống.

197
00:14:00,210 --> 00:14:03,180
Đi xuống hàng nội dung,

198
00:14:03,180 --> 00:14:07,685
bạn thấy rằng nhãn ở phía bên trái chiếm

199
00:14:07,685 --> 00:14:14,280
ba hoặc bốn cột tùy thuộc vào kích thước màn hình đang sử dụng

200
00:14:14,280 --> 00:14:18,250
và phần còn lại đang bị chiếm bởi phần còn lại của nội dung.

201
00:14:18,250 --> 00:14:19,780
Vì vậy, ở đây chúng tôi có một

202
00:14:19,780 --> 00:14:21,770
hàng, hàng thứ hai, và hàng thứ ba.

203
00:14:21,770 --> 00:14:26,330
Và sau đó chân trang ở đây bạn có thể thấy rằng các liên kết ở phía bên trái,

204
00:14:26,330 --> 00:14:28,065
các liên kết khác ở giữa,

205
00:14:28,065 --> 00:14:31,150
và sau đó các liên kết truyền thông xã hội ở phía bên phải.

206
00:14:31,150 --> 00:14:35,460
Vì vậy, đây là cho một màn hình kích thước trung bình.

207
00:14:35,460 --> 00:14:42,765
Bây giờ nếu bạn muốn xem cùng một chế độ xem cho một kích thước màn hình nhỏ hoặc nhỏ,

208
00:14:42,765 --> 00:14:45,045
nếu bạn đang sử dụng Chrome,

209
00:14:45,045 --> 00:14:47,960
thì Chrome có các công cụ nhà phát triển mà bạn có thể

210
00:14:47,960 --> 00:14:51,010
bật bằng cách nhấp vào các công cụ nhà phát triển xem

211
00:14:51,010 --> 00:14:53,105
và khi các công cụ phát triển xuất hiện,

212
00:14:53,105 --> 00:14:56,890
bạn sẽ nhận thấy, hãy để tôi giảm kích thước ở đây.

213
00:14:56,890 --> 00:15:00,930
Bạn sẽ nhận thấy điều này nhỏ để các cửa sổ ở đó.

214
00:15:00,930 --> 00:15:06,500
Vì vậy, nhấp vào đó sẽ bật chế độ xem phản hồi cho các trang web này ở đó.

215
00:15:06,500 --> 00:15:15,680
Vì vậy, bạn có thể thấy rằng trong đây quan điểm của cùng một trang web này trên một điểm ảnh đến trang web,

216
00:15:15,680 --> 00:15:19,300
đó là 411 x 731 trong chế độ chân dung,

217
00:15:19,300 --> 00:15:22,805
do đó, tương ứng với một kích thước màn hình nhỏ,

218
00:15:22,805 --> 00:15:25,300
vì vậy bạn có thể thấy cách nội dung được đặt ra.

219
00:15:25,300 --> 00:15:28,145
Vì vậy, bạn có thể thấy nội dung Jumbotron ở

220
00:15:28,145 --> 00:15:31,745
đó và sau đó là phần còn lại của nội dung dưới đây.

221
00:15:31,745 --> 00:15:34,585
Và sau đó xuống chân trang.

222
00:15:34,585 --> 00:15:40,500
Vì vậy, trong chân trang, bạn có thể thấy các liên kết và quảng cáo đã đặt cạnh nhau như thế nào.

223
00:15:40,500 --> 00:15:45,880
Bây giờ giảm kích thước màn hình để chúng ta có thể thấy làm thế nào mà chân trang được đặt ra ở đây.

224
00:15:45,880 --> 00:15:48,735
Phần còn lại, bạn có các liên kết ở phía bên trái,

225
00:15:48,735 --> 00:15:51,470
bạn có địa chỉ ở phía bên phải,

226
00:15:51,470 --> 00:15:56,515
và sau đó các mạng xã hội liên kết xuống dưới trong một hàng riêng biệt ở đây,

227
00:15:56,515 --> 00:15:59,775
và sau đó là bản quyền ở phía dưới đó.

228
00:15:59,775 --> 00:16:04,935
Vì vậy, đây là quan điểm thú vị mà chúng ta thấy cho kích thước màn hình nhỏ thêm.

229
00:16:04,935 --> 00:16:07,450
Quay trở lại mã của chúng tôi ở đây,

230
00:16:07,450 --> 00:16:11,710
tôi sẽ bây giờ áp dụng các lớp học thứ tự và bù đắp cho

231
00:16:11,710 --> 00:16:17,255
nội dung này để hiển thị nội dung một cách hơi khác nhau.

232
00:16:17,255 --> 00:16:21,850
Vì vậy, đi đến hàng nội dung ở đây,

233
00:16:21,850 --> 00:16:27,820
cho hai divs ở đây có chứa nội dung,

234
00:16:27,820 --> 00:16:32,020
tôi sẽ áp dụng các lớp như

235
00:16:32,020 --> 00:16:40,150
trật tự SM-last cho hàng đầu tiên ở đây.

236
00:16:40,150 --> 00:16:50,120
Và sau đó cho rằng một xuống dưới đây tôi sẽ áp dụng trật tự sm đầu tiên để hàng xuống đây.

237
00:16:50,120 --> 00:16:53,300
Vì vậy, có nghĩa là khi nội dung

238
00:16:53,300 --> 00:16:56,090
này được hiển thị, nội dung này sẽ được kéo sang phía bên trái của màn hình và sau đó

239
00:16:56,090 --> 00:16:58,880
cột này sẽ được đẩy sang phía bên phải của màn hình.

240
00:16:58,880 --> 00:17:02,400
Vì vậy, điều này sẽ được đặt hàng ở phía bên phải và điều này sẽ được đặt hàng ở phía bên trái.

241
00:17:02,400 --> 00:17:08,075
Như tôi đã giải thích về các mệnh đề thứ tự trong bài giảng trước đó.

242
00:17:08,075 --> 00:17:09,880
Tương tự như vậy từ hàng thứ hai,

243
00:17:09,880 --> 00:17:13,330
tôi sẽ để nó như vậy nhưng từ hàng thứ ba tôi sẽ áp dụng

244
00:17:13,330 --> 00:17:17,240
cùng một tập hợp các lớp học thứ tự.

245
00:17:17,240 --> 00:17:20,290
Vì vậy, tôi sẽ đi đến hàng thứ ba ở đây,

246
00:17:20,290 --> 00:17:25,425
và sau đó áp dụng lệnh SM-last cho cái này,

247
00:17:25,425 --> 00:17:30,850
và sau đó tôi sẽ áp dụng lệnh SM-first cho cái này.

248
00:17:31,460 --> 00:17:36,450
Và vì vậy cái này một lần nữa sẽ được sắp xếp lại

249
00:17:36,450 --> 00:17:38,300
sao cho nội dung này sẽ xuất hiện

250
00:17:38,300 --> 00:17:40,870
ở phía bên trái và nội dung này sẽ xuất hiện ở phía bên phải.

251
00:17:40,870 --> 00:17:46,640
Đây chỉ là một cách để định vị nội dung một cách thú vị hơn một chút.

252
00:17:46,640 --> 00:17:50,210
Bây giờ di chuyển xuống chân trang ở đây,

253
00:17:50,210 --> 00:17:54,690
bây giờ tôi sẽ áp dụng một lớp bù ở đây.

254
00:17:54,690 --> 00:18:00,440
Vì vậy, lưu ý rằng tôi đã đề cập rằng hai cột này sẽ chiếm bốn cộng bảy, 11.

255
00:18:00,440 --> 00:18:02,130
Vì vậy, một cột là còn sót lại.

256
00:18:02,130 --> 00:18:07,295
Vì vậy, tôi sẽ áp dụng một lớp offset-1 cho một trong những này.

257
00:18:07,295 --> 00:18:12,320
Vì vậy, có nghĩa là nội dung này trên div này sẽ được đẩy ngay bởi một cột ở đây.

258
00:18:12,320 --> 00:18:14,710
Tương tự như vậy kể từ khi tôi nói bù đắp một,

259
00:18:14,710 --> 00:18:23,145
điều này sẽ được áp dụng cho thêm nhỏ tất cả các cách lên đến kích thước màn hình lớn thêm.

260
00:18:23,145 --> 00:18:28,235
Và đó là việc sử dụng lớp offset.

261
00:18:28,235 --> 00:18:30,060
Vì vậy, bây giờ chúng tôi đã thực hiện các thay đổi, chúng ta

262
00:18:30,060 --> 00:18:36,285
hãy lưu các thay đổi và sau đó đi và xem trang web của chúng tôi trong trình duyệt.

263
00:18:36,285 --> 00:18:38,430
Quay lại trình duyệt đó,

264
00:18:38,430 --> 00:18:43,715
bây giờ bạn thấy tiêu đề như thế nào trước đây,

265
00:18:43,715 --> 00:18:46,850
nhưng trong hàng nội dung đầu tiên,

266
00:18:46,850 --> 00:18:49,090
bạn thấy rằng nội dung này đã được đẩy sang

267
00:18:49,090 --> 00:18:51,925
bên trái và nhãn sang bên phải.

268
00:18:51,925 --> 00:18:56,090
Hàng thứ hai là khác nhau đã được duy trì giống như trước đây.

269
00:18:56,090 --> 00:18:58,330
Nhưng đối với thứ ba bạn sẽ thấy rằng điều này đã được

270
00:18:58,330 --> 00:19:00,780
đẩy sang bên phải và điều này đã được đẩy sang bên trái.

271
00:19:00,780 --> 00:19:06,900
Vì vậy, đó là việc sử dụng các đơn đặt hàng-SM-cuối cùng và đặt hàng-SM-đầu tiên lớp là có.

272
00:19:06,900 --> 00:19:08,530
Bây giờ đi đến chân trang,

273
00:19:08,530 --> 00:19:18,195
bây giờ bạn thấy rằng nội dung trong div đầu tiên ở đây đã được đẩy ngay bởi một cột,.

274
00:19:18,195 --> 00:19:21,560
Vì vậy, bạn có thể thấy rằng có một cột của khoảng trắng ở đây,

275
00:19:21,560 --> 00:19:27,790
và điều này không được đẩy đúng và những cái còn lại đã được định dạng cho phù hợp.

276
00:19:27,790 --> 00:19:32,235
Vì vậy, với điều này, chúng tôi hoàn thành các thay

277
00:19:32,235 --> 00:19:37,790
đổi đối với trang index.html của chúng tôi hoặc trang bổ sung cho bài tập cụ thể này.

278
00:19:37,790 --> 00:19:41,665
Với điều này, chúng tôi hoàn thành bài tập đặc biệt này.

279
00:19:41,665 --> 00:19:46,235
Trong bài tập này, chúng tôi đã xem xét việc sử dụng các

280
00:19:46,235 --> 00:19:53,800
lớp chứa, hàng và cột để thiết kế trang web của chúng tôi đẹp hơn một chút.

281
00:19:53,800 --> 00:19:57,705
Trong phần thứ hai của bài tập mà sẽ theo sau này,

282
00:19:57,705 --> 00:20:04,680
chúng tôi sẽ thêm nhiều hơn để cố gắng và cải thiện cách các trang web này được hiển thị.

283
00:20:04,680 --> 00:20:08,375
Nó vẫn không phải là sự hài lòng của tôi.

284
00:20:08,375 --> 00:20:12,920
Rõ ràng, vẫn còn chỗ để cải thiện.

285
00:20:12,920 --> 00:20:16,290
Đây có thể là thời điểm tốt để bạn thực hiện một nhận xét git với

286
00:20:16,290 --> 00:20:21,470
thông điệp Bootstrap Grid Part One.