1
00:00:03,460 --> 00:00:16,020
Аккордеоны являются одним из тех раздражающих инструментов, которые некоторые из вас, возможно, видели уже.

2
00:00:16,020 --> 00:00:20,940
Здесь есть один из этих сильфонов с клавиатурой внизу, а затем вы дуете, а затем играете музыку с ключами там.

3
00:00:20,940 --> 00:00:23,645
И не всем это нравится.

4
00:00:23,645 --> 00:00:28,740
Я почти уверен. Но без обид на аккордеонов игроков.

5
00:00:28,740 --> 00:00:34,650
Аккордеоны в бутстрапе очень интересны наверняка.

6
00:00:34,650 --> 00:00:39,380
Мы рассмотрим, как мы применяем аккордеоны, чтобы иметь возможность раскрывать и

7
00:00:39,380 --> 00:00:44,580
скрывать контент на нашей веб-странице в этом упражнении.

8
00:00:44,580 --> 00:00:51,300
Возвращаясь к About Us на HTML-странице, где у нас была информация о корпоративном лидерстве.

9
00:00:51,300 --> 00:00:56,960
Теперь я собираюсь заменить верхнюю навигацию навигацией на основе аккордеона.

10
00:00:56,960 --> 00:01:03,175
Я собираюсь удалить этот UL, который полностью определяет термин навигации.

11
00:01:03,175 --> 00:01:08,320
А потом мы создадим аккордеон вокруг контента, который у нас уже есть.

12
00:01:08,320 --> 00:01:13,700
Итак, давайте удалим этот UL, который содержит вкладку навигации, чтобы они остались

13
00:01:13,700 --> 00:01:20,160
только с этой частью, которая заключена внутри верхней панели и верхнего содержимого.

14
00:01:20,160 --> 00:01:22,115
Итак, мы собираемся пойти и изменить это.

15
00:01:22,115 --> 00:01:23,740
Перейдя к этому div здесь,

16
00:01:23,740 --> 00:01:33,225
я собираюсь удалить этот класс оттуда, а затем я применяю идентификатор как аккордеон.

17
00:01:33,225 --> 00:01:40,060
Нам нужен этот идентификатор позже, чтобы иметь возможность создать аккордеон, который div,

18
00:01:40,060 --> 00:01:43,175
который содержит этот контент, все еще на месте.

19
00:01:43,175 --> 00:01:46,545
Таким образом, верхний контент теперь изменен на аккордеон.

20
00:01:46,545 --> 00:01:49,745
Теперь, каждый из этого контента здесь,

21
00:01:49,745 --> 00:01:53,460
мы собираемся преобразовать это в

22
00:01:53,460 --> 00:01:59,080
структуру, основанную на карте, чтобы они могли раскрыть содержание в

23
00:01:59,080 --> 00:02:02,360
каждой из этих карт, чтобы вы увидели меня, используя карту и

24
00:02:02,360 --> 00:02:09,220
классы тела карты там, чтобы вложить это содержимое.

25
00:02:09,220 --> 00:02:12,595
Теперь, зайдя в фактический контент здесь,

26
00:02:12,595 --> 00:02:16,905
я собираюсь начать применять класс карты здесь с div там.

27
00:02:16,905 --> 00:02:21,900
Итак, мы скажем, «карта класса div», а

28
00:02:21,900 --> 00:02:29,890
затем закройте div там, а затем этот контент попадает в div там.

29
00:02:29,890 --> 00:02:34,110
Теперь, здесь, мы собираемся войти и

30
00:02:34,110 --> 00:02:41,610
создать div с классом «заголовок карты».

31
00:02:42,030 --> 00:02:45,280
Я покажу вам один из них, а затем мы

32
00:02:45,280 --> 00:02:48,425
повторим этот процесс и для остальных трех.

33
00:02:48,425 --> 00:02:57,480
Итак, мы скажем, «вкладка заголовка карты», а затем «id pethead».

34
00:02:57,480 --> 00:03:04,335
Я собираюсь взять этот h3 снизу отсюда,

