1
00:00:00,242 --> 00:00:04,459
[MUSIC]

2
00:00:04,459 --> 00:00:09,590
Bây giờ chúng ta hãy nói về một plugin rất hữu ích trong Bootstrap được gọi là Collapse.

3
00:00:09,590 --> 00:00:14,110
Chúng tôi đã thấy ứng dụng của nó trong thanh điều hướng trước đó.

4
00:00:14,110 --> 00:00:19,050
Chúng tôi sẽ xem lại mã đó và xem nhanh nó một cách chi tiết hơn.

5
00:00:19,050 --> 00:00:21,910
Một thành phần liên quan được gọi là Accordion.

6
00:00:21,910 --> 00:00:26,310
Accordion sử dụng plugin Collapse cho hoạt động của nó.

7
00:00:26,310 --> 00:00:30,100
Và chúng ta sẽ thấy rằng chi tiết trong bài tập sau.

8
00:00:31,740 --> 00:00:36,570
Plugin Thu gọn cung cấp một cách dễ dàng để tiết lộ và

9
00:00:36,570 --> 00:00:38,487
ẩn nội dung trên trang web của bạn.

10
00:00:40,030 --> 00:00:45,307
Việc tiết lộ và ẩn nội dung này thường được kích hoạt

11
00:00:45,307 --> 00:00:50,186
bởi người dùng nhấp vào một nút hoặc một liên kết trong trang web của bạn.

12
00:00:50,186 --> 00:00:55,001
Bây giờ bạn sẽ thấy nhiều nơi mà loại

13
00:00:55,001 --> 00:01:00,006
hành vi thu gọn được tận dụng rất tốt để hiển thị nội dung.

14
00:01:00,006 --> 00:01:04,760
Chúng tôi sẽ xem lại navbar của chúng tôi để xem plugin Thu gọn trong hành động, và

15
00:01:04,760 --> 00:01:07,590
sau đó chúng tôi cũng sẽ thấy một ví dụ Accordion tiếp theo.

16
00:01:08,630 --> 00:01:14,381
Quay trở lại trang web của chúng tôi, bạn sẽ nhớ lại rằng khi chúng tôi tạo ra navbar

17
00:01:14,381 --> 00:01:19,948
trong trang web của chúng tôi cho màn hình cực nhỏ, navbar đã bị sụp đổ và

18
00:01:19,948 --> 00:01:24,346
sau đó nó đã được tiết lộ khi chúng tôi nhấp vào nút ở đây.

19
00:01:24,346 --> 00:01:29,670
Bây giờ đây là một ví dụ về việc sử dụng plugin Thu gọn ở đây.

20
00:01:29,670 --> 00:01:34,890
Khi chúng ta nhìn vào mã, chúng ta sẽ thấy rằng chúng ta thực sự áp dụng plugin Thu gọn để

21
00:01:34,890 --> 00:01:38,440
div có chứa thanh điều hướng này.

22
00:01:39,530 --> 00:01:41,534
Hãy nhìn vào mã cho

23
00:01:41,534 --> 00:01:46,320
thanh điều hướng của chúng tôi mà chúng tôi thiết kế trước đó, bạn đã thấy rằng trong đây,

24
00:01:46,320 --> 00:01:51,012
bên trong container, chúng tôi tạo ra nút này được hiển

25
00:01:51,012 --> 00:01:56,850
thị cho kích thước màn hình cực nhỏ bằng cách sử dụng lớp navbar-toggle.

26
00:01:56,850 --> 00:01:59,440
Nhìn vào div mà sau nút này ở đây.

27
00:01:59,440 --> 00:02:02,600
Đối với div sau nút này, chúng tôi đã sử dụng lớp sụp đổ.

28
00:02:02,600 --> 00:02:06,495
Vì vậy, đây là việc sử dụng plugin Collapse trong navbar của chúng tôi.

29
00:02:06,495 --> 00:02:10,627
Vì vậy, những gì điều này tạo ra là nội dung đặc biệt này,

30
00:02:10,627 --> 00:02:15,095
navbar của chúng tôi được bao bọc bên trong div này, sẽ được thu gọn cho

31
00:02:15,095 --> 00:02:17,065
kích thước màn hình cực nhỏ.

32
00:02:17,065 --> 00:02:22,080
Và sau đó cùng với plugin Thu gọn, nút này xuất hiện

33
00:02:22,080 --> 00:02:26,589
ở đó sẽ kích hoạt hiển thị và ẩn của navbar này ở đây.

34
00:02:26,589 --> 00:02:32,582
Đó là lý do tại sao khi bạn nhìn vào nút, bạn sẽ thấy rằng ngay tại đó,

35
00:02:32,582 --> 00:02:38,171
chúng tôi cung cấp các thuộc tính chuyển đổi dữ liệu với sự sụp đổ ở đây,

36
00:02:38,171 --> 00:02:42,350
và sau đó là mục tiêu dữ liệu là #Navbar ở đây.

37
00:02:42,350 --> 00:02:47,960
Và lưu ý rằng id cho div này mà chúng tôi áp dụng ở đây là Navbar.

38
00:02:47,960 --> 00:02:53,030
Vì vậy, chúng tôi đang xác định về cơ bản rằng nút này sẽ hoạt động như cơ

39
00:02:53,030 --> 00:02:59,460
chế kích hoạt cho plugin sụp đổ này để làm việc trên div này ở đây.

40
00:02:59,460 --> 00:03:03,387
Vì vậy, đây là việc sử dụng plugin Thu gọn trong trang web của bạn.

41
00:03:04,590 --> 00:03:10,840
Ngoài ra, chúng ta sẽ xem xét các thành phần khác, đó là Accordion trong Bootstrap.

42
00:03:10,840 --> 00:03:12,410
Một Accordion cư xử như thế nào?

43
00:03:12,410 --> 00:03:16,110
Vì vậy, đây là một ví dụ về một Accordion mà chúng ta sẽ xây dựng trong bài tập

44
00:03:16,110 --> 00:03:16,928
sau đó.

45
00:03:16,928 --> 00:03:21,520
Vì vậy, ở đây, bạn sẽ thấy rằng tôi đã thay thế điều hướng tab mà chúng tôi

46
00:03:21,520 --> 00:03:25,846
đã làm trong bài tập trước đó bằng cách sử dụng một Accordion ở đây.

47
00:03:25,846 --> 00:03:30,480
Cách hoạt động của Accordion là một phần nội dung được tiết lộ và

48
00:03:30,480 --> 00:03:32,020
ba phần còn lại được ẩn đi.

49
00:03:32,020 --> 00:03:35,640
Vì vậy, điều này sử dụng plugin Thu gọn cho mục đích này.

50
00:03:35,640 --> 00:03:41,920
Vì vậy, khi bạn nhấp vào bất kỳ một trong những tên của lãnh đạo công ty khác,

51
00:03:41,920 --> 00:03:45,490
sau đó chi tiết của lãnh đạo công ty đó được tiết lộ và

52
00:03:45,490 --> 00:03:47,280
ba người còn lại bị giấu đi.

53
00:03:47,280 --> 00:03:50,270
Vậy đây là hành vi của Accordion ở đây.

54
00:03:50,270 --> 00:03:52,700
Nếu bạn đã quen thuộc với một accordion,

55
00:03:52,700 --> 00:03:57,000
nhạc cụ, bạn biết làm thế nào các bellows của accordion hoạt động.

56
00:03:57,000 --> 00:04:02,530
Vì vậy, theo một ý nghĩa nào đó, đây là hành xử giống như ống thổi của đàn accordion.

57
00:04:02,530 --> 00:04:08,996
Vì vậy, đó là lý do tại sao thành phần này được gọi là một Accordion trong Bootstrap.

58
00:04:08,996 --> 00:04:17,280
Một ví dụ nữa về plugin Thu gọn đang được sử dụng là trên trang web khóa học của riêng bạn.

59
00:04:17,280 --> 00:04:19,350
Vì vậy, nếu bạn vào trang web khóa học của bạn, và

60
00:04:19,350 --> 00:04:23,360
sau đó bạn đi vào nội dung của trang web khóa học của bạn và

61
00:04:23,360 --> 00:04:28,730
bắt đầu xem nội dung ở đây, bạn sẽ nhận thấy rằng ở phía bên trái,

62
00:04:28,730 --> 00:04:32,940
bạn có một điều hướng đi vào hình ảnh ở phía bên trái.

63
00:04:32,940 --> 00:04:35,390
Vì vậy, đây là điều hướng ở đó.

64
00:04:35,390 --> 00:04:40,510
Vì vậy, khi bạn nhấp vào mỗi một trong số họ, bạn nhận thấy nội dung ở đây

65
00:04:40,510 --> 00:04:45,980
được ẩn và tiết lộ như thế nào bằng cách nhấp vào mỗi liên kết ở đó.

66
00:04:45,980 --> 00:04:51,246
Vì vậy, điều này giống như plugin Collapse mà chúng tôi đã thấy trong Bootstrap.

67
00:04:51,246 --> 00:04:57,780
Mặc dù, tất nhiên, trang Coursera thực sự không sử dụng Bootstrap.

68
00:04:57,780 --> 00:05:02,306
Chúng tôi sẽ chuyển sang bài tập tiếp theo, nơi chúng tôi sẽ thấy cách chúng tôi xây dựng

69
00:05:02,306 --> 00:05:07,010
Accordion để hiển thị thông tin lãnh đạo công ty của chúng tôi.

70
00:05:07,010 --> 00:05:13,120
[ NHẠC]