1
00:00:03,580 --> 00:00:09,250
Trong bài giảng trước đây, chúng tôi đã thấy một số cách để tiết lộ nội dung cho người dùng.

2
00:00:09,250 --> 00:00:11,870
Vì vậy, đây sẽ là một lớp phủ trên đầu

3
00:00:11,870 --> 00:00:15,285
trang web của bạn để hiển thị thông tin cho người dùng.

4
00:00:15,285 --> 00:00:17,880
Vì vậy, chúng ta sẽ xem xét hai trong số những phương pháp này,

5
00:00:17,880 --> 00:00:21,575
chú giải công cụ và phương thức trong bài tập này.

6
00:00:21,575 --> 00:00:25,300
Trước tiên, chúng ta sẽ thêm một chú giải công cụ vào trang này.

7
00:00:25,300 --> 00:00:29,040
Vì vậy, đi đến index.html và trong Jumbotron,

8
00:00:29,040 --> 00:00:33,305
chúng ta thấy nút này trong Jumbotron ở đó.

9
00:00:33,305 --> 00:00:36,000
Để nút này, tôi sẽ thêm vào một chú giải công cụ.

10
00:00:36,000 --> 00:00:38,125
Vì vậy, đi vào nút này,

11
00:00:38,125 --> 00:00:44,380
những gì tôi sẽ làm bây giờ chỉ đơn giản là đi vào dòng tiếp theo

12
00:00:44,380 --> 00:00:50,420
để nó rõ ràng hơn một chút để viết mã ở đó và vào nút này,

13
00:00:50,420 --> 00:00:53,535
tôi sẽ giới thiệu các tooltip ở đây.

14
00:00:53,535 --> 00:00:57,740
Vì vậy, sau khi cảnh báo nút, tôi sẽ nói,

15
00:00:58,560 --> 00:01:04,550
data-toggle tooltip, vì vậy bạn có thể thấy rằng

16
00:01:04,550 --> 00:01:12,230
các thành phần javascript đi vào sử dụng ở đây và sau đó dữ liệu html-true.

17
00:01:12,230 --> 00:01:17,630
Vì vậy, nếu chúng ta áp dụng dữ liệu này HTML thuộc tính và gửi nó đến true, điều

18
00:01:17,630 --> 00:01:21,965
đó có nghĩa là nội dung chú giải công cụ có thể được tạo kiểu bằng cách sử dụng

19
00:01:21,965 --> 00:01:27,060
HTML và sau đó họ sẽ nói dòng tiếp theo,

20
00:01:27,060 --> 00:01:31,165
tôi sẽ cung cấp cho các thuộc tính của tiêu đề.

21
00:01:31,165 --> 00:01:35,680
Vì vậy, đây là nơi các nội dung của chú giải công cụ sẽ được kèm theo.

22
00:01:35,680 --> 00:01:42,090
Vì vậy, chúng tôi sẽ nói “hoặc gọi cho chúng tôi tại”.

23
00:01:45,810 --> 00:01:52,950
Vì vậy, bạn có thể thấy rằng tôi đang sử dụng HTML để

24
00:01:52,950 --> 00:02:02,510
định dạng nội dung của chú giải công cụ ở đó.

25
00:02:06,070 --> 00:02:16,315
Vì vậy, với điều đó, chú giải công cụ được giới thiệu vào nút ở đó và cũng là thuộc tính cuối cùng

26
00:02:16,315 --> 00:02:26,095
tôi sẽ cung cấp cho là vị trí dữ liệu mà tôi sẽ cung cấp cho dưới đây.

27
00:02:26,095 --> 00:02:32,700
Vì vậy, có nghĩa là chú giải công cụ này sẽ được hiển thị ở dưới cùng của nút này ở đây.

28
00:02:32,700 --> 00:02:36,815
Sau khi thêm vào nút này,

29
00:02:36,815 --> 00:02:38,610
bây giờ chúng ta sẽ đi và thêm

30
00:02:38,610 --> 00:02:45,130
một số mã JavaScript vào cuối trang này để kích hoạt chú giải công cụ này.

31
00:02:45,130 --> 00:02:47,505
Đi đến cuối trang,

32
00:02:47,505 --> 00:02:57,470
hãy để tôi giới thiệu kịch bản ở đó bằng cách thêm vào các thẻ cho kịch bản.