35
00:03:04,335 --> 00:03:10,265
вырезать его, а затем вставить его в панель карт.

36
00:03:10,265 --> 00:03:14,815
Таким образом, этот h3, который определяет имя

37
00:03:14,815 --> 00:03:18,945
корпоративного лидера, вырезается

38
00:03:18,945 --> 00:03:24,310
из панели вкладок, а затем перемещается в заголовок карты здесь.

39
00:03:24,310 --> 00:03:29,060
Это будет действовать в качестве моего навигационного средства.

40
00:03:29,060 --> 00:03:35,425
Теперь, к этому h3, я собираюсь применить класс под названием mb-0.

41
00:03:35,425 --> 00:03:37,920
Итак, это mb-0 здесь.

42
00:03:37,920 --> 00:03:41,260
Теперь, само это имя,

43
00:03:41,260 --> 00:03:44,840
я собираюсь заключить это внутри и a,

44
00:03:44,840 --> 00:03:49,300
поэтому я перейду к следующей строке, а затем скажу:

45
00:03:49,300 --> 00:03:56,650
«переключение данных»

46
00:03:56,650 --> 00:04:00,845
, а переключатель данных скажет «свернуть».

47
00:04:00,845 --> 00:04:06,025
Итак, теперь вы видите, что используете плагин коллапса.

48
00:04:06,025 --> 00:04:09,440
Итак, у нас есть это закрытие h3 там.

49
00:04:09,440 --> 00:04:12,630
Итак, я переместим его на следующую строку

50
00:04:12,630 --> 00:04:17,400
здесь, а затем закрою метку прямо там.

51
00:04:17,400 --> 00:04:25,265
Итак, с этим тег теперь включает имя генерального директора здесь.

52
00:04:25,265 --> 00:04:31,285
И тогда тег h3, конечно, закрывает h3 сверху, а затем это

53
00:04:31,285 --> 00:04:37,525
внутри div, который является заголовком карты класса.

54
00:04:37,525 --> 00:04:43,950
Таким образом, это формирует структуру заголовка для моего аккордеона div.

55
00:04:43,950 --> 00:04:46,915
Перейдя сейчас на панель вкладок ниже,

56
00:04:46,915 --> 00:04:54,050
я собираюсь изменить этот класс с панели вкладок fade до свертывания.

57
00:04:54,050 --> 00:05:01,455
Таким образом, это будет плагин коллапса, который будет полезен для нашего аккордеона,

58
00:05:01,455 --> 00:05:05,680
а также я удалю

59
00:05:05,680 --> 00:05:10,075
этот активный класс для этого, и идентификатор будет оставлен как Питер для этого.

60
00:05:10,075 --> 00:05:18,375
И тогда вы скажете: «родитель данных», и вы укажете аккордеон.

61
00:05:18,375 --> 00:05:24,960
Вы видите, почему мы дали идентификатор аккордеона div, который охватывает все это содержимое.

62
00:05:24,960 --> 00:05:28,010
Итак, это способ указать, что это будет

63
00:05:28,010 --> 00:05:31,720
частью аккордеона, которую вы строите там.

64
00:05:31,720 --> 00:05:34,420
Вот почему родительский аккордеон данных.

65
00:05:34,420 --> 00:05:37,930
Теперь, содержимое внутри этой панели вкладок,

66
00:05:37,930 --> 00:05:42,340
я собираюсь заключить его внутри div с

67
00:05:42,340 --> 00:05:48,460
телом карты класса

68
00:05:48,920 --> 00:05:54,125
и закрыть этот div здесь,

69
00:05:54,125 --> 00:05:57,790
а затем отступ этого содержимого там.

70
00:05:57,790 --> 00:06:03,440
Давайте сохраним изменения, а затем заглянем на нашу веб-страницу в этот момент.

71
00:06:03,440 --> 00:06:08,735
Перейдя на нашу веб-страницу, вы заметите, что в корпоративном

72
00:06:08,735 --> 00:06:16,550
руководстве имя генерального директора выделяется здесь в заголовке карты.

