1
00:00:03,750 --> 00:00:11,555
Bài tập tiếp theo của chúng tôi xem xét cách hiển thị nội dung trên trang web của chúng tôi.

2
00:00:11,555 --> 00:00:17,190
Họ nhìn vào cách chúng tôi có thể bao gồm các bảng vào trang web của chúng tôi và cách chúng tôi có thể tạo kiểu cho

3
00:00:17,190 --> 00:00:23,845
các bảng này bằng cách sử dụng các lớp học của Bootstrap để tạo kiểu bảng,

4
00:00:23,845 --> 00:00:27,720
bao gồm thiết kế đáp ứng các bảng.

5
00:00:27,720 --> 00:00:30,860
Chúng ta cũng sẽ xem xét một thành phần linh hoạt khác

6
00:00:30,860 --> 00:00:34,290
có sẵn trong Bootstrap gọi là thẻ.

7
00:00:34,290 --> 00:00:39,125
Thẻ cho phép bạn hiển thị nội dung theo hàng triệu cách.

8
00:00:39,125 --> 00:00:44,495
Vì vậy, chúng ta sẽ xem xét hai cách khác nhau của việc sử dụng thẻ để hiển thị nội dung.

9
00:00:44,495 --> 00:00:49,275
Sau đó, chúng ta sẽ thấy việc sử dụng thẻ một lần nữa và một lần nữa

10
00:00:49,275 --> 00:00:56,635
cho các thiết kế trong tương lai của một số phần nhất định trên trang web của chúng tôi.

11
00:00:56,635 --> 00:01:02,520
Để bắt đầu, hãy mở trang aboutus.html.

12
00:01:02,520 --> 00:01:06,035
Chúng tôi sẽ chèn một bảng và hai thẻ

13
00:01:06,035 --> 00:01:10,215
vào trang aboutus.html để hiển thị một số thẻ.

14
00:01:10,215 --> 00:01:19,130
Đầu tiên, chúng ta hãy từ từ di chuyển xuống cho đến khi sau thẻ đó cho thông tin lãnh đạo,

15
00:01:19,130 --> 00:01:23,170
và ngay tại đó tôi sẽ giới thiệu một div trong

16
00:01:23,170 --> 00:01:28,045
đó tôi sẽ kèm theo bảng ở đây.

17
00:01:28,045 --> 00:01:31,640
Vì vậy, tôi sẽ giới thiệu một hàng mới ở đây,

18
00:01:31,640 --> 00:01:38,135
với lớp như hàng nội dung.

19
00:01:38,135 --> 00:01:41,185
Và bên trong div này,

20
00:01:41,185 --> 00:01:51,205
chúng tôi sẽ giới thiệu một cột sẽ lưu trữ bảng ở đây.

21
00:01:51,205 --> 00:01:55,850
Vì vậy, tôi sẽ giới thiệu một cột, cột 12,

22
00:01:55,870 --> 00:02:05,045
cột sm-9 và đóng div.

23
00:02:05,045 --> 00:02:11,605
Và bên trong div, hãy để tôi đưa ra một tiêu đề ở đây

24
00:02:11,605 --> 00:02:21,940
Sự kiện và số liệu và đóng h2.

25
00:02:23,490 --> 00:02:29,770
Ngay sau đó, hãy để tôi giới thiệu một div,

26
00:02:33,140 --> 00:02:43,320
rằng các lớp cột sm và cột sm-3 và đóng lại div đó có.

27
00:02:43,320 --> 00:02:46,850
Ngay bây giờ chúng ta sẽ để lại div thứ hai trống.

28
00:02:46,850 --> 00:02:53,140
Tôi sẽ điền vào bảng vào div đầu tiên ở đây và

29
00:02:53,140 --> 00:03:00,435
sau đó chúng tôi sẽ có một cái nhìn nhanh chóng vào bảng sau khi tôi thêm vào mã cho bảng.

30
00:03:00,435 --> 00:03:04,525
Vì vậy, ở đây tôi đã liệt kê trong mã cho bảng.