33
00:02:57,470 --> 00:03:04,665
Bên trong này, chúng tôi sẽ xác định mã JavaScript thực tế ở đây.

34
00:03:04,665 --> 00:03:07,790
Vì vậy, chúng tôi sẽ nói các tài liệu đồng đô la.

35
00:03:07,790 --> 00:03:13,910
Vì vậy, kịch bản này là trong việc sử dụng cú pháp jQuery ở đây.

36
00:03:15,890 --> 00:03:20,880
Vì vậy, điều này xác định khi tài liệu đã sẵn sàng,

37
00:03:20,880 --> 00:03:23,810
khi tài liệu HTML cụ thể này đã sẵn sàng

38
00:03:23,810 --> 00:03:28,775
cho render và xác định gọi chức năng cụ thể này ở đây.

39
00:03:28,775 --> 00:03:32,790
Vì vậy, chúng tôi cung cấp các chức năng JavaScript để được

40
00:03:32,790 --> 00:03:37,780
gọi tại thời điểm đó, vì vậy chúng tôi sẽ chỉ định chức năng của chúng tôi và sau đó chúng tôi sẽ nói

41
00:03:38,570 --> 00:03:51,510
trong ngoặc dữ liệu chuyển đổi tooltip và tooltip.

42
00:03:53,240 --> 00:04:01,315
Vì vậy, đó là mã mà chúng ta sẽ giới thiệu vào trang này ở đây.

43
00:04:01,315 --> 00:04:09,255
Đây là cú pháp jQuery và chúng tôi sẽ bao gồm jQuery nhiều hơn một chút trong mô-đun tiếp theo.

44
00:04:09,255 --> 00:04:13,995
Cho thời điểm này, điều này là xác định rằng bất cứ nơi nào có một thuộc tính của

45
00:04:13,995 --> 00:04:19,650
loại này cho thẻ HTML cụ thể đó,

46
00:04:19,650 --> 00:04:21,570
hãy bật chú giải công cụ.

47
00:04:21,570 --> 00:04:25,420
Vì vậy, nhưng thay đổi này sẽ lưu các thay đổi và

48
00:04:25,420 --> 00:04:30,510
sau đó đi và có một cái nhìn vào cách chú thích công cụ trông như thế nào trên trang web.

49
00:04:30,510 --> 00:04:32,760
Đi đến trang web,

50
00:04:32,760 --> 00:04:36,600
bây giờ khi chúng tôi giữ con trỏ chuột của chúng tôi vào mô hình ở đây,

51
00:04:36,600 --> 00:04:40,755
bạn có thể thấy rằng chú giải công cụ đang được hiển thị ở dưới cùng ở đây.

52
00:04:40,755 --> 00:04:44,950
Vì vậy, bạn có thể nhận thấy rằng nội dung của chú giải công cụ này

53
00:04:44,950 --> 00:04:50,115
chính xác là những gì chúng tôi đã đưa ra như là thuộc tính tiêu đề cho phía dưới đó ở đó.

54
00:04:50,115 --> 00:04:54,095
Vì vậy, đây là cách chúng ta có thể thêm chú giải công cụ vào trang của chúng tôi.

55
00:04:54,095 --> 00:04:58,030
Chú giải công cụ là một cách tốt đẹp để cung cấp một số thông tin bổ sung cho

56
00:04:58,030 --> 00:05:03,370
người dùng khi người dùng điều hướng đến các vị trí khác nhau trên trang.

57
00:05:03,370 --> 00:05:06,790
Tiếp tục với bài tập, trong bước tiếp theo,

58
00:05:06,790 --> 00:05:10,045
chúng ta sẽ tạo ra một phương thức trong trang web của chúng tôi.

59
00:05:10,045 --> 00:05:17,665
Phương thức này sẽ lưu trữ biểu mẫu đăng nhập và sẽ được hiển thị bằng cách sử dụng một liên kết trong navbar của họ.

60
00:05:17,665 --> 00:05:19,720
Vì vậy, để bắt đầu,

61
00:05:19,720 --> 00:05:26,700
bootstrap khuyên rằng tất cả các mã liên quan đến phương thức được đặt ở đầu trang của bạn.

62
00:05:26,700 --> 00:05:31,530
Vì vậy, tôi sẽ đi vào và viết bên dưới navbar ở đây,

63
00:05:31,530 --> 00:05:34,455
tôi sẽ đặt trong mã cho phương thức ở đó.

64
00:05:34,455 --> 00:05:36,080
Vì vậy, để tạo ra một phương thức,

65
00:05:36,080 --> 00:05:43,400
tôi sẽ bắt đầu bằng cách nói div ID đăng nhập modal.

66
00:05:43,400 --> 00:05:48,355
Vì vậy, chúng tôi cung cấp cho một ID để phương thức này để nó có thể được kích hoạt từ

67
00:05:48,355 --> 00:05:53,895
liên kết navbar và sau đó lớp như “modal fade”.

68
00:05:53,895 --> 00:05:56,910
Vì vậy, bạn thấy rằng lớp học là modal và fade có nghĩa

69
00:05:56,910 --> 00:06:00,220
là khi modal được đưa lên màn hình,

70
00:06:00,220 --> 00:06:07,185
nó sẽ mờ dần lên màn hình và vai trò là như một hộp thoại.

71
00:06:07,185 --> 00:06:11,625
Vì vậy, có nghĩa là nó được hiển thị trên đầu trang.

72
00:06:11,625 --> 00:06:14,195
Hãy đóng lại div của phần này.

73
00:06:14,195 --> 00:06:18,415
Vì vậy, bên trong đây, chúng ta sẽ tạo ra các phương thức.

74
00:06:18,415 --> 00:06:28,510
Vì vậy, trong đó, tôi sẽ tạo ra div thứ hai với lớp như modal-dialog và sau đó

75
00:06:28,510 --> 00:06:32,620
bên trong đây chúng ta sẽ xác định nội dung của

76
00:06:32,620 --> 00:06:39,550
các modal thực tế ở đây và đóng div.

77
00:06:39,550 --> 00:06:45,220
Và như vậy, đây là để được nội dung phương thức sẽ được cấu trúc ở đây.

78
00:06:45,220 --> 00:06:51,370
Vì vậy, bên trong hộp thoại phương thức này, chúng tôi sẽ tạo ra một div với

79
00:06:51,370 --> 00:07:00,770
nội dung phương thức lớp và

80
00:07:00,770 --> 00:07:10,350
đóng div và một phương thức điển hình sẽ chứa một phương thức tiêu đề.

81
00:07:10,350 --> 00:07:14,255
Vì vậy, đó là nơi div tiếp theo sẽ lưu trữ.

82
00:07:14,255 --> 00:07:23,635
Và sau đó là một cơ thể phương thức

83
00:07:23,635 --> 00:07:28,980
mà sẽ chứa nhiều nội dung liên quan đến phương thức.

84
00:07:28,980 --> 00:07:34,835
Tất cả các phần này của phương thức là tùy chọn,

85
00:07:34,835 --> 00:07:38,020
nhưng ít nhất bạn nên có một phần như vậy trong phương thức của bạn

86
00:07:38,020 --> 00:07:41,645
nếu không nó không có ý nghĩa để tạo ra phương thức ở đó.

87
00:07:41,645 --> 00:07:46,455
Vì vậy, với điều này, cấu trúc của phương thức bây giờ đã sẵn sàng.

88
00:07:46,455 --> 00:07:50,550
Vì vậy, chúng ta sẽ đi vào và điền vào nội dung vào phương thức này.

89
00:07:50,550 --> 00:07:54,005
Vì vậy, bây giờ, chúng ta cần phải xác định những gì đi vào phương thức.

90
00:07:54,005 --> 00:07:57,505
Bây giờ, trong tiêu đề chúng ta sẽ đặt trong một nút,

91
00:07:57,505 --> 00:08:01,770
một nút chéo trong phương thức mà khi nhấp vào sẽ bỏ qua các modal.

92
00:08:01,770 --> 00:08:05,715
Đó là cách thông thường các phương thức được thiết kế.

93
00:08:05,715 --> 00:08:08,805
Và cơ thể modal sẽ tự chứa hình thức.

94
00:08:08,805 --> 00:08:12,610
Bây giờ, một phương thức có thể chứa bất cứ điều gì bạn muốn, ví dụ,

95
00:08:12,610 --> 00:08:16,040
nếu bạn nhấp vào một hình ảnh trong

96
00:08:16,040 --> 00:08:19,630
một thư viện hình ảnh và bạn muốn hiển thị kích thước lớn hơn của hình ảnh,

97
00:08:19,630 --> 00:08:24,415
thậm chí ở đó bạn có thể sử dụng một phương thức để hiển thị thông tin.

98
00:08:24,415 --> 00:08:26,280
Bây giờ trong bài tập này,

99
00:08:26,280 --> 00:08:31,765
chúng ta sẽ sử dụng phương thức để lưu trữ một hình thức được hiển thị cho người dùng.

100
00:08:31,765 --> 00:08:35,695
Được rồi, bây giờ, trong tiêu đề modal,

101
00:08:35,695 --> 00:08:40,175
chúng tôi sẽ giới thiệu một

102
00:08:40,175 --> 00:08:49,170
nút với nút gõ và lớp đóng.

103
00:08:49,170 --> 00:08:59,080
Vì vậy, bạn thấy rằng đây là một nút được sử dụng để đóng phương thức và sau đó bạn sẽ nói,

104
00:08:59,080 --> 00:09:04,685
data dismiss và sau đó modal.

105
00:09:04,685 --> 00:09:07,180
Vì vậy, điều này có nghĩa là nút đặc biệt này

106
00:09:07,180 --> 00:09:09,845
khi nhấp sẽ bỏ qua các phương thức từ màn hình.

107
00:09:09,845 --> 00:09:18,700
Và nút này, tôi sẽ sử dụng thời gian,

108
00:09:21,100 --> 00:09:24,900
sẽ hiển thị dưới dạng chữ thập trong các phương thức ở đây.

109
00:09:24,900 --> 00:09:27,380
Vì vậy, tôi sẽ nói lần ở đây.

110
00:09:27,380 --> 00:09:30,549
Trước khi nút này, chúng tôi sẽ giới thiệu

111
00:09:30,549 --> 00:09:36,470
một tiêu đề mà chúng tôi sẽ hiển thị trong tiêu đề của modal vì vậy tôi

112
00:09:36,470 --> 00:09:46,180
sẽ bắt đầu với một h4 với tiêu đề modal lớp.

113
00:09:46,180 --> 00:09:48,635
Và sau đó bên trong h4 này,

114
00:09:48,635 --> 00:09:52,200
tôi sẽ bao gồm tiêu đề của phương thức,

115
00:09:52,200 --> 00:09:56,995
đó là đăng nhập bởi vì điều này sẽ hiển thị các hình thức đăng nhập.

116
00:09:56,995 --> 00:10:01,625
Bây giờ chúng ta đã đặt trong một số chi tiết vào phương thức này, chúng

117
00:10:01,625 --> 00:10:06,110
ta hãy thêm vào liên kết vào navbar của chúng tôi mà sẽ

118
00:10:06,110 --> 00:10:07,770
kích hoạt phương thức này và sau đó chúng tôi sẽ có

119
00:10:07,770 --> 00:10:11,515
một cái nhìn nhanh chóng về cách thức trông như thế nào trên màn hình.

120
00:10:11,515 --> 00:10:14,280
Đi đến navbar,

121
00:10:14,280 --> 00:10:16,095
ngay sau khi UL ở đây,

122
00:10:16,095 --> 00:10:17,845
tôi sẽ bao gồm trong

123
00:10:17,845 --> 00:10:22,910
một liên kết có thể được sử dụng để kích hoạt hiển thị và ẩn của modal.

124
00:10:22,910 --> 00:10:31,080
Vì vậy, để làm điều đó, tôi sẽ đi vào và sử dụng một khoảng với lớp navbar-text.

125
00:10:31,080 --> 00:10:37,950
Đây là những gì cho phép tôi bao gồm một liên kết vào navbar và hiển thị nó dưới dạng văn bản.

126
00:10:37,950 --> 00:10:39,995
Vì vậy, bên trong khoảng,

127
00:10:39,995 --> 00:10:45,345
tôi sẽ sử dụng một A với chuyển đổi dữ liệu,

128
00:10:45,345 --> 00:10:50,010
vì vậy bạn có thể thấy chuyển đổi dữ liệu JavaScript đến và

129
00:10:50,010 --> 00:10:55,400
chuyển đổi dữ liệu là cho một phương thức và sau đó dữ liệu mục tiêu.

130
00:10:55,400 --> 00:11:03,940
Bạn nhớ lại rằng chúng tôi đã cung cấp ID như là phương thức đăng nhập để của chúng tôi-

131
00:11:04,170 --> 00:11:06,460
Modal mà chúng tôi bao gồm.

132
00:11:06,460 --> 00:11:11,950
Vì vậy, tôi sẽ sử dụng điều đó như mục tiêu dữ liệu của tôi với băm ở phía trước của điều đó.

133
00:11:11,950 --> 00:11:15,815
Và bên trong đây, tôi sẽ đi vào và sử dụng

134
00:11:15,815 --> 00:11:24,520
một biểu tượng phông chữ tuyệt vời cho một đăng nhập.

135
00:11:24,520 --> 00:11:28,710
Vì vậy, đây là một phông chữ tuyệt vời “fa- đăng nhập”

136
00:11:28,800 --> 00:11:37,945
biểu tượng và nói đăng nhập và đóng e-tech.

137
00:11:37,945 --> 00:11:43,975
Vì vậy, với điều đó, chúng ta hãy lưu các thay đổi và xem trang web.

138
00:11:43,975 --> 00:11:47,265
Đi đến trang web của chúng tôi trong trình duyệt,

139
00:11:47,265 --> 00:11:50,530
bây giờ bạn thấy rằng ở cạnh bên phải,

140
00:11:50,530 --> 00:11:56,680
bạn thấy thông tin đăng nhập này với biểu tượng này được tạo ra ở đó.

141
00:11:56,680 --> 00:12:00,850
Vì vậy, đây là liên kết sẽ kích hoạt việc hiển thị các phương thức.

142
00:12:00,850 --> 00:12:02,530
Vì vậy, nếu tôi nhấp vào liên kết này,

143
00:12:02,530 --> 00:12:05,015
sau đó modal sẽ hiển thị trên màn hình.

144
00:12:05,015 --> 00:12:08,500
Vì vậy, lưu ý rằng khi chúng tôi tạo ra phương thức này, chúng tôi đã nói,

145
00:12:08,500 --> 00:12:14,565
tiêu đề trong đó có đăng nhập và sau đó cũng nút này và sau đó cơ thể

146
00:12:14,565 --> 00:12:17,605
, hiện trống rỗng, chúng tôi sẽ giới thiệu thêm mã trong đó.

147
00:12:17,605 --> 00:12:20,860
Bây giờ nếu bạn nhấp vào nút này, phương thức sẽ biến mất.

148
00:12:20,860 --> 00:12:23,170
Nhấp vào đó một lần nữa, phương thức được hiển thị.

149
00:12:23,170 --> 00:12:25,470
Ngay cả khi bạn nhấp vào bên ngoài phương thức, phương thức sẽ biến mất.

150
00:12:25,470 --> 00:12:30,985
Vì vậy, đây là hành vi của phương thức mà chúng ta đã mong đợi.

151
00:12:30,985 --> 00:12:36,275
Bây giờ, trong bước tiếp theo, tôi sẽ đi vào và giới thiệu các hình thức ở đây.

152
00:12:36,275 --> 00:12:39,990
Tôi sẽ không giải thích chi tiết của biểu mẫu bởi vì bạn

153
00:12:39,990 --> 00:12:43,924
đã nghiên cứu các biểu mẫu trong một trong những bài học trước đó.

154
00:12:43,924 --> 00:12:47,830
Vì vậy, tôi chỉ cần đi vào và dán mã hình thức và

155
00:12:47,830 --> 00:12:52,370
sau đó chúng ta sẽ có một cái nhìn vào hình thức trong phương thức ở đây.

156
00:12:52,370 --> 00:12:54,505
Trở lại với mã,

157
00:12:54,505 --> 00:12:57,640
bây giờ bạn có thể thấy rằng trong cơ thể modal,

158
00:12:57,640 --> 00:13:01,115
tôi đã điền vào một hình thức.

159
00:13:01,115 --> 00:13:07,850
Và sau đó tôi có hai nhóm hình thức ở đây với một đầu vào với loại email

160
00:13:07,850 --> 00:13:14,795
và nhập mật khẩu và sau đó tôi có một hộp kiểm ở đây mà tôi có.

161
00:13:14,795 --> 00:13:21,970
Vì vậy, điều này sẽ được dễ dàng cho bạn để giải mã những gì hình thức này là cấu trúc mã EE,

162
00:13:21,970 --> 00:13:26,505
từ sự hiểu biết của bạn về cách thức Bootstrap form được thiết kế.

163
00:13:26,505 --> 00:13:28,250
Tôi đã đặt trong hai nút.

164
00:13:28,250 --> 00:13:33,060
Một là một nút gửi và một nút khác là một nút hủy.

165
00:13:33,060 --> 00:13:36,440
Nút hủy có nút đầu tiên.

166
00:13:36,440 --> 00:13:41,580
Nút hủy ở đây có mô hình bỏ dữ liệu.

167
00:13:41,580 --> 00:13:45,215
Vì vậy, điều đó có nghĩa là khi bạn nhấp vào nút hủy, mô hình sẽ bị bác bỏ.

168
00:13:45,215 --> 00:13:50,170
Và một trong những khác là một nút gửi được sử dụng để gửi biểu mẫu.

169
00:13:50,170 --> 00:13:51,480
Vì vậy, với những thay đổi này,

170
00:13:51,480 --> 00:13:55,550
chúng ta hãy lưu các thay đổi và sau đó đi và có một cái nhìn tại trang Web của chúng tôi.

171
00:13:55,550 --> 00:13:57,205
Quay lại trang web,

172
00:13:57,205 --> 00:14:04,045
bây giờ bạn nhấp vào đăng nhập sau đó bạn sẽ thấy một biểu mẫu cho người dùng đăng nhập.

173
00:14:04,045 --> 00:14:07,025
Vì vậy, bạn sẽ thấy rằng bạn có hai hộp ở đây.

174
00:14:07,025 --> 00:14:09,850
Nhập hộp vào đây để nhập email và mật khẩu,

175
00:14:09,850 --> 00:14:12,870
và sau đó một hộp kiểm cho nói Nhớ tôi.

176
00:14:12,870 --> 00:14:15,320
Và sau đó bạn có một đăng nhập và hủy bỏ.

177
00:14:15,320 --> 00:14:17,860
Vì vậy, nếu bạn nhấp vào hủy bỏ các modal sẽ biến mất.

178
00:14:17,860 --> 00:14:20,710
Cũng giống như khi bạn nhấp vào thập tự giá ở đó.

179
00:14:20,710 --> 00:14:23,915
Và sau đó nếu bạn điền thông tin này và tiếp tục nhấp vào đăng nhập,

180
00:14:23,915 --> 00:14:26,120
quá trình đăng nhập sẽ được bắt đầu.

181
00:14:26,120 --> 00:14:29,885
Tại thời điểm này chúng tôi không có một máy chủ để làm việc này,

182
00:14:29,885 --> 00:14:34,640
nhưng tôi chỉ cho bạn thấy trong Bootstrap làm thế nào bạn sẽ tạo ra một hình thức như thế này.

183
00:14:34,640 --> 00:14:37,240
Tôi chắc chắn rằng bạn đã nhìn thấy những điều như thế này trên

184
00:14:37,240 --> 00:14:40,610
nhiều trang web mà khi bạn nhấp vào một nút đăng nhập một

185
00:14:40,610 --> 00:14:43,220
cái gì đó như thế này với biểu mẫu bật lên trên màn hình

186
00:14:43,220 --> 00:14:46,585
và hy vọng bạn gõ vào thông tin.

187
00:14:46,585 --> 00:14:50,160
Vì vậy, bây giờ bạn sẽ thấy cách bạn có thể tận dụng các mô hình để hiển thị

188
00:14:50,160 --> 00:14:54,740
thông tin chồng lên trang web của bạn.

189
00:14:54,740 --> 00:14:57,910
Với điều này, chúng tôi hoàn thành bài tập này.

190
00:14:57,910 --> 00:15:01,950
Trong bài tập này, chúng ta đã thấy việc sử dụng các chú giải công cụ

191
00:15:01,950 --> 00:15:06,835
và chúng ta đã thấy việc sử dụng các mô hình để hiển thị nội dung.

192
00:15:06,835 --> 00:15:14,200
Đây là thời điểm tốt để bạn thực hiện một git-commint với các mẹo và mô hình công cụ tin nhắn.