73
00:06:16,550 --> 00:06:19,150
И тогда содержание внизу.

74
00:06:19,150 --> 00:06:25,830
Теперь мы создадим оставшиеся три внизу, а затем вложим в них все.

75
00:06:25,830 --> 00:06:30,485
Я собираюсь повторить ту же структуру для остальных.

76
00:06:30,485 --> 00:06:34,405
Итак, у меня будет карточка с заголовком карты,

77
00:06:34,405 --> 00:06:39,075
и заголовок карты будет заключать имя человека, как это.

78
00:06:39,075 --> 00:06:40,730
Таким образом, вы в значительной степени будете следовать

79
00:06:40,730 --> 00:06:45,060
той же структуре для остальных трех частей контента.

80
00:06:45,060 --> 00:06:49,190
Итак, давайте внесем изменения, а потом вернемся и проверим код.

81
00:06:49,190 --> 00:06:51,185
Возвращаясь к коду,

82
00:06:51,185 --> 00:06:54,405
вы теперь видите, что для остальных трех

83
00:06:54,405 --> 00:06:57,880
вы замечаете, что я все еще использую карту здесь

84
00:06:57,880 --> 00:07:01,535
с заголовком карты здесь и h3 с mb-0.

85
00:07:01,535 --> 00:07:07,590
Это внутри класса заголовка карты div там, а затем вниз ниже

86
00:07:07,590 --> 00:07:10,790
класса только как свернуть, а затем с идентификатором,

87
00:07:10,790 --> 00:07:14,445
а затем тело карты, охватывающее P там.

88
00:07:14,445 --> 00:07:18,745
То же самое с остальными двумя тоже.

89
00:07:18,745 --> 00:07:20,700
Таким образом, с этим изменением,

90
00:07:20,700 --> 00:07:26,030
эти три оставшиеся сведения корпоративных лидеров будут

91
00:07:26,030 --> 00:07:29,675
разрушены, но информация Питера Пэна

92
00:07:29,675 --> 00:07:33,445
будет раскрыта при первом показе веб-страницы.

93
00:07:33,445 --> 00:07:36,050
Таким образом, с этим изменением, теперь

94
00:07:36,050 --> 00:07:39,710
этот фрагмент кода, очевидно, доступен в

95
00:07:39,710 --> 00:07:44,090
инструкциях, которые следуют здесь, поэтому не нужно беспокоиться слишком много.

96
00:07:44,090 --> 00:07:49,865
Вы всегда можете обратиться к этому, чтобы убедиться, что вы сделали это правильно.

97
00:07:49,865 --> 00:07:52,495
Итак, давайте сохраним изменения.

98
00:07:52,495 --> 00:07:54,740
Вернувшись на нашу веб-страницу,

99
00:07:54,740 --> 00:07:57,430
вы увидите аккордеон, построенный здесь.

100
00:07:57,430 --> 00:08:03,125
Итак, вы видите, что здесь отображается первая информация о корпоративных лидерах.

101
00:08:03,125 --> 00:08:06,190
Остальные три рухнулись в этот момент.

102
00:08:06,190 --> 00:08:11,790
Таким образом, это причина использования плагина коллапса, а также причина смещения

103
00:08:11,790 --> 00:08:18,275
имени корпоративного лидера в название карты.

104
00:08:18,275 --> 00:08:21,035
Увидимся, вы видели, что он будет отображаться там вот так.

105
00:08:21,035 --> 00:08:25,150
Теперь, нажав на любой из них, вы теперь заметите, что когда вы нажмете на

106
00:08:25,150 --> 00:08:29,785
этот контент будет раскрыт, но остальные три скрыты.

107
00:08:29,785 --> 00:08:32,315
Итак, это поведение аккордеона.

108
00:08:32,315 --> 00:08:36,245
Таким образом, мы завершим это упражнение.

109
00:08:36,245 --> 00:08:42,630
Это хорошее время для вас сделать git фиксацию с аккордеоном сообщения.