1
00:00:03,460 --> 00:00:11,430
Accordions là một trong những công cụ gây phiền nhiễu mà một số bạn có thể đã thấy.

2
00:00:11,430 --> 00:00:16,020
Nó có một trong những ống thổi với một bàn phím dưới

3
00:00:16,020 --> 00:00:20,940
đây và sau đó bạn thổi và sau đó chơi nhạc với các phím ở đó.

4
00:00:20,940 --> 00:00:23,645
Và không phải ai cũng thích nó.

5
00:00:23,645 --> 00:00:28,740
Tôi khá chắc chắn. Nhưng không có ý xúc phạm với người chơi accordion.

6
00:00:28,740 --> 00:00:34,650
Accordions trong bootstrap là rất thú vị cho chắc chắn.

7
00:00:34,650 --> 00:00:39,380
Chúng ta sẽ xem xét cách chúng ta áp dụng accordions để có thể tiết lộ và

8
00:00:39,380 --> 00:00:44,580
ẩn nội dung trong trang web của chúng tôi trong bài tập này.

9
00:00:44,580 --> 00:00:51,300
Quay trở lại About Us tại trang HTML nơi chúng tôi đã có thông tin lãnh đạo của công ty.

10
00:00:51,300 --> 00:00:56,960
Bây giờ, tôi sẽ thay thế điều hướng trên cùng với một điều hướng dựa trên accordion.

11
00:00:56,960 --> 00:01:03,175
Tôi sẽ loại bỏ UL này xác định thuật ngữ điều hướng hoàn toàn.

12
00:01:03,175 --> 00:01:08,320
Và sau đó chúng ta sẽ thiết kế đàn accordion xung quanh nội dung mà chúng ta đã có.

13
00:01:08,320 --> 00:01:13,700
Vì vậy, chúng ta hãy xóa UL này có chứa điều hướng tab để chúng sẽ được để lại

14
00:01:13,700 --> 00:01:20,160
chỉ với phần này được bao bọc bên trong bảng điều khiển trên cùng và nội dung trên cùng.

15
00:01:20,160 --> 00:01:22,115
Vì vậy, chúng ta sẽ đi và sửa đổi điều này.

16
00:01:22,115 --> 00:01:23,740
Đi đến div này ở đây,

17
00:01:23,740 --> 00:01:33,225
Tôi sẽ loại bỏ lớp này từ đó và sau đó tôi áp dụng id như accordion.

18
00:01:33,225 --> 00:01:40,060
Chúng ta cần id này sau này để có thể tạo ra accordion rằng div, có

19
00:01:40,060 --> 00:01:43,175
chứa nội dung này vẫn còn tại chỗ đó.

20
00:01:43,175 --> 00:01:46,545
Vì vậy, nội dung hàng đầu bây giờ được thay đổi thành accordion.

21
00:01:46,545 --> 00:01:49,745
Bây giờ, mỗi nội dung ở đây,

22
00:01:49,745 --> 00:01:53,460
chúng ta sẽ chuyển đổi nó thành một

23
00:01:53,460 --> 00:01:59,080
cấu trúc dựa trên thẻ ở đó để họ có thể tiết lộ nội dung trong

24
00:01:59,080 --> 00:02:02,360
mỗi thẻ để bạn sẽ thấy tôi sử dụng thẻ và

25
00:02:02,360 --> 00:02:09,220
các lớp cơ thể thẻ ở đó để kèm theo nội dung này.

26
00:02:09,220 --> 00:02:12,595
Bây giờ, đi vào nội dung thực tế ở đây,

27
00:02:12,595 --> 00:02:16,905
Tôi sẽ bắt đầu áp dụng các lớp thẻ ở đây với div có.

28
00:02:16,905 --> 00:02:21,900
Vì vậy, chúng ta sẽ nói, “thẻ lớp div” và

29
00:02:21,900 --> 00:02:29,890
sau đó đóng div ở đó và sau đó nội dung này đi vào div có.

30
00:02:29,890 --> 00:02:34,110
Bây giờ, trong đây, chúng ta sẽ đi vào và tạo ra

31
00:02:34,110 --> 00:02:41,610
một div với lớp “tiêu đề thẻ”.

32
00:02:42,030 --> 00:02:45,280
Tôi sẽ chỉ cho bạn một trong số họ và sau đó chúng ta sẽ

33
00:02:45,280 --> 00:02:48,425
lặp lại quá trình này cho ba còn lại cũng.

34
00:02:48,425 --> 00:02:57,480
Vì vậy, chúng ta sẽ nói, “thẻ tiêu đề cuộn tab” và sau đó “id peterhead.”

35
00:02:57,480 --> 00:03:04,335
Tôi sẽ lấy h3 này từ dưới đây,

36
00:03:04,335 --> 00:03:10,265
cắt nó ra và sau đó dán nó vào bảng điều khiển thẻ.