31
00:03:04,525 --> 00:03:12,190
Chúng ta hãy nhìn nhanh vào bảng và sau đó chúng ta sẽ trở lại để thảo luận về mã này ở đây.

32
00:03:12,190 --> 00:03:20,075
Đi tới trang Giới thiệu của chúng tôi mà chúng tôi đã làm việc từ trước đó,

33
00:03:20,075 --> 00:03:23,080
sau phần Lãnh đạo Công ty,

34
00:03:23,080 --> 00:03:27,645
bạn sẽ thấy một hàng mới ở đây giới thiệu bảng.

35
00:03:27,645 --> 00:03:30,270
Vì vậy, lưu ý cách bảng được phong cách,

36
00:03:30,270 --> 00:03:36,695
vì vậy chúng tôi có tiêu đề với một h2 bao gồm ở đó,

37
00:03:36,695 --> 00:03:40,465
nhưng chúng ta hãy tập trung cụ thể vào bảng này.

38
00:03:40,465 --> 00:03:43,735
Vì vậy, bạn thấy rằng bảng này đã được tạo kiểu

39
00:03:43,735 --> 00:03:48,125
bằng cách sử dụng một số lớp Bootstrap được sử dụng để nâng cao bảng.

40
00:03:48,125 --> 00:03:54,735
Tiêu đề đã được kết xuất với một nền tối,

41
00:03:54,735 --> 00:04:00,770
và sau đó các quy tắc được thiết kế theo cách mà các hàng thay thế có

42
00:04:00,770 --> 00:04:07,295
màu khác nhau để bạn có thể phân biệt rõ ràng các hàng của bảng này.

43
00:04:07,295 --> 00:04:13,185
Đây là những gì trong thuật ngữ Bootstrap được gọi là bảng sọc.

44
00:04:13,185 --> 00:04:17,360
Đây là một ví dụ về cách bạn có thể tạo kiểu cho một bảng.

45
00:04:17,360 --> 00:04:23,250
Bây giờ thú vị, nếu bạn nhìn vào cùng một bảng trong một thiết bị nhỏ,

46
00:04:23,250 --> 00:04:25,420
bạn sẽ nhận thấy rằng bảng vẫn còn

47
00:04:25,420 --> 00:04:29,450
hiển thị ngoại trừ bảng này bây giờ trở nên có thể cuộn được.

48
00:04:29,450 --> 00:04:34,280
Vì vậy, bất cứ điều gì có thể được hiển thị trong nội dung sẽ được hiển

49
00:04:34,280 --> 00:04:39,120
thị và phần còn lại của bảng có thể được cuộn theo chiều ngang tại chỗ.

50
00:04:39,120 --> 00:04:47,840
Vì vậy, đây là thành phần đáp ứng của Bootstrap hỗ trợ cho các bảng trong hành động.

51
00:04:47,840 --> 00:04:52,120
Bây giờ chúng ta hãy đi và nhìn vào mã chính nó.

52
00:04:52,120 --> 00:04:54,970
Bây giờ rõ ràng bảng này là khá đơn giản,

53
00:04:54,970 --> 00:04:57,924
nó có một loạt các hàng và một số cột.

54
00:04:57,924 --> 00:05:02,070
Vì vậy, bạn sẽ được mong đợi tôi sử dụng các

55
00:05:02,070 --> 00:05:06,365
thẻ thứ, td và tr điển hình ở đó.

56
00:05:06,365 --> 00:05:08,225
Chuyển đổi trở lại mã,

57
00:05:08,225 --> 00:05:12,490
bạn sẽ nhận thấy rằng tôi bao quanh bảng này bên trong

58
00:05:12,490 --> 00:05:16,840
div mà tôi đã áp dụng bảng lớp đáp ứng.

59
00:05:16,840 --> 00:05:19,700
Vì vậy, đây là những gì làm cho bảng này đáp ứng để trên các

