1
00:00:00,000 --> 00:00:04,432
[MUSIC]

2
00:00:04,432 --> 00:00:09,439
Bây giờ chúng ta hãy cố gắng hiểu một số cơ chế để cho phép chúng tôi

3
00:00:09,439 --> 00:00:16,100
hiển thị thông tin cho người dùng chồng lên nội dung của trang web của bạn.

4
00:00:16,100 --> 00:00:21,040
Vì vậy, ở đây chúng ta sẽ xem xét ba cấu trúc khác nhau có sẵn trong Bootstrap

5
00:00:21,040 --> 00:00:24,230
gọi là tooltips, povers, và modals.

6
00:00:25,570 --> 00:00:30,760
Vì vậy, chú giải công cụ, pover và phương thức là gì và chúng hữu ích như thế nào?

7
00:00:30,760 --> 00:00:36,090
Chúng ta sẽ xem xét một số ý tưởng cơ bản trước, và sau đó chúng ta sẽ tiếp tục xem xét một số ví dụ.

8
00:00:36,090 --> 00:00:39,844
Trong bài tập sau đây, chúng tôi sẽ sử dụng chú giải công cụ và

9
00:00:39,844 --> 00:00:45,130
phương thức trong trang web của chúng tôi, và chúng tôi sẽ xem xét một ví dụ về popover.

10
00:00:45,130 --> 00:00:51,610
Vì vậy, như tôi đã đề cập, chú giải công cụ, pover, và phương thức là một cách

11
00:00:51,610 --> 00:00:56,090
để tiết lộ nội dung cho người dùng, khi người dùng tương tác với một số yếu tố trên trang web của bạn.

12
00:00:56,090 --> 00:01:01,280
Nói ví dụ khi chuột của người dùng

13
00:01:01,280 --> 00:01:06,640
nhấp chuột vào nút, hoặc di chuột qua nút, hoặc nhấp vào liên kết

14
00:01:06,640 --> 00:01:11,830
hoặc đạt đến một điểm nhất định trên trang web của bạn.

15
00:01:11,830 --> 00:01:16,170
Vì vậy, tất cả những điều này sẽ kích hoạt thông tin được hiển thị cho người dùng.

16
00:01:16,170 --> 00:01:17,470
Vì vậy, trong trường hợp này,

17
00:01:17,470 --> 00:01:22,970
thông tin được hiển thị dưới dạng một lớp phủ trên đầu trang web của bạn.

18
00:01:22,970 --> 00:01:25,700
Vì vậy, nội dung cơ bản của trang web vẫn còn đó, nhưng

19
00:01:25,700 --> 00:01:30,280
điều này được đặt ra trên đầu trang của nội dung cơ bản.

20
00:01:30,280 --> 00:01:35,750
Vì vậy, về tính linh hoạt, chú giải công cụ là đơn giản nhất để thực hiện, nhưng

21
00:01:35,750 --> 00:01:40,160
đồng thời có sự linh hoạt hạn chế trong cách chúng có thể hiển thị thông tin.

22
00:01:40,160 --> 00:01:46,610
Popovers linh hoạt hơn so với các chú giải công cụ, nhưng chúng cũng có những hạn chế riêng của chúng.

23
00:01:46,610 --> 00:01:50,110
Phương thức cung cấp cho bạn sự hỗ trợ rộng rãi nhất để

24
00:01:50,110 --> 00:01:54,980
hiển thị nội dung theo nhiều cách khác nhau.

25
00:01:56,250 --> 00:02:02,600
Ví dụ, chúng ta hãy đi đến trang web của chúng tôi mà chúng tôi đã làm việc trên.

26
00:02:02,600 --> 00:02:09,970
Bạn thấy rằng khi chúng tôi di chuột con trỏ chuột của chúng tôi vào nút này.

27
00:02:09,970 --> 00:02:14,560
Bạn thấy thông báo này xuất hiện trên màn hình ở đây,

28
00:02:14,560 --> 00:02:16,930
với một số thông tin bổ sung.

29
00:02:16,930 --> 00:02:18,975
Đây là một ví dụ về chú giải công cụ.

30
00:02:20,290 --> 00:02:24,210
Điều này cho phép bạn hiển thị số lượng thông tin nhỏ hơn cho người dùng.

31
00:02:24,210 --> 00:02:29,340
Vì vậy, ví dụ nếu bạn đang cố gắng hướng dẫn người dùng thông qua trang web của bạn và

32
00:02:29,340 --> 00:02:33,740
muốn họ biết điều gì sẽ xảy ra khi bạn nhấp vào các vị trí khác nhau bất kỳ trang web nào,

33
00:02:33,740 --> 00:02:38,240
đây có thể là một cách tốt để nhắc nhở họ về những gì được mong đợi.

34
00:02:38,240 --> 00:02:40,870
Vì vậy, bạn có thể dễ dàng thiết kế ví dụ, hướng

35
00:02:40,870 --> 00:02:46,250
dẫn của trang web của bạn bằng cách sử dụng các chú thích công cụ này để chỉ cho người dùng.

36
00:02:46,250 --> 00:02:49,130
Nếu bạn muốn một chút thông tin chi tiết hơn,

37
00:02:49,130 --> 00:02:51,300
sau đó pover sẽ hữu ích hơn.

38
00:02:52,305 --> 00:02:56,920
Ví dụ tương tự, thực hiện và sử dụng một popover sẽ trông như thế này.

39
00:02:56,920 --> 00:02:58,040
Bây giờ trong trường hợp này,

40
00:02:58,040 --> 00:03:02,040
bạn sẽ phải nhấp vào nút một cách rõ ràng để hiển thị popover.

41
00:03:02,040 --> 00:03:06,670
Vì vậy, trong trường hợp đó, popover được hiển thị với một số thông tin tiêu đề, và

42
00:03:06,670 --> 00:03:12,210
sau đó là nội dung thực tế ở dưới cùng trong popover đó.

43
00:03:12,210 --> 00:03:17,200
Bây giờ, loại bỏ các popover sẽ yêu cầu bạn một lần nữa để nhấp vào dưới cùng ở đó.

44
00:03:17,200 --> 00:03:19,640
Vì vậy, đây là hành vi của một popover.

45
00:03:19,640 --> 00:03:26,420
Trong một số trường hợp, pover hữu ích hơn so với các chú giải công cụ.

46
00:03:26,420 --> 00:03:29,990
Loại lớp phủ dữ liệu thứ ba của chúng tôi là phương thức.

47
00:03:29,990 --> 00:03:33,140
Một phương thức cho phép bạn trình bày

48
00:03:33,140 --> 00:03:37,410
thông tin chi tiết hơn cho người dùng hơn là một chú giải công cụ và popover.

49
00:03:37,410 --> 00:03:44,060
Nội dung của phương thức chính nó được chia thành một tiêu đề, thân và chân trang.

50
00:03:44,060 --> 00:03:49,700
Và phương thức chính nó có thể chứa rất nhiều thông tin chi tiết hơn.

51
00:03:49,700 --> 00:03:52,740
Và bạn có thể sử dụng toàn bộ lưới Bootstrap,

52
00:03:52,740 --> 00:03:57,630
bên trong cơ thể modal, để tổ chức nội dung thực tế.

53
00:03:57,630 --> 00:04:02,860
Chúng tôi nhìn vào một vài ví dụ về việc sử dụng các phương thức tiếp theo.

54
00:04:02,860 --> 00:04:06,220
Đi đến trang web của chúng tôi, bạn sẽ thấy rằng ở phía bên phải,

55
00:04:06,220 --> 00:04:09,400
ở đây chúng tôi có một liên kết ở đây gọi là Đăng nhập.

56
00:04:09,400 --> 00:04:13,890
Vì vậy, khi bạn nhấp vào liên kết đó, bạn sẽ nhận thấy rằng phương thức này

57
00:04:13,890 --> 00:04:17,600
với hình thức đăng nhập của họ được bật lên trên màn hình.

58
00:04:17,600 --> 00:04:21,060
Vì vậy, đây là hành vi điển hình của một phương thức.

59
00:04:21,060 --> 00:04:23,420
Và do đó ở đây bạn có thể nhập thông tin, và

60
00:04:23,420 --> 00:04:28,070
sau đó nhấp vào nút Đăng nhập để đăng nhập vào trang web của bạn.

61
00:04:29,190 --> 00:04:34,890
Đi đến trang Coursera của bạn, đây là một ví dụ thực tế về việc sử dụng một phương thức.

62
00:04:34,890 --> 00:04:38,430
Ví dụ, nếu bạn nhấp vào nút Đăng nhập ở đây,

63
00:04:38,430 --> 00:04:43,190
bạn có thể thấy rằng trên Coursera, một biểu mẫu bật lên trên màn hình.

64
00:04:43,190 --> 00:04:47,720
Vì vậy, đây là một cách sử dụng của một phương thức trong trang web của bạn.

65
00:04:49,060 --> 00:04:53,252
Bây giờ bạn đã thấy ví dụ về chú giải công cụ, pover và phương thức, chúng

66
00:04:53,252 --> 00:04:58,522
ta hãy đi đến bài tập tiếp theo, nơi chúng ta sẽ tạo một chú giải công cụ trên trang index.html của chúng tôi.

67
00:04:58,522 --> 00:05:04,379
Chúng tôi cũng sẽ tạo ra một phương thức cho phép người dùng nhập thông tin để

68
00:05:04,379 --> 00:05:06,787
đăng nhập vào trang web của chúng tôi.

69
00:05:06,787 --> 00:05:10,269
[ NHẠC]