1
00:00:03,800 --> 00:00:07,660
Chúng tôi sẽ tiếp tục với bài tập lưới bootstrap

2
00:00:07,660 --> 00:00:11,074
mà chúng tôi đã bắt đầu trong bài tập trước đó.

3
00:00:11,074 --> 00:00:14,535
Chúng tôi sẽ làm một vài điều nữa để

4
00:00:14,535 --> 00:00:18,965
trang index.html của chúng tôi để cải thiện bố cục của nó.

5
00:00:18,965 --> 00:00:24,085
Chúng tôi sẽ sử dụng một số lớp CSS tùy chỉnh và thêm một số màu vào

6
00:00:24,085 --> 00:00:30,535
trang index.html của chúng tôi bằng cách sử dụng các lớp CSS tùy chỉnh.

7
00:00:30,535 --> 00:00:39,265
Điều tiếp theo mà tôi sẽ làm là đi xuống chân trang và cho UL này ở đây,

8
00:00:39,265 --> 00:00:42,790
bạn sẽ nhận thấy rằng danh sách này khi bạn nhìn vào

9
00:00:42,790 --> 00:00:49,705
trang web của chúng tôi được hiển thị trong trang web bằng cách sử dụng danh sách dấu đầu dòng này ở đây.

10
00:00:49,705 --> 00:00:52,820
Tôi không quá hài lòng với danh sách dấu đầu dòng này,

11
00:00:52,820 --> 00:00:59,350
tôi muốn loại bỏ các điểm đầu dòng và sau đó chỉ đơn giản là hiển thị chúng như là chỉ có các liên kết có.

12
00:00:59,350 --> 00:01:03,440
Vì vậy, để làm điều đó, tôi sẽ sử dụng một phong cách danh sách gọi là

13
00:01:03,440 --> 00:01:08,120
list- unstyled và áp dụng điều đó vào thẻ UL đó.

14
00:01:08,120 --> 00:01:09,950
Quay trở lại trang web của chúng tôi,

15
00:01:09,950 --> 00:01:12,425
để thẻ UL này ở chân trang,

16
00:01:12,425 --> 00:01:21,520
tôi sẽ áp dụng các lớp như danh sách unstyled,

17
00:01:23,230 --> 00:01:32,275
và điều này sẽ loại bỏ những viên đạn ở phía trước của những liên kết đó.

18
00:01:32,275 --> 00:01:40,375
Bây giờ, hãy để tôi thêm một vài lớp CSS tùy chỉnh vào trang index.html.

19
00:01:40,375 --> 00:01:49,635
Để làm điều đó, bây giờ chúng ta sẽ tạo một thư mục ở đây và đặt tên nó như là thư mục CSS ở đây.

20
00:01:49,635 --> 00:01:51,650
Bên trong thư mục CSS,

21
00:01:51,650 --> 00:01:59,670
tôi sẽ tạo ra một tập tin mới và đặt tên cho tập tin là styles.css.

22
00:01:59,670 --> 00:02:02,835
Bây giờ, bên trong tập tin styles.css,

23
00:02:02,835 --> 00:02:11,685
bây giờ tôi có thể thêm một số lớp CSS để tạo kiểu trang của chúng tôi.

24
00:02:11,685 --> 00:02:14,600
Hãy để tôi thêm một số lớp CSS ở đây.

25
00:02:14,600 --> 00:02:18,765
Vì vậy, tôi sẽ thêm lớp đầu tiên của tôi như là tiêu đề hàng.

26
00:02:18,765 --> 00:02:21,035
Vì vậy, như tên của nó,

27
00:02:21,035 --> 00:02:23,770
lớp này tôi đang áp dụng cho tiêu đề.

28
00:02:23,770 --> 00:02:28,865
Và sau đó, tôi sẽ áp dụng các lề như

29
00:02:28,865 --> 00:02:34,330
zero pixel auto và

30
00:02:34,330 --> 00:02:40,150
sau đó padding như zero pixel auto.

31
00:02:40,150 --> 00:02:41,820
Vì vậy, điều này là dành cho tiêu đề hàng.

32
00:02:41,820 --> 00:02:46,100
Vì vậy, tôi sẽ có zero margin và zero padding cho tiêu đề hàng.

33
00:02:46,100 --> 00:02:48,840
Và sau đó cho các nội dung hàng,

34
00:02:48,840 --> 00:02:54,005
vì vậy tôi sẽ thêm một lớp CSS được gọi là hàng nội dung.

35
00:02:54,005 --> 00:03:01,470
Và sau đó cho điều này, tôi sẽ thêm lề zero pixel tự động,

36
00:03:01,470 --> 00:03:07,815
và sau đó padding có nó ở 50 pixel,

37
00:03:07,815 --> 00:03:16,170
zero pixel, 50 và zero pixel.

38
00:03:16,170 --> 00:03:21,060
Sau đó, tôi sẽ thêm một đường viền ở

39
00:03:21,060 --> 00:03:28,880
dưới cùng của hàng của tôi ở đây.

40
00:03:28,880 --> 00:03:35,195
Và sau đó, biên giới tôi sẽ cho nó một điểm ảnh và sau đó gọi nó là một sườn núi.

41
00:03:35,195 --> 00:03:45,915
Và tôi sẽ thiết lập chiều cao tối thiểu là 400 pixel cho nội dung ở đây.

42
00:03:45,915 --> 00:03:51,910
Bằng cách đó, trang web của tôi sẽ trông đẹp hơn trên màn hình.

43
00:03:51,910 --> 00:03:55,475
Bây giờ điều này một lần nữa, bạn phải thử và

44
00:03:55,475 --> 00:03:59,900
xem cho đến khi bạn hài lòng với cách trang được đặt ra.

45
00:03:59,900 --> 00:04:03,560
Bây giờ cũng, tôi sẽ bao gồm

46
00:04:03,560 --> 00:04:08,320
một lớp khác được gọi là chân trang mà như bạn có thể đã đoán,

47
00:04:08,320 --> 00:04:13,560
tôi sẽ áp dụng cho chân trang và tôi

48
00:04:13,560 --> 00:04:21,100
sẽ áp dụng một màu nền cho chân trang như D1C4E9.

49
00:04:29,140 --> 00:04:32,465
Nếu bạn hỏi tôi làm thế nào tôi chọn màu sắc,

50
00:04:32,465 --> 00:04:37,630
tôi chỉ nhìn lên màu sắc và sau đó tôi đã hài lòng với màu sắc đó.

51
00:04:37,630 --> 00:04:41,460
Bạn có thể chọn bất kỳ màu nào bạn muốn áp dụng,

52
00:04:41,460 --> 00:04:44,460
nhưng màu này có vẻ tốt cho tôi.

53
00:04:44,460 --> 00:04:46,950
Vì vậy, tôi đã thêm màu đó.

54
00:04:46,950 --> 00:04:50,110
Và đối với phần đệm, cho chân trang,

55
00:04:50,110 --> 00:04:58,890
tôi sẽ thêm 20 pixel và zero pixel.

56
00:04:59,100 --> 00:05:06,160
Bây giờ, một khi tôi đã thêm phong cách này vào tập tin CSS của tôi,

57
00:05:06,160 --> 00:05:10,610
cho phép tôi áp dụng các tập tin CSS vào trang index.html.

58
00:05:10,610 --> 00:05:12,820
Tôi sẽ đến trang index.html.

59
00:05:12,820 --> 00:05:18,950
Rõ ràng, tôi cần phải sử dụng tập tin CSS đó bên trong trang index.html của tôi.

60
00:05:18,950 --> 00:05:22,160
Vì vậy, ngay sau khi tập tin CSS bootstrap,

61
00:05:22,160 --> 00:05:32,200
tôi sẽ làm một liên kết và bảng phong cách,

62
00:05:32,970 --> 00:05:39,900
và đây là tập tin style.css ở đó.

63
00:05:39,900 --> 00:05:43,525
Vì vậy, đó là nơi tập tin CSS của tôi được lưu trữ.

64
00:05:43,525 --> 00:05:49,760
Vì vậy, tôi sẽ bao gồm điều đó vào trang index.html của tôi.

65
00:05:49,760 --> 00:05:56,350
Bây giờ, tôi sẽ đi vào cơ thể và áp dụng các lớp học mà tôi vừa tạo ra.

66
00:05:56,350 --> 00:05:57,955
Vì vậy, đi đến tiêu đề,

67
00:05:57,955 --> 00:06:03,055
tôi sẽ áp dụng các lớp tiêu đề hàng để div trong tiêu đề.

68
00:06:03,055 --> 00:06:07,475
Sau đó, đối với nội dung,

69
00:06:07,475 --> 00:06:14,085
tôi sẽ áp dụng các lớp nội dung hàng cho các hàng ở đó.

70
00:06:14,085 --> 00:06:21,180
Vì vậy, với ba hàng trong nội dung,

71
00:06:21,190 --> 00:06:26,690
tôi áp dụng lớp nội dung hàng và sau đó đi xuống chân trang,

72
00:06:26,690 --> 00:06:28,325
vào thẻ chân trang,

73
00:06:28,325 --> 00:06:32,315
tôi sẽ áp dụng chân trang lớp ở đây,

74
00:06:32,315 --> 00:06:35,240
và sau đó lưu các thay đổi.

75
00:06:35,240 --> 00:06:38,290
Chúng ta hãy đi và xem trang đó ngay bây giờ. Truy

76
00:06:38,290 --> 00:06:40,430
cập trang web của bạn,

77
00:06:40,430 --> 00:06:45,970
chúng tôi đã bắt đầu thấy một số thay đổi thú vị đối với trang web.

78
00:06:45,970 --> 00:06:48,960
Vì vậy, bây giờ bạn có thể thấy rằng nội dung

79
00:06:48,960 --> 00:06:52,445
trong trang web đã được đặt ra một chút sạch hơn.

80
00:06:52,445 --> 00:06:58,290
Đó là dưới cùng biên giới mà chúng tôi thêm vào nội dung hàng,

81
00:06:58,290 --> 00:07:03,200
vì vậy bạn có thể thấy rằng có đủ tách giữa các hàng mặc dù

82
00:07:03,200 --> 00:07:08,530
nội dung của các hàng vẫn được định vị về phía trên cùng trong các hàng,

83
00:07:08,530 --> 00:07:11,900
vì vậy bạn có ba hàng này và sau đó nhìn vào chân trang,

84
00:07:11,900 --> 00:07:17,740
chân trang bây giờ có mua lại màu nền mà tôi đã áp dụng,

85
00:07:17,740 --> 00:07:26,717
và nhận thấy cách các liên kết được tạo kiểu với danh sách không có kiểu ở phía bên trái ở đây.

86
00:07:26,717 --> 00:07:33,495
Chúng tôi chưa hoàn tất, chúng tôi đã thực hiện một vài thay đổi cho trang index.html,

87
00:07:33,495 --> 00:07:39,320
và sau đó quay lại và có một cái nhìn vào kết quả cuối cùng của bài tập này.

88
00:07:39,320 --> 00:07:41,485
Quay trở lại biên tập viên của bạn,

89
00:07:41,485 --> 00:07:46,955
tôi sẽ thêm một vài lớp CSS vào cấu trúc phong cách của tôi,

90
00:07:46,955 --> 00:07:53,290
nó là một tập tin, vì vậy tôi sẽ đi vào đó và sau đó thêm một lớp được gọi là Jumbotron.

91
00:07:53,290 --> 00:07:59,265
Vì vậy, bạn sẽ thấy rằng chúng tôi đã áp dụng Jumbotron vào tiêu đề của chúng tôi ở đó.

92
00:07:59,265 --> 00:08:03,145
Bây giờ, nếu tôi thêm nhiều thuộc tính cho lớp Jumbotron

93
00:08:03,145 --> 00:08:05,875
này ở đây, điều này sẽ được áp dụng cho Jumbotron,

94
00:08:05,875 --> 00:08:11,535
ngoài Jumbotron mặc định chuẩn mà bootstrap đã bao gồm.

95
00:08:11,535 --> 00:08:13,835
Tôi sẽ thêm vào một vài điều nữa,

96
00:08:13,835 --> 00:08:17,355
tôi sẽ thêm vào một đệm của

97
00:08:17,735 --> 00:08:28,765
70 và 30 pixel trên môi trường xung quanh của nó,

98
00:08:29,095 --> 00:08:38,515
và sau đó một lề của zero pixel tất cả xung quanh,

99
00:08:38,515 --> 00:08:51,685
và tôi sẽ thiết lập nền của điều này để 9575CD.

100
00:08:51,685 --> 00:09:01,065
Đây là một phần của một màu tím đậm hơn mà dường như đi rất tốt trên Jumbotron.

101
00:09:01,065 --> 00:09:03,430
Một lần nữa, bằng cách thử nghiệm và sai lầm,

102
00:09:03,430 --> 00:09:04,975
tôi đã chọn màu đó,

103
00:09:04,975 --> 00:09:11,735
và cũng là màu văn bản như màu trắng hoa.

104
00:09:13,205 --> 00:09:15,305
Vì vậy, đối với Jumbotron,

105
00:09:15,305 --> 00:09:18,615
chúng tôi sẽ áp dụng những lớp học đó, và cũng có thể,

106
00:09:18,615 --> 00:09:24,765
tôi sẽ áp dụng một lớp nữa cho lớp địa chỉ.

107
00:09:24,765 --> 00:09:26,520
Chúng tôi có một địa chỉ ở chân trang,

108
00:09:26,520 --> 00:09:34,685
vì vậy tôi sẽ thay đổi kích thước phông chữ đó đến 80 phần trăm,

109
00:09:34,685 --> 00:09:38,935
một phông chữ nhỏ hơn một chút so với phông chữ bình thường,

110
00:09:38,955 --> 00:09:43,455
và lề, tôi sẽ cung cấp cho nó một điểm ảnh zero,

111
00:09:43,455 --> 00:09:50,285
và màu sắc, tôi sẽ sử dụng zero F,

112
00:09:50,285 --> 00:09:52,350
zero F, zero F,

113
00:09:52,350 --> 00:09:54,730
và sau đó lưu các thay đổi.

114
00:09:54,730 --> 00:09:58,730
Vì vậy, vài lớp CSS thêm vào,

115
00:09:58,730 --> 00:10:01,530
chuyển đổi trở lại index.html.

116
00:10:01,530 --> 00:10:03,475
Những gì tôi sẽ làm bây giờ,

117
00:10:03,475 --> 00:10:07,775
là đi đến các hàng nội dung và sau đó

118
00:10:07,775 --> 00:10:11,990
tôi sẽ cố gắng và vị trí nội dung này ở giữa,

119
00:10:11,990 --> 00:10:14,605
theo chiều dọc trong hàng đó.

120
00:10:14,605 --> 00:10:17,930
Đây là nơi tôi sẽ có sự giúp đỡ của sự

121
00:10:17,930 --> 00:10:23,050
liên kết dọc mà lưới bootstrap hỗ trợ thông qua hỗ trợ Flexbox.

122
00:10:23,050 --> 00:10:31,395
Để làm điều đó, tôi sẽ nói align-items-trung tâm,

123
00:10:31,495 --> 00:10:38,620
vì vậy đây là lớp khác mà tôi cần phải thêm, align-items-trung tâm.

124
00:10:38,620 --> 00:10:45,475
Và tôi sẽ thêm điều đó vào hai hàng còn lại cũng,

125
00:10:45,475 --> 00:10:51,735
thẳng hàng mục trung tâm đến hàng thứ hai và thứ ba,

126
00:10:53,185 --> 00:11:01,965
và điều đó nên làm một biện minh thẳng đứng của nội dung của các hàng.

127
00:11:01,965 --> 00:11:03,880
Chúng ta sẽ thấy kết quả trong một phút.

128
00:11:03,880 --> 00:11:06,230
Đi xuống chân trang.

129
00:11:06,230 --> 00:11:09,835
Ở chân trang, bạn thấy rằng chúng tôi đã sử dụng

130
00:11:09,835 --> 00:11:13,825
cột tự động cho nội dung bản quyền này ở đó.

131
00:11:13,825 --> 00:11:18,265
Bây giờ, tôi sẽ định vị này ngay ở giữa theo chiều ngang

132
00:11:18,265 --> 00:11:24,160
bằng cách sử dụng lớp trung tâm vừa phải,

133
00:11:24,160 --> 00:11:32,755
vì vậy có một nội dung biện minh và một vài lớp khác ở đó.

134
00:11:32,755 --> 00:11:35,890
Tôi sẽ sử dụng để Justify-content-center lớp học cho điều đó.

135
00:11:35,890 --> 00:11:44,605
Điều đó về cơ bản sẽ định vị cột đó ở giữa hàng ở đó. Điều

136
00:11:44,725 --> 00:11:48,560
đó áp dụng cho điều đó, và sau đó,

137
00:11:48,560 --> 00:11:51,415
một chút thay đổi mà tôi sẽ làm,

138
00:11:51,415 --> 00:11:53,370
là để div bên trong này có,

139
00:11:53,370 --> 00:12:01,665
Tôi sẽ áp dụng một lớp như trung tâm văn bản để rằng,

140
00:12:01,665 --> 00:12:06,435
do đó các liên kết được tập trung trên màn hình.

141
00:12:06,435 --> 00:12:11,340
Với những thay đổi này, chúng ta hãy đi và xem trang web,

142
00:12:11,340 --> 00:12:14,135
ở cuối bài tập này.

143
00:12:14,135 --> 00:12:16,120
Đi đến trang web của

144
00:12:16,120 --> 00:12:20,020
chúng tôi, trang web của chúng tôi đã bắt đầu nhìn tốt hơn bây giờ,

145
00:12:20,020 --> 00:12:25,885
vì vậy bây giờ bạn có thể thấy rằng Jumbotron bây giờ được phong cách với một màu nền mới,

146
00:12:25,885 --> 00:12:28,955
đó là một chút màu tím đậm

147
00:12:28,955 --> 00:12:34,980
ở đó, và các chữ cái bây giờ là màu trắng hoa, một

148
00:12:34,980 --> 00:12:37,190
chút thụt vào đó,

149
00:12:37,190 --> 00:12:44,345
sau đó Bây giờ bạn có thể thấy rằng nội dung trong các hàng nội dung bây giờ là trung tâm theo chiều dọc,

150
00:12:44,345 --> 00:12:47,500
cho ba hàng nội dung.

151
00:12:47,500 --> 00:12:54,645
Đây là việc sử dụng trung tâm align-items-mà chúng tôi áp dụng cho các hàng ở đó.

152
00:12:54,645 --> 00:12:56,525
Sau đó, đi đến chân trang,

153
00:12:56,525 --> 00:13:03,380
bây giờ bạn có thể thấy rằng bản quyền này bây giờ là hợp lý cho trung tâm của màn hình.

154
00:13:03,380 --> 00:13:08,155
Hãy nhìn vào cách các liên kết ở đây đã được tập trung.

155
00:13:08,155 --> 00:13:15,985
Tôi nhận ra rằng tôi muốn cũng định vị này theo chiều dọc trung tâm đến hàng cụ thể này,

156
00:13:15,985 --> 00:13:19,855
vì vậy chúng ta hãy đi và áp dụng một lớp nữa để di chuyển này đến

157
00:13:19,855 --> 00:13:24,540
trung tâm của hàng cụ thể này theo chiều dọc.

158
00:13:24,540 --> 00:13:27,100
Vì vậy, để làm điều đó, quay trở lại chỉ mục.

159
00:13:27,100 --> 00:13:34,115
html, trong chân trang cho rằng cột cụ thể có chứa những,

160
00:13:34,115 --> 00:13:41,795
tôi sẽ áp dụng các lớp như align-self-center.

161
00:13:41,795 --> 00:13:48,485
Điều này nên được áp dụng cho div mà sử dụng các lớp cột.

162
00:13:48,485 --> 00:13:54,185
Với điều này, nội dung cụ thể đó sẽ được căn chỉnh với trung tâm của hàng.

163
00:13:54,185 --> 00:13:56,570
Nội dung còn lại sẽ vẫn ở trên cùng.

164
00:13:56,570 --> 00:13:59,575
Chúng ta hãy xem xét cuối cùng ở chân trang.

165
00:13:59,575 --> 00:14:01,705
Đi đến chân trang trong trang web của chúng tôi,

166
00:14:01,705 --> 00:14:06,345
bây giờ bạn có thể thấy cách này đã được đặt theo chiều dọc ở giữa.

167
00:14:06,345 --> 00:14:10,715
Hai phần của nội dung vẫn được căn chỉnh vào đầu hàng,

168
00:14:10,715 --> 00:14:15,215
đó là tốt bởi vì có vẻ ổn trên trong đó,

169
00:14:15,215 --> 00:14:21,340
nhưng cái này tôi đã kéo nó xuống theo chiều dọc đến trung tâm của hàng cụ thể này.

170
00:14:21,340 --> 00:14:25,545
Với điều này, chúng tôi hoàn thành bài tập này.

171
00:14:25,545 --> 00:14:30,005
Trong bài tập này, chúng tôi đã thấy việc sử dụng các lớp CSS tùy chỉnh,

172
00:14:30,005 --> 00:14:35,125
và cũng sử dụng một số lớp học để

173
00:14:35,125 --> 00:14:41,660
biện minh cho nội dung theo chiều ngang và chiều dọc trong hàng của chúng tôi.

174
00:14:41,660 --> 00:14:45,695
Đây là thời điểm tốt để bạn thực hiện một bình luận tốt với thông điệp,

175
00:14:45,695 --> 00:14:48,735
Bootstrap grid, phần hai.