60
00:05:19,700 --> 00:05:24,490
màn hình nhỏ hơn, bạn có thể cuộn theo chiều ngang bảng.

61
00:05:24,490 --> 00:05:26,720
Bây giờ đối với bảng chính nó, hãy

62
00:05:26,720 --> 00:05:29,800
chú ý làm thế nào tôi đã áp dụng hai lớp học.

63
00:05:29,800 --> 00:05:31,230
Một là lớp bảng,

64
00:05:31,230 --> 00:05:34,825
vì vậy đây là ghi đè lên các

65
00:05:34,825 --> 00:05:39,375
hiển thị bảng mặc định trên các trình duyệt bằng cách cung cấp các lớp học riêng của Bootstrap.

66
00:05:39,375 --> 00:05:41,760
Và cái thứ hai nói là tấm sọc.

67
00:05:41,760 --> 00:05:48,280
Vì vậy, đây là những gì thiết kế một bảng với các hàng thay thế trong màu sắc khác nhau ở đây.

68
00:05:48,280 --> 00:05:50,610
Sau đó, người đứng đầu chính nó,

69
00:05:50,610 --> 00:05:55,050
vì vậy bạn có thể thấy rằng các tiêu đề được mô tả ở đây với lớp thead-tối,

70
00:05:55,050 --> 00:05:57,925
vì vậy điều này làm cho đầu tối.

71
00:05:57,925 --> 00:06:06,630
Và sau đó bạn sẽ thấy bảng vẽ chính nó được mô tả ở đây với các thẻ thứ ở đây.

72
00:06:06,630 --> 00:06:09,480
Vì vậy, đây là định nghĩa bảng tiêu chuẩn.

73
00:06:09,480 --> 00:06:16,410
Cơ thể của bảng chính nó là tiêu chuẩn html sử dụng tr,

74
00:06:16,410 --> 00:06:22,760
và td, và các yếu tố thứ mà bạn đã quen thuộc với trong html5.

75
00:06:22,760 --> 00:06:27,180
Vì vậy, đây là những gì bảng được xây dựng với,

76
00:06:27,180 --> 00:06:31,075
và sau đó bạn đóng cơ thể bảng. Vì vậy, đó là về nó.

77
00:06:31,075 --> 00:06:36,670
Vì vậy, tất cả chúng ta là duy nhất về Bootstrap chính nó là ứng dụng của các

78
00:06:36,670 --> 00:06:40,060
lớp Bootstrap cụ thể này cho

79
00:06:40,060 --> 00:06:47,130
các yếu tố bảng chính nó để phong cách nó hơn nữa,

80
00:06:47,130 --> 00:06:51,360
để phù hợp với một trang web thiết kế Bootstrap.

81
00:06:51,360 --> 00:06:55,360
Thành phần tiếp theo mà tôi sẽ thêm vào

82
00:06:55,360 --> 00:06:59,595
trang aboutus.html là một thành phần thẻ trong Bootstrap.

83
00:06:59,595 --> 00:07:02,650
Thành phần thẻ cho phép chúng tôi hiển thị nội dung

84
00:07:02,650 --> 00:07:06,850
bằng cách đặt nó ngoài phần còn lại của nội dung đó.

85
00:07:06,850 --> 00:07:12,925
Bây giờ ở đây, di chuyển đến hàng đầu tiên ở đây, ở

86
00:07:12,925 --> 00:07:16,925
đó chúng tôi có lịch sử của chúng tôi trong

87
00:07:16,925 --> 00:07:20,915
việc sử dụng div thứ hai, nhận thấy rằng div đầu tiên đã chiếm col-sm-6,

88
00:07:20,915 --> 00:07:23,915
div thứ hai hiện đang trống.

89
00:07:23,915 --> 00:07:25,355
Vì vậy, để div này,

90
00:07:25,355 --> 00:07:31,320
tôi sẽ thêm vào lớp như col-sm.

91
00:07:31,320 --> 00:07:40,670
Sau đó, đi vào div này tôi sẽ giới thiệu một div để thẻ lớp ở đây.

92
00:07:40,670 --> 00:07:42,325
Vì vậy, bên trong những div,

93
00:07:42,325 --> 00:07:46,755
tôi sẽ xây dựng thẻ của tôi để hiển thị một số nội dung ở đây.

94
00:07:46,755 --> 00:07:53,870
Vì vậy, trong div này, chúng tôi sẽ giới thiệu một h3 rằng

95
00:07:53,870 --> 00:08:05,235
lớp như thẻ tiêu đề bg-chính.

96
00:08:05,235 --> 00:08:08,110
Vì vậy, bạn sẽ thấy rằng h3 này sẽ được hiển thị như

97
00:08:08,110 --> 00:08:12,755
một tiêu đề thẻ với nền đó là chính

98
00:08:12,755 --> 00:08:21,165
và sau đó văn bản trắng mà Bootstrap lớp sẽ xác định các văn bản được màu trắng.

99
00:08:21,165 --> 00:08:24,715
Và sau đó bên trong h3 này,

100
00:08:24,715 --> 00:08:31,090
tôi sẽ giới thiệu tiêu đề cho thẻ này ở đây

101
00:08:31,090 --> 00:08:37,580
là 'Sự kiện At a Glance. '

102
00:08:37,580 --> 00:08:41,950
Vì vậy mà tôi có thể hiển thị một số nội dung bên trong div này ở đây.

103
00:08:41,950 --> 00:08:44,915
Bây giờ, để thẻ này,

104
00:08:44,915 --> 00:08:48,520
tiếp theo tôi sẽ thêm vào một div bên trong

105
00:08:48,520 --> 00:08:55,950
ở đây với các lớp như thẻ cơ thể,

106
00:08:55,950 --> 00:08:59,080
và bên trong thẻ này cơ thể sẽ là

107
00:08:59,080 --> 00:09:03,370
nội dung thực tế đã được hiển thị trong thẻ này.

108
00:09:03,370 --> 00:09:10,310
Hãy lưu các thay đổi và sau đó đi và xem nhanh trang web của chúng tôi.

109
00:09:10,310 --> 00:09:12,100
Đi đến trang web của chúng

110
00:09:12,100 --> 00:09:15,860
tôi, chúng tôi đã có thể thấy thẻ hình thành trong trang web của chúng tôi,

111
00:09:15,860 --> 00:09:19,620
vì vậy bạn có thể thấy rằng nửa bên trái bị chiếm bởi Lịch sử

112
00:09:19,620 --> 00:09:24,085
và nửa bên phải bạn sẽ thấy thẻ được đưa vào vị trí.

113
00:09:24,085 --> 00:09:27,135
Hãy thêm một số nội dung vào thẻ này.

114
00:09:27,135 --> 00:09:29,140
Đi vào khối thẻ này,

115
00:09:29,140 --> 00:09:32,220
bây giờ tôi sẽ sử dụng một danh sách mô tả

116
00:09:32,220 --> 00:09:36,080
và danh sách mô tả này trong Bootstrap cho phép tôi

117
00:09:36,080 --> 00:09:45,705
áp dụng các lớp hàng và cột cho nó và do đó định dạng nội dung bên trong.

118
00:09:45,705 --> 00:09:48,360
Vì vậy, bên trong danh sách mô tả này,

119
00:09:48,360 --> 00:09:52,190
Tôi sẽ thêm

120
00:09:54,890 --> 00:10:00,110
vào dt rằng lớp và col-6 ở đây,

121
00:10:00,110 --> 00:10:03,420
vì vậy có nghĩa là điều này sẽ chiếm sáu cột

122
00:10:03,420 --> 00:10:07,085
bên trong danh sách mô tả này mà chính nó là một hàng ở đây.

123
00:10:07,085 --> 00:10:13,785
Vì vậy, làm tổ như bạn thấy đi vào hình ảnh ở đây.

124
00:10:13,785 --> 00:10:16,250
Vì vậy, để dt này,

125
00:10:16,250 --> 00:10:20,190
Tôi sẽ thêm vào vì vậy tiêu đề mô tả này ở đây,

126
00:10:20,190 --> 00:10:25,470
và sau đó dưới đây tôi sẽ thêm vào dd với

127
00:10:25,470 --> 00:10:33,330
lớp col-6 ở đây và sau đó tôi có thể thêm trong một số bối cảnh ở đây.

128
00:10:36,960 --> 00:10:40,310
Và dd ở đây.

129
00:10:41,880 --> 00:10:46,755
Hãy lưu các thay đổi và xem nhanh thẻ của chúng tôi.

130
00:10:46,755 --> 00:10:50,445
Đi đến thẻ của chúng tôi, bây giờ bạn có thể xem

131
00:10:50,445 --> 00:10:55,265
danh sách mô tả cho phép tôi hiển thị thông tin như thế nào.

132
00:10:55,265 --> 00:11:02,700
Bên trong thẻ của tôi, bạn có thể thấy phía bên trái và bên phải hiển thị rõ ràng.

133
00:11:02,700 --> 00:11:07,035
Ở đây chúng tôi đang tận dụng lợi thế của danh sách mô tả và,

134
00:11:07,035 --> 00:11:09,215
thêm vào thông tin ở đó.

135
00:11:09,215 --> 00:11:14,590
Hãy để tôi hoàn thành các phần còn lại ở đây bằng cách thêm vào mã,

136
00:11:14,590 --> 00:11:19,745
và sau đó quay lại và xem phiên bản cuối cùng của thẻ này.

137
00:11:19,745 --> 00:11:22,850
Ở đây, bạn có thể thấy rằng tôi đã hoàn thành thêm vào

138
00:11:22,850 --> 00:11:25,895
các phần còn lại của danh sách mô tả của tôi.

139
00:11:25,895 --> 00:11:31,155
Chúng ta hãy đi và xem nhanh phiên bản cuối cùng của lá bài đó.

140
00:11:31,155 --> 00:11:33,290
Hãy nhìn vào thẻ,

141
00:11:33,290 --> 00:11:34,620
và làm thế nào nó được hình thành.

142
00:11:34,620 --> 00:11:39,340
Ở đây, bây giờ bạn có thể thấy làm thế nào chúng ta có thể sử dụng một thẻ để hiển thị một

143
00:11:39,340 --> 00:11:41,760
số nội dung trong trang web của chúng tôi và đặt nó

144
00:11:41,760 --> 00:11:44,725
ngoài phần còn lại của nội dung vào trang Web.

145
00:11:44,725 --> 00:11:50,325
Vì vậy, một thẻ là một thành phần rất linh hoạt cho phép chúng ta hiển thị nội dung như thế này.

146
00:11:50,325 --> 00:11:52,500
Hãy tiếp tục với bài tập này,

147
00:11:52,500 --> 00:11:56,785
thêm vào một thẻ khác vào trang web này.

148
00:11:56,785 --> 00:12:01,410
Bây giờ chúng ta hãy trở lại trang aboutus.html của chúng tôi.

149
00:12:01,410 --> 00:12:06,170
Và ngay bên dưới thẻ mà chúng tôi đã thêm trước đây,

150
00:12:06,170 --> 00:12:14,790
tôi sẽ thêm vào một div khác với lớp “col-12" ở đây.

151
00:12:14,790 --> 00:12:16,910
Và sau đó, bên trong div này,

152
00:12:16,910 --> 00:12:24,670
Tôi sẽ xây dựng một thẻ ở đây để hiển thị một số thông tin bổ sung.

153
00:12:24,670 --> 00:12:26,495
Vì vậy, bên trong div này,

154
00:12:26,495 --> 00:12:30,210
tôi sẽ xây dựng một thẻ với

155
00:12:30,210 --> 00:12:38,915
lớp “thẻ thẻ-cơ thể bg-ánh sáng.”

156
00:12:38,915 --> 00:12:45,580
Vì vậy, bạn sẽ thấy rằng tôi đang áp dụng cả thẻ và thẻ cơ thể để cùng một div ở đây.

157
00:12:45,580 --> 00:12:49,300
Vì vậy, điều đó có nghĩa rằng thẻ đặc biệt này sẽ không có

158
00:12:49,300 --> 00:12:54,835
bất kỳ tiêu đề thẻ nhưng thay vào đó chỉ chứa thẻ cơ thể ở đây.

159
00:12:54,835 --> 00:12:59,545
Và sau đó, cũng có thể, bg-light có nghĩa là nền sẽ có màu nhạt.

160
00:12:59,545 --> 00:13:05,120
Phần nào của một màu xám được thêm vào nền.

161
00:13:05,120 --> 00:13:10,495
Vì vậy, điều này cũng tìm kiếm thẻ này ngoài phần còn lại của nội dung ở đây.

162
00:13:10,495 --> 00:13:12,815
Bây giờ, bên trong tấm thẻ này,

163
00:13:12,815 --> 00:13:16,250
tôi sẽ sử dụng một mã khối để hiển thị một

164
00:13:16,250 --> 00:13:20,700
số thông tin thú vị nhỏ ở đó.

165
00:13:20,700 --> 00:13:23,980
Vì vậy, tôi sẽ sử dụng một blockquote.

166
00:13:23,980 --> 00:13:30,965
Đây cũng là một thẻ HTML ở đây.

167
00:13:30,965 --> 00:13:37,005
Và sau đó để điều này, tôi sẽ áp dụng các lớp blockquote của Bootstrap.

168
00:13:37,005 --> 00:13:42,590
Vì vậy, Bootstrap phong cách blockquote này theo cách riêng của nó.

169
00:13:42,980 --> 00:13:46,429
Vì vậy, chúng ta hãy đóng lại câu trích dẫn đó.

170
00:13:46,429 --> 00:13:47,870
Và bên trong blockquote này,

171
00:13:47,870 --> 00:13:51,910
tôi sẽ bao gồm một báo giá ở đây.

172
00:13:51,910 --> 00:13:54,320
Vì vậy, tôi sẽ bắt đầu với một p,

173
00:13:54,320 --> 00:13:56,760
và áp dụng một lớp được gọi là mb-0.

174
00:13:56,760 --> 00:14:02,920
MB-0 là một lớp tiện ích mà Bootstrap cung cấp.

175
00:14:02,920 --> 00:14:05,775
Điều này có nghĩa là không margin-bottom.

176
00:14:05,775 --> 00:14:09,640
Đối với đặc biệt này, bất cứ điều gì nó được bao gồm trong thẻ p này,

177
00:14:09,640 --> 00:14:12,135
chúng tôi sẽ có một lề dưới cùng của zero.

178
00:14:12,135 --> 00:14:15,865
Và điều này giúp tôi hiển thị nội dung một cách chính xác ở đây.

179
00:14:15,865 --> 00:14:24,900
Vì vậy, ở đây tôi sẽ thêm vào nội dung thực tế ở đó,

180
00:14:49,850 --> 00:14:54,970
và sau đó đóng p này Vì vậy, p này chứa các báo giá thực tế.

181
00:14:54,970 --> 00:14:56,560
Bây giờ, để báo giá này,

182
00:14:56,560 --> 00:14:59,180
vì vậy bạn thấy rằng trong nội dung của bạn,

183
00:14:59,180 --> 00:15:05,320
bạn cũng có thể bao gồm trích dẫn trong mã của bạn ở đó.

184
00:15:05,320 --> 00:15:10,730
Vì vậy, để điều này, tôi cũng có thể thêm một chân trang với lớp học.

185
00:15:10,730 --> 00:15:14,900
Vì vậy, hãy để tôi đẩy thụt lề chân trang.

186
00:15:14,900 --> 00:15:20,080
Vì vậy, chân trang này cũng là một lớp mà blockquote hỗ trợ.

187
00:15:20,080 --> 00:15:26,620
Vì vậy, bất cứ điều gì bạn bao gồm trong blockquote,

188
00:15:28,570 --> 00:15:31,105
cùng với chân trang,

189
00:15:31,105 --> 00:15:39,540
sẽ cho phép bạn hiển thị tác giả của báo giá này.

190
00:15:40,420 --> 00:15:45,620
Vì vậy, ở đây tôi bao gồm các tác giả,

191
00:15:45,620 --> 00:15:49,165
và sau đó một nữa.

192
00:15:49,165 --> 00:15:58,860
Sử dụng trích dẫn, tôi thậm chí có thể trích dẫn nguồn gốc của báo giá này.

193
00:16:01,740 --> 00:16:04,790
Vì vậy, bạn có thể thấy điều đó. Một

194
00:16:24,870 --> 00:16:32,955
lần nữa, đây chỉ là một số trích dẫn mà tôi đang sử dụng chỉ để cho vui để cho bạn thấy,

195
00:16:32,955 --> 00:16:35,355
cũng đồng thời minh họa,

196
00:16:35,355 --> 00:16:42,405
làm thế nào blockquote hoạt động,

197
00:16:42,405 --> 00:16:47,800
và cũng làm thế nào chúng ta có thể tạo ra một loại thẻ trong Bootstrap.

198
00:16:47,800 --> 00:16:55,845
Vì vậy, với điều này, chúng tôi đã thêm vào trong mã để hiển thị blockquote ở đây.

199
00:16:55,845 --> 00:16:57,890
Vì vậy, hãy để tôi xem nếu điều đó thay đổi,

200
00:16:57,890 --> 00:17:04,995
và sau đó chúng tôi sẽ đi và xem cách báo giá này được hiển thị trong trang web của chúng tôi.

201
00:17:04,995 --> 00:17:09,270
Đi đến trình duyệt, trong trang của chúng tôi,

202
00:17:09,270 --> 00:17:14,310
bạn có thể thấy rằng lịch sử của chúng tôi và các sự kiện trong nháy mắt được hiển thị cạnh nhau.

203
00:17:14,310 --> 00:17:22,360
Dưới đó, tôi có đoạn nội dung dài này ở đây.

204
00:17:22,360 --> 00:17:27,850
Chúng ta hãy nhìn vào cùng một trang trong một màn hình nhỏ thêm.

205
00:17:27,850 --> 00:17:29,250
Vì vậy, trong một màn hình nhỏ,

206
00:17:29,250 --> 00:17:33,840
bạn có thể thấy rằng lịch sử và sự kiện được xếp chồng lên nhau,

207
00:17:33,840 --> 00:17:38,120
và báo giá nằm ngay dưới đây trong thẻ riêng của nó.

208
00:17:38,120 --> 00:17:40,130
Vì vậy, bạn có thể thấy hai thẻ,

209
00:17:40,130 --> 00:17:42,225
một bên dưới khác ở đây,

210
00:17:42,225 --> 00:17:45,860
và sau đó bảng chính nó được hiển thị ở phía dưới.

211
00:17:45,860 --> 00:17:50,685
Vì vậy, bảng chính nó là một bảng có thể cuộn ở đây.

212
00:17:50,685 --> 00:17:54,885
Vì vậy, với điều này, chúng tôi hoàn thành bài tập này.

213
00:17:54,885 --> 00:17:56,330
Vì vậy, trong bài tập này,

214
00:17:56,330 --> 00:18:05,950
chúng tôi đã học được về cách chúng tôi có thể sử dụng bảng và thẻ để hiển thị nội dung trong trang web của chúng tôi.

215
00:18:05,950 --> 00:18:08,690
Bây giờ chúng tôi đã hoàn thành bài tập này,

216
00:18:08,690 --> 00:18:12,610
đó là thời điểm tốt để thực hiện một cam kết git.