37
00:03:10,265 --> 00:03:14,815
Vì vậy, h3 này xác định tên của

38
00:03:14,815 --> 00:03:18,945
người lãnh đạo doanh nghiệp được cắt từ

39
00:03:18,945 --> 00:03:24,310
bên trong bảng điều khiển tab và sau đó chuyển vào tiêu đề thẻ ở đây.

40
00:03:24,310 --> 00:03:29,060
Nó sẽ đóng vai trò hỗ trợ điều hướng của tôi.

41
00:03:29,060 --> 00:03:35,425
Bây giờ, để h3 này, tôi sẽ áp dụng một lớp được gọi là mb-0.

42
00:03:35,425 --> 00:03:37,920
Vì vậy, đây là mb-0 ở đây.

43
00:03:37,920 --> 00:03:41,260
Bây giờ, tên này chính nó,

44
00:03:41,260 --> 00:03:44,840
Tôi sẽ kèm theo này bên trong và một,

45
00:03:44,840 --> 00:03:49,300
vì vậy tôi sẽ đi đến dòng tiếp theo và sau đó nói,

46
00:03:49,300 --> 00:03:56,650
“một chuyển đổi dữ liệu” và chuyển

47
00:03:56,650 --> 00:04:00,845
đổi dữ liệu sẽ nói, “sụp đổ”.

48
00:04:00,845 --> 00:04:06,025
Vì vậy, bây giờ, bạn thấy rằng bạn đang sử dụng plugin sụp đổ.

49
00:04:06,025 --> 00:04:09,440
Vì vậy, chúng tôi có h3 đóng cửa này ở đó.

50
00:04:09,440 --> 00:04:12,630
Vì vậy, tôi sẽ chuyển nó sang dòng tiếp theo

51
00:04:12,630 --> 00:04:17,400
ở đây và sau đó tôi sẽ đóng một thẻ ngay tại đó.

52
00:04:17,400 --> 00:04:25,265
Vì vậy, với điều này, một thẻ bây giờ bao gồm tên của CEO ở đây.

53
00:04:25,265 --> 00:04:31,285
Và sau đó thẻ h3 tất nhiên đóng h3 trên đầu trang và sau đó đây là

54
00:04:31,285 --> 00:04:37,525
bên trong div đó là tiêu đề thẻ lớp.

55
00:04:37,525 --> 00:04:43,950
Vì vậy, điều này tạo thành cấu trúc tiêu đề cho div accordion của tôi.

56
00:04:43,950 --> 00:04:46,915
Đi bây giờ đến bảng điều khiển tab bên dưới,

57
00:04:46,915 --> 00:04:54,050
tôi sẽ thay đổi lớp này từ bảng điều khiển tab mờ dần để sụp đổ.

58
00:04:54,050 --> 00:05:01,455
Vì vậy, đây sẽ là một plugin sụp đổ mà sẽ hữu ích cho accordion của chúng tôi

59
00:05:01,455 --> 00:05:05,680
và tôi cũng sẽ loại bỏ lớp hoạt động

60
00:05:05,680 --> 00:05:10,075
này cho điều này và id sẽ được để lại như peter cho điều này.

61
00:05:10,075 --> 00:05:18,375
Và sau đó bạn sẽ nói, “dữ liệu cha mẹ” và bạn sẽ chỉ định accordion.

62
00:05:18,375 --> 00:05:24,960
Bạn thấy lý do tại sao chúng tôi đã cho id của accordion để div bao quanh tất cả các nội dung này.

63
00:05:24,960 --> 00:05:28,010
Vì vậy, đây là cách để xác định rằng điều này sẽ

64
00:05:28,010 --> 00:05:31,720
tạo thành một phần của accordion mà bạn đang xây dựng ở đó.

65
00:05:31,720 --> 00:05:34,420
Vì vậy, đó là lý do tại sao dữ liệu cha mẹ accordion.

66
00:05:34,420 --> 00:05:37,930
Bây giờ, nội dung bên trong bảng điều khiển tab này,

67
00:05:37,930 --> 00:05:42,340
Tôi sẽ kèm theo nó bên trong div với

68
00:05:42,340 --> 00:05:48,460
cơ thể thẻ lớp

69
00:05:48,920 --> 00:05:54,125
và đóng div đó ở đây,

70
00:05:54,125 --> 00:05:57,790
và sau đó thụt lề nội dung này trong đó.

71
00:05:57,790 --> 00:06:03,440
Hãy lưu các thay đổi và sau đó đi và xem trang web của chúng tôi vào thời điểm này.

72
00:06:03,440 --> 00:06:08,735
Đi đến trang web của chúng tôi bây giờ bạn nhận thấy rằng trong lãnh đạo doanh nghiệp,

73
00:06:08,735 --> 00:06:16,550
tên của Giám đốc điều hành được đánh dấu ở đây trong tiêu đề thẻ ở đây.

74
00:06:16,550 --> 00:06:19,150
Và sau đó nội dung ở dưới đây.

75
00:06:19,150 --> 00:06:25,830
Bây giờ, chúng ta sẽ tạo ra ba phần còn lại dưới đây và sau đó kèm theo tất cả chúng trong đó.

76
00:06:25,830 --> 00:06:30,485
Tôi sẽ lặp lại cùng một cấu trúc cho những người còn lại.

77
00:06:30,485 --> 00:06:34,405
Vì vậy, tôi sẽ có thẻ với tiêu đề thẻ,

78
00:06:34,405 --> 00:06:39,075
và tiêu đề thẻ sẽ kèm theo tên của người như thế này.

79
00:06:39,075 --> 00:06:40,730
Vì vậy, bạn khá nhiều sẽ làm theo

80
00:06:40,730 --> 00:06:45,060
cùng một cấu trúc cho ba phần còn lại của nội dung.

81
00:06:45,060 --> 00:06:49,190
Vì vậy, chúng ta hãy thực hiện các thay đổi và sau đó chúng tôi sẽ quay lại và xem lại mã.

82
00:06:49,190 --> 00:06:51,185
Trở lại với mã,

83
00:06:51,185 --> 00:06:54,405
bây giờ bạn thấy rằng trong ba còn lại,

84
00:06:54,405 --> 00:06:57,880
bạn nhận thấy rằng tôi vẫn đang sử dụng thẻ ở đây

85
00:06:57,880 --> 00:07:01,535
với tiêu đề thẻ ở đây và h3 với mb-0.

86
00:07:01,535 --> 00:07:07,590
Đây là bên trong thẻ tiêu đề lớp div có và sau đó xuống

87
00:07:07,590 --> 00:07:10,790
dưới lớp chỉ như sụp đổ và sau đó với id

88
00:07:10,790 --> 00:07:14,445
và sau đó cơ thể thẻ bao bọc P có.

89
00:07:14,445 --> 00:07:18,745
Cùng một điều với hai người còn lại cũng.

90
00:07:18,745 --> 00:07:20,700
Vì vậy, với sự thay đổi

91
00:07:20,700 --> 00:07:26,030
này, ba thông tin lãnh đạo doanh nghiệp còn lại này sẽ

92
00:07:26,030 --> 00:07:29,675
bị thu gọn nhưng thông tin bị sẹo của Peter Pan

93
00:07:29,675 --> 00:07:33,445
sẽ được tiết lộ khi lần đầu tiên hiển thị trang web.

94
00:07:33,445 --> 00:07:36,050
Vì vậy, với sự thay đổi

95
00:07:36,050 --> 00:07:39,710
này, bây giờ, đoạn mã này rõ ràng là có sẵn trong

96
00:07:39,710 --> 00:07:44,090
các hướng dẫn theo đây vì vậy không cần phải lo lắng quá nhiều.

97
00:07:44,090 --> 00:07:49,865
Bạn luôn có thể tham khảo điều đó để đảm bảo rằng bạn đã thực hiện nó một cách chính xác.

98
00:07:49,865 --> 00:07:52,495
Vì vậy, chúng ta hãy lưu các thay đổi.

99
00:07:52,495 --> 00:07:54,740
Chuyển đổi trở lại trang web của chúng tôi,

100
00:07:54,740 --> 00:07:57,430
bây giờ bạn thấy accordion được xây dựng ở đây.

101
00:07:57,430 --> 00:08:03,125
Vì vậy, bạn thấy rằng thông tin của các nhà lãnh đạo doanh nghiệp đầu tiên được hiển thị ở đây.

102
00:08:03,125 --> 00:08:06,190
Ba người còn lại bị sụp đổ trong thời điểm này.

103
00:08:06,190 --> 00:08:11,790
Vì vậy, đó là lý do cho việc sử dụng plugin sụp đổ và cũng là lý do để chuyển

104
00:08:11,790 --> 00:08:18,275
tên của nhà lãnh đạo công ty vào tiêu đề thẻ.

105
00:08:18,275 --> 00:08:21,035
Thấy anh thấy nó sẽ được hiển thị như thế này trong đó.

106
00:08:21,035 --> 00:08:25,150
Bây giờ, nhấp vào bất kỳ một trong số họ bây giờ bạn nhận thấy rằng khi bạn nhấp vào

107
00:08:25,150 --> 00:08:29,785
rằng nội dung đó sẽ được tiết lộ nhưng ba còn lại được ẩn.

108
00:08:29,785 --> 00:08:32,315
Vì vậy, đây là hành vi accordion ở đây.

109
00:08:32,315 --> 00:08:36,245
Vì vậy, với điều này, chúng tôi hoàn thành bài tập này.

110
00:08:36,245 --> 00:08:42,630
Đây là thời điểm tốt để bạn thực hiện một cam kết git với accordion tin nhắn..