1
00:00:03,910 --> 00:00:06,210
Đeo giày của bạn,

2
00:00:06,210 --> 00:00:08,470
và chúng ta hãy bắt đầu với Bootstrap.

3
00:00:08,470 --> 00:00:13,045
Tôi chắc rằng ngón tay của bạn đang ngứa để có được bàn tay của bạn xung quanh Bootstrap.

4
00:00:13,045 --> 00:00:18,250
Vì vậy, bước đầu tiên, đi đến

5
00:00:18,250 --> 00:00:22,280
các hướng dẫn tập thể dục mà theo dõi video này

6
00:00:22,280 --> 00:00:27,805
trong trang khóa học Bootstrap của bạn trên Coursera.

7
00:00:27,805 --> 00:00:29,840
Và sau đó trong hướng dẫn,

8
00:00:29,840 --> 00:00:35,520
bạn sẽ thấy một liên kết đến tập tin này Bootstrap4-starter.zip.

9
00:00:35,520 --> 00:00:39,695
Tải tệp zip xuống máy tính của bạn.

10
00:00:39,695 --> 00:00:46,610
Ngoài ra, các hướng dẫn từng bước được minh họa trong video này

11
00:00:46,610 --> 00:00:52,995
cũng sẽ được đưa ra trong hướng dẫn tập thể dục theo dõi video này.

12
00:00:52,995 --> 00:01:00,595
Ở đó, bạn sẽ có quyền truy cập vào bất kỳ đoạn mã mà bạn cần cho bài tập này.

13
00:01:00,595 --> 00:01:04,920
Đây sẽ là trường hợp cho tất cả các bài tập trong tương lai, quá.

14
00:01:04,920 --> 00:01:08,125
Vì vậy, nếu bạn cần phải có được giữ của các đoạn mã,

15
00:01:08,125 --> 00:01:10,145
đó là nơi bạn sẽ tìm thấy chúng.

16
00:01:10,145 --> 00:01:12,180
Sau khi bạn tải xuống tệp zip,

17
00:01:12,180 --> 00:01:16,230
di chuyển tệp zip đó đến một vị trí thuận tiện trên máy tính của bạn.

18
00:01:16,230 --> 00:01:23,375
Vì vậy, ở đây, tôi đã chuyển nó vào một thư mục có tên là Coursera trên máy tính của tôi,

19
00:01:23,375 --> 00:01:27,145
và sau đó tôi có tập tin zip với tên dài này ở đó.

20
00:01:27,145 --> 00:01:28,765
Chỉ cần giải nén tập tin.

21
00:01:28,765 --> 00:01:30,445
Một khi bạn giải nén tập tin,

22
00:01:30,445 --> 00:01:36,715
bạn sẽ tìm thấy một thư mục tên Bootstrap4 được tạo ra trong máy tính của bạn.

23
00:01:36,715 --> 00:01:38,965
Bên trong thư mục Bootstrap4,

24
00:01:38,965 --> 00:01:42,450
bạn sẽ thấy một thư mục khác có tên Confect, ở đó.

25
00:01:42,450 --> 00:01:46,260
Đi vào thư mục Confect và bạn sẽ thấy hai tập tin ở đó,

26
00:01:46,260 --> 00:01:49,600
index.html và tập tin package.json.

27
00:01:49,600 --> 00:01:53,795
Bây giờ, mở một cửa sổ lệnh hoặc

28
00:01:53,795 --> 00:02:00,290
một thiết bị đầu cuối và sau đó di chuyển đến thư mục này trong cửa sổ lệnh hoặc thiết bị đầu cuối của bạn.

29
00:02:00,290 --> 00:02:05,125
Tại dấu nhắc lệnh, gõ npm install.

30
00:02:05,125 --> 00:02:09,150
Lưu ý rằng tôi đã có tập tin package.json trong đó.

31
00:02:09,150 --> 00:02:12,745
Vì vậy, tập tin package.json được cấu hình sao cho

32
00:02:12,745 --> 00:02:19,200
sự phụ thuộc phát triển lite-server sẽ được cài đặt nếu tôi gõ npm cài đặt.

33
00:02:19,200 --> 00:02:21,150
Vì vậy, một khi bạn gõ npm install,

34
00:02:21,150 --> 00:02:27,160
bạn sẽ thấy rằng lite-server sẽ được cài đặt trong thư mục node_modules của bạn mỗi.

35
00:02:27,160 --> 00:02:30,415
Sau khi hoàn tất việc này, hãy

36
00:02:30,415 --> 00:02:35,930
mở thư mục này trong trình soạn thảo yêu thích của bạn.

37
00:02:35,930 --> 00:02:39,060
Một khi bạn đã mở thư mục trong trình soạn thảo của bạn,

38
00:02:39,060 --> 00:02:45,170
tạo tệp.gitignore và

39
00:02:45,170 --> 00:02:50,530
sau đó đặt node_modules vào tệp gitignore và lưu.

40
00:02:50,530 --> 00:02:54,940
Vì vậy, điều này là để đảm bảo rằng khi bạn thực hiện một gitcommit,

41
00:02:54,940 --> 00:02:57,615
thư mục node_modules sẽ không được cam kết.

42
00:02:57,615 --> 00:03:05,475
Sau đó, đó là thời gian để đi và lấy Bootstrap để sử dụng trong dự án của chúng tôi.

43
00:03:05,475 --> 00:03:08,050
Trước khi chúng tôi lấy Bootstrap, chúng

44
00:03:08,050 --> 00:03:11,810
ta hãy thực hiện một cam kết của trạng thái hiện tại của tập tin.

45
00:03:11,810 --> 00:03:18,535
Vì vậy, làm git init và khởi tạo kho lưu trữ git của bạn.

46
00:03:18,535 --> 00:03:21,600
Sau đó, bạn có thể kiểm tra trạng thái git,

47
00:03:21,600 --> 00:03:25,290
và bạn sẽ thấy rằng các tập tin này cần phải được cam kết,

48
00:03:25,290 --> 00:03:29,315
thêm tất cả các tập tin,

49
00:03:29,315 --> 00:03:38,885
gitcommit -m “Initial Setup”.

50
00:03:38,885 --> 00:03:43,745
Vì vậy, đây là điểm khởi đầu của thư mục của bạn tại thời điểm này.

51
00:03:43,745 --> 00:03:52,785
Vì vậy, với điều này, điểm khởi đầu của dự án web của bạn đã được cam kết với git.

52
00:03:52,785 --> 00:03:57,770
Bây giờ bạn có thể thiết lập git này để đồng bộ hóa với một kho lưu trữ trực tuyến,

53
00:03:57,770 --> 00:04:00,800
giống như chúng ta đã nói về trong các bài tập git.

54
00:04:00,800 --> 00:04:05,690
Vì vậy, bạn có thể thiết lập một kho lưu trữ hoặc trên Bitbucket hoặc trên Github và sau đó

55
00:04:05,690 --> 00:04:11,430
đồng bộ hóa dự án này với kho git đó.

56
00:04:11,430 --> 00:04:15,265
Bước tiếp theo của chúng tôi là đi và lấy Bootstrap.

57
00:04:15,265 --> 00:04:25,260
Để làm điều đó, thêm kiểu nhắc npm cài đặt bootstrap @4 .0.0 và cũng —save,

58
00:04:25,260 --> 00:04:29,470
và để Bootstrap được cài đặt.

59
00:04:29,470 --> 00:04:31,880
Một khi Bootstrap được cài đặt,

60
00:04:31,880 --> 00:04:35,535
chúng tôi nhận ra rằng chúng tôi cũng cần phải cài đặt ngang hàng của nó,

61
00:04:35,535 --> 00:04:38,975
đó là jQuery cũng như Popper.js.

62
00:04:38,975 --> 00:04:46,350
Vì vậy, chúng ta hãy đi trước và cài đặt cả jQuery và Popper.js vào thư mục dự án này.

63
00:04:46,350 --> 00:04:50,905
Vì vậy, để làm điều đó, thêm dấu nhắc loại npm cài đặt

64
00:04:50,905 --> 00:04:55,115
jquery @3 .3.1

65
00:04:55,115 --> 00:05:03,185
và Popper.js @1 .12.9 —save.

66
00:05:03,185 --> 00:05:06,385
Bây giờ, bất cứ khi nào tôi cài đặt bất kỳ gói npm nào,

67
00:05:06,385 --> 00:05:11,620
tôi rõ ràng chỉ định phiên bản của gói mà bạn nên cài đặt.

68
00:05:11,620 --> 00:05:17,580
Lý do cho điều này là tôi muốn đảm bảo rằng khi bạn trải qua bài tập này,

69
00:05:17,580 --> 00:05:19,500
tất cả các bước sẽ hoạt động chính xác.

70
00:05:19,500 --> 00:05:25,380
Vì vậy, tôi chỉ định phiên bản chính xác của các mô-đun npm được cài đặt.

71
00:05:25,380 --> 00:05:33,235
Vì vậy, ở đây, chúng tôi đang cài đặt jQuery phiên bản 3.3.1 và Popper.js phiên bản 1.12.9.

72
00:05:33,235 --> 00:05:40,895
Sau đó, tôi cũng sẽ chỉ định các phiên bản chính xác của các mô-đun được cài đặt.

73
00:05:40,895 --> 00:05:44,130
Vì vậy, chúng ta hãy đi trước và cài đặt những điều này.

74
00:05:46,530 --> 00:05:49,030
Và một khi chúng được cài đặt,

75
00:05:49,030 --> 00:05:51,055
chúng ta có thể đi đến bước tiếp theo.

76
00:05:51,055 --> 00:05:55,615
Quay trở lại thư mục dự án của chúng tôi,

77
00:05:55,615 --> 00:05:58,070
bạn sẽ thấy rằng nếu bạn đi vào node_modules,

78
00:05:58,070 --> 00:06:02,675
bạn sẽ thấy một thư mục trong đó có tên Bootstrap.

79
00:06:02,675 --> 00:06:04,865
Và bên trong thư mục có tên Bootstrap,

80
00:06:04,865 --> 00:06:07,845
bạn sẽ tìm thấy một thư mục có tên dist.

81
00:06:07,845 --> 00:06:09,910
Vì vậy, bên trong thư mục dist,

82
00:06:09,910 --> 00:06:13,705
bạn sẽ tìm thấy hai thư mục con tên CSS và js.

83
00:06:13,705 --> 00:06:15,775
Nếu bạn đi vào thư mục CSS,

84
00:06:15,775 --> 00:06:20,820
bạn sẽ tìm thấy một loạt các tập tin CSS được biên dịch sẵn ở đây.

85
00:06:20,820 --> 00:06:27,630
Một trong đó là quan tâm đến chúng tôi ngay từ đầu là Bootstrap min.css.

86
00:06:27,630 --> 00:06:31,620
Đó là tập tin mà chúng tôi sẽ đưa vào

87
00:06:31,620 --> 00:06:36,020
tập tin index.html của chúng tôi để sử dụng Bootstrap trong dự án của chúng tôi.

88
00:06:36,020 --> 00:06:38,820
Tương tự như vậy, đi đến thư mục js,

89
00:06:38,820 --> 00:06:42,165
bạn sẽ thấy rằng có một tập tin Bootstrap min.js.

90
00:06:42,165 --> 00:06:45,680
Chúng tôi sẽ bao gồm điều đó cũng vào index.htm của chúng tôi.

91
00:06:45,680 --> 00:06:48,790
Vì vậy, đó sẽ là bước tiếp theo mà bạn sẽ thấy tôi đang làm.

92
00:06:48,790 --> 00:06:51,215
Trước khi chúng tôi đi đến bước tiếp theo, chúng ta

93
00:06:51,215 --> 00:06:55,550
hãy khởi động máy chủ lite-server của chúng tôi để chúng ta có thể thấy những thay đổi mà chúng tôi thực hiện đối với

94
00:06:55,550 --> 00:07:01,860
index.html ngay lập tức phản ánh vào trang web của chúng tôi trong thời gian thực.

95
00:07:01,860 --> 00:07:03,630
Vì vậy, chúng ta hãy khởi động máy chủ lite-server.

96
00:07:03,630 --> 00:07:07,240
Vì vậy, gõ dấu nhắc loại npm bắt đầu,

97
00:07:07,240 --> 00:07:09,915
và sau đó sẽ khởi động máy chủ lite-server của bạn.

98
00:07:09,915 --> 00:07:13,485
Bây giờ bạn có thể thấy, trên màn hình,

99
00:07:13,485 --> 00:07:21,785
trình soạn thảo của tôi ở bên trái và phiên bản hiện tại của trang index.html ở bên phải.

100
00:07:21,785 --> 00:07:23,215
Vì vậy, như bạn có thể thấy,

101
00:07:23,215 --> 00:07:27,615
tôi đã cấu hình trang index.html với một số nội dung.

102
00:07:27,615 --> 00:07:33,820
Trang web này trông giống như trang web điển hình của một giáo sư khoa học máy tính.

103
00:07:33,820 --> 00:07:41,170
Bây giờ hãy mở trang index.html trong trình soạn thảo của chúng tôi.

104
00:07:41,170 --> 00:07:45,645
Và sau đó trong phần đầu của trang index.html,

105
00:07:45,645 --> 00:07:47,360
ngay trước tiêu đề,

106
00:07:47,360 --> 00:07:49,935
tôi sẽ dán một chút mã.

107
00:07:49,935 --> 00:07:53,730
Đoạn mã này được cung cấp cho bạn trong hướng dẫn.

108
00:07:53,730 --> 00:07:56,740
Vì vậy, bạn có thể chỉ cần sao chép và dán đoạn mã này,

109
00:07:56,740 --> 00:08:00,765
và tôi sẽ hướng dẫn bạn qua những gì đoạn mã này đang cố gắng để làm.

110
00:08:00,765 --> 00:08:05,585
Bạn sẽ nhận thấy rằng tôi có ba thẻ meta ở đây.

111
00:08:05,585 --> 00:08:09,130
Người đầu tiên nói charset="utf-8".

112
00:08:09,130 --> 00:08:11,860
Vì vậy, đây là unicode sẽ được sử dụng.

113
00:08:11,860 --> 00:08:17,675
Dòng thứ hai nói meta name="viewport”,

114
00:08:17,675 --> 00:08:21,100
tôi sẽ trở lại và giải thích dòng cụ thể này cho

115
00:08:21,100 --> 00:08:25,745
bạn trong bài học tiếp theo khi chúng ta sẽ xem xét thiết kế web đáp ứng.

116
00:08:25,745 --> 00:08:30,100
Bây giờ, hãy để tôi thu hút sự chú ý của bạn đến dòng cụ thể này mà

117
00:08:30,100 --> 00:08:34,840
nói liên kết rel="stylesheet”, và sau đó href.

118
00:08:34,840 --> 00:08:43,495
Lưu ý rằng tôi chỉ định href là “node_modules/bootstrap/dist/css/bootstrap.min.css”.

119
00:08:43,495 --> 00:08:49,150
Vì vậy, những gì tôi đang chỉ định là tập tin bootstrap.min.css,

120
00:08:49,150 --> 00:08:52,970
trong đó có các lớp CSS tương ứng với Bootstrap mà chúng tôi đã

121
00:08:52,970 --> 00:08:57,995
tải về bằng cách sử dụng NPM vào thư mục node_modules của chúng

122
00:08:57,995 --> 00:09:05,350
tôi, tôi sẽ đưa vào đầu trang index.html của tôi.

123
00:09:05,350 --> 00:09:09,370
Vì vậy, bạn cần phải bao gồm các lớp CSS được cung cấp bởi Bootstrap.

124
00:09:09,370 --> 00:09:15,150
Bạn cũng cần phải bao gồm các lớp học JavaScript được cung cấp bởi Bootstrap,

125
00:09:15,150 --> 00:09:19,445
mà chúng tôi sẽ làm ở dưới cùng của trang này.

126
00:09:19,445 --> 00:09:23,465
Đi đến cuối trang này, lưu ý,

127
00:09:23,465 --> 00:09:27,400
ngay trước khi thẻ cơ thể đóng,

128
00:09:27,400 --> 00:09:32,820
tôi sẽ dán vào mã để bao gồm tất cả các kịch bản ở đó.

129
00:09:32,820 --> 00:09:35,105
Vì vậy, để làm điều đó,

130
00:09:35,105 --> 00:09:41,300
tôi chỉ cần dán trong ba dòng cho kịch bản để bao gồm jQuery,

131
00:09:41,300 --> 00:09:45,085
Popper.js, và cũng Bootstrap min.js.

132
00:09:45,085 --> 00:09:48,635
Và lưu ý thứ tự mà tôi đã bao gồm điều này.

133
00:09:48,635 --> 00:09:50,895
Vì vậy, Bootstrap là ở phía dưới.

134
00:09:50,895 --> 00:09:57,340
Sau đó, kể từ khi Bootstrap phụ thuộc vào cả jQuery và Popper theo thứ tự đó,

135
00:09:57,340 --> 00:09:59,945
vì vậy tôi sẽ đầu tiên nhập jQuery.

136
00:09:59,945 --> 00:10:03,835
Và sau đó, chúng tôi nhập Popper, và sau đó cuối cùng,

137
00:10:03,835 --> 00:10:09,585
Bootstrap min.js ở dưới cùng của tập tin index.html.

138
00:10:09,585 --> 00:10:13,400
Bây giờ, điều này được bao gồm ở cuối trang.

139
00:10:13,400 --> 00:10:18,665
Bởi vì khi bạn đang tải trang từ một máy chủ web,

140
00:10:18,665 --> 00:10:24,360
bạn muốn các lớp CSS được tải ngay lập tức để khi trang bắt đầu hiển thị,

141
00:10:24,360 --> 00:10:26,430
khi JavaScript được lấy,

142
00:10:26,430 --> 00:10:29,810
JavaScript cần phải thực hiện để thực hiện thay đổi

143
00:10:29,810 --> 00:10:33,395
trang của bạn với mã JavaScript,

144
00:10:33,395 --> 00:10:34,970
và sẽ mất một chút thời gian.

145
00:10:34,970 --> 00:10:38,060
Vì vậy, bạn không muốn người dùng chờ đợi cho

146
00:10:38,060 --> 00:10:43,805
toàn bộ trang được tải trước khi họ nhìn thấy một cái gì đó trong cửa sổ trình duyệt của họ.

147
00:10:43,805 --> 00:10:48,720
Vì vậy, đó là lý do tại sao chúng tôi thường tải các lớp JavaScript

148
00:10:48,720 --> 00:10:55,325
về phía cuối trang html của chúng tôi ngay trước khi công nghệ cơ thể.

149
00:10:55,325 --> 00:10:58,270
Sau khi thực hiện những thay đổi này,

150
00:10:58,270 --> 00:11:00,065
hãy lưu tệp.

151
00:11:00,065 --> 00:11:04,420
Bây giờ, lý do tại sao tôi hiển thị các

152
00:11:04,420 --> 00:11:09,385
tập tin index.html trong trình soạn thảo của tôi và cũng là trình duyệt ngay bên cạnh nó là,

153
00:11:09,385 --> 00:11:13,630
thời điểm bạn lưu những thay đổi mà bạn đã thực hiện cho các tập tin index.html,

154
00:11:13,630 --> 00:11:18,920
lưu ý làm thế nào trình duyệt hiển thị của tập tin đó

155
00:11:18,920 --> 00:11:26,525
ngay lập tức cập nhật và xem Bootstrap đã hoạt động trên trang.

156
00:11:26,525 --> 00:11:33,150
Ngay bây giờ, bạn sẽ thấy rằng trang của bạn đang sử dụng Times New Roman để hiển thị tất cả nội dung.

157
00:11:33,150 --> 00:11:36,130
Thời điểm tôi lưu trang web,

158
00:11:36,130 --> 00:11:42,670
bạn nhận thấy rằng các phông chữ đang được sử dụng trên trang web của bạn đã thay đổi.

159
00:11:42,670 --> 00:11:48,425
Bây giờ, trang web của bạn được thiết lập để sử dụng các lớp Bootstrap,

160
00:11:48,425 --> 00:11:53,850
và nó sử dụng Bootstraps mặc định typography để hiển thị tất cả nội dung.

161
00:11:53,850 --> 00:12:01,360
Bootstrap theo mặc định sử dụng Helvetica Neue cho phông chữ.

162
00:12:01,360 --> 00:12:06,180
Bạn có thể thay đổi phông chữ mặc định cho bootstrap và như vậy,

163
00:12:06,180 --> 00:12:09,905
nhưng điều đó sẽ vượt quá phạm vi thảo luận của chúng tôi ngay bây giờ.

164
00:12:09,905 --> 00:12:15,120
Vì vậy, một khi bạn thiết lập trang index.html của bạn và lưu nó,

165
00:12:15,120 --> 00:12:20,710
bạn sẽ ngay lập tức thấy Bootstrap đi vào hành động trong trang web của chúng tôi.

166
00:12:20,710 --> 00:12:23,675
Vì vậy, đây là cách tôi sẽ tiếp tục minh họa,

167
00:12:23,675 --> 00:12:27,385
khi chúng ta thêm khác nhau bootstraps, CSS class,

168
00:12:27,385 --> 00:12:30,435
và các thành phần vào trang web của chúng tôi,

169
00:12:30,435 --> 00:12:35,720
làm thế nào render của nó trong trình duyệt của chúng tôi sẽ tiếp tục thay đổi.

170
00:12:35,720 --> 00:12:44,860
Bây giờ, rõ ràng, việc hiển thị trang trong trình duyệt của chúng tôi vẫn còn khủng khiếp.

171
00:12:44,860 --> 00:12:49,230
Nó tốt hơn so với trang web giáo sư khoa học máy tính điển hình,

172
00:12:49,230 --> 00:12:51,715
nhưng chắc chắn không thể đọc được.

173
00:12:51,715 --> 00:12:58,320
Bây giờ chúng ta cần phải đưa vào hành động các lớp CSS khác nhau và

174
00:12:58,320 --> 00:12:59,910
các thành phần JavaScript mà

175
00:12:59,910 --> 00:13:06,960
khung giao diện người dùng web Bootstrap của chúng tôi cung cấp để thiết kế trang web của chúng tôi.

176
00:13:06,960 --> 00:13:12,720
Vì vậy, chúng tôi sẽ làm điều đó từng bước khi chúng tôi đi qua bài tập này.

177
00:13:12,720 --> 00:13:18,535
Đây có thể là một thời gian thuận tiện để bạn thực hiện một git cam kết

178
00:13:18,535 --> 00:13:24,355
các thay đổi mà bạn đã thực hiện để vào cuối bài tập này,

179
00:13:24,355 --> 00:13:30,365
trạng thái của thư mục dự án của bạn sẽ được lưu vào kho git của bạn.

180
00:13:30,365 --> 00:13:36,610
Đi đến thư mục Confance của tôi trong một tab khác của cửa sổ thiết bị đầu cuối của

181
00:13:36,610 --> 00:13:38,990
tôi, nếu

182
00:13:38,990 --> 00:13:44,455
tôi gõ trạng thái git, bây giờ tôi thấy rằng tệp index.html của tôi và gói tệp JSON đã được sửa đổi.

183
00:13:44,455 --> 00:13:47,930
Vì vậy, tôi sẽ thực hiện một cam kết.

184
00:13:59,540 --> 00:14:04,635
Vì vậy, bây giờ, tình trạng

185
00:14:04,635 --> 00:14:10,610
của tôi về thư mục ở phần cuối của bài tập này đã được cam kết để kho lưu trữ git của tôi.

186
00:14:10,610 --> 00:14:13,920
Bạn có thể đồng bộ hóa nó với kho lưu trữ trực tuyến

187
00:14:13,920 --> 00:14:18,390
của bạn để trạng thái của dự án của bạn sẽ được lưu tại thời điểm này.

188
00:14:18,390 --> 00:14:24,955
Với điều này, chúng tôi hoàn thành bài tập Bootstrap đầu tiên của chúng tôi.

189
00:14:24,955 --> 00:14:33,210
Bây giờ bạn đã thấy làm thế nào chúng tôi có thể cấu hình Bootstrap để được sử dụng trong dự án web của chúng tôi.

190
00:14:33,210 --> 00:14:36,140
Khi chúng tôi tiến hành các bài tập tiếp theo,

191
00:14:36,140 --> 00:14:42,470
chúng tôi sẽ nhân viên các lớp Bootstrap để thiết kế các trang web của chúng tôi.