1
00:00:03,670 --> 00:00:09,835
В этом упражнении мы рассмотрим навигацию на основе вкладок Bootstrap,

2
00:00:09,835 --> 00:00:11,920
поддержку Bootstrap для вкладок

3
00:00:11,920 --> 00:00:17,310
и то, как вкладки могут быть использованы для организации контента на вашей веб-странице.

4
00:00:17,310 --> 00:00:21,165
И как вы можете перемещаться с одной вкладки на другую,

5
00:00:21,165 --> 00:00:26,235
а затем отображать содержимое на каждой из этих вкладок на веб-странице.

6
00:00:26,235 --> 00:00:30,115
Теперь вы увидите меня, используя класс nav,

7
00:00:30,115 --> 00:00:34,560
а затем дополнительно квалифицируйте его с помощью класса nav tabs.

8
00:00:34,560 --> 00:00:38,065
Тот же подход может быть использован и с пилюлями навигации

9
00:00:38,065 --> 00:00:42,740
, которые мы рассматривали в предыдущей лекции.

10
00:00:43,470 --> 00:00:46,440
Чтобы начать с этого упражнения,

11
00:00:46,440 --> 00:00:49,200
мы перейдем на страницу aboutus.html.

12
00:00:49,200 --> 00:00:50,545
И тогда прямо там,

13
00:00:50,545 --> 00:00:53,690
где у нас есть контент корпоративного лидерства там,

14
00:00:53,690 --> 00:00:59,290
после h2, я собираюсь представить навигацию с вкладками.

15
00:00:59,290 --> 00:01:07,960
Итак, здесь я собираюсь использовать ul с классом nav nav-tabs.

16
00:01:07,960 --> 00:01:12,070
Итак, вы видели, что ранее, когда мы построили навигационную панель,

17
00:01:12,070 --> 00:01:17,215
мы также использовали ul внутри навигационной панели, чтобы указать навигационные элементы там.

18
00:01:17,215 --> 00:01:20,270
Аналогичный подход здесь, за исключением того, что здесь мы собираемся

19
00:01:20,270 --> 00:01:24,235
использовать ul с nav и nav вкладки здесь.

20
00:01:24,235 --> 00:01:26,120
Итак, внутри этой ul,

21
00:01:26,120 --> 00:01:33,395
мы построим структуру навигации для этой навигации с вкладками здесь.

22
00:01:33,395 --> 00:01:41,850
Поэтому там я буду использовать элемент списка с классом nav-item

23
00:01:41,850 --> 00:01:48,965
и строить навигацию вокруг этого элемента списка.

24
00:01:48,965 --> 00:01:53,770
Таким образом, это вводит первый элемент в мои вкладки навигации.

25
00:01:53,770 --> 00:02:03,605
Сразу после этого внутри я представлю a с классом nav-link active.

26
00:02:03,605 --> 00:02:05,960
Итак, этот, как вы видите,

27
00:02:05,960 --> 00:02:10,670
если вы помните, как мы используем ul с элементом навигации и навигационной ссылкой.

28
00:02:10,670 --> 00:02:12,995
В навигационной панели

29
00:02:12,995 --> 00:02:14,970
мы видим подобный подход здесь.

30
00:02:14,970 --> 00:02:19,150
Итак, nav-элемент активен, а затем href.

31
00:02:19,970 --> 00:02:24,895
Таким образом, это будет ссылка на панель вкладок позже,

32
00:02:24,895 --> 00:02:28,695
которая будет иметь идентификатор Петра там,

33
00:02:28,695 --> 00:02:33,310
а роль - вкладка для этого

34
00:02:33,310 --> 00:02:39,560
и вкладка переключения данных.

35
00:02:39,560 --> 00:02:45,540
Таким образом, вы можете увидеть компонент javascript Bootstrap, входящий в картинку здесь.

36
00:02:45,540 --> 00:02:49,500
А потом я скажу Питеру Пэну,

37
00:02:49,700 --> 00:02:54,405
а потом закрою бирку.

38
00:02:54,405 --> 00:03:01,435
Таким образом, это завершит нашу первую вкладку в нашей навигации с вкладками.

39
00:03:01,435 --> 00:03:03,310
Позвольте мне завершить остальную часть кода,

40
00:03:03,310 --> 00:03:07,255
а потом мы вернемся и проверим остальную часть кода.

41
00:03:07,255 --> 00:03:13,630
Итак, здесь вы можете видеть, что я завершил эту навигационную структуру здесь.

42
00:03:13,630 --> 00:03:23,635
Точно так же, я определяю список для остальных свободных корпоративных лидеров здесь.

43
00:03:23,635 --> 00:03:26,305
Теперь это, позвольте мне сохранить изменения.

44
00:03:26,305 --> 00:03:30,160
А затем давайте посмотрим на веб-страницу.

45
00:03:30,840 --> 00:03:33,070
Переключившись на веб-страницу,

46
00:03:33,070 --> 00:03:37,260
вы теперь увидите, как с помощью вкладок навигационной навигации мы создали

47
00:03:37,260 --> 00:03:42,400
эту структуру навигации прямо под корпоративным руководством здесь.

48
00:03:42,400 --> 00:03:47,110
Итак, эта структура навигации означает, что я должен иметь возможность перемещаться и

49
00:03:47,110 --> 00:03:51,815
просматривать каждый из них более подробно, нажав на это.

50
00:03:51,815 --> 00:03:54,830
Итак, вот как здесь работает навигация с вкладками.

51
00:03:54,830 --> 00:03:58,525
Теперь, очевидно, содержание каждого из них должно

52
00:03:58,525 --> 00:04:02,700
соответствующим образом показывать здесь только детали этого человека.

53
00:04:02,700 --> 00:04:06,145
Таким образом, это где использование содержимого с вкладками

54
00:04:06,145 --> 00:04:10,630
и классов панели вкладок вступит в силу.

55
00:04:10,630 --> 00:04:13,925
И мы собираемся заключить этот контент с помощью этого.

56
00:04:13,925 --> 00:04:17,200
А затем привяжите это к этой

57
00:04:17,200 --> 00:04:18,660
навигации, вкладки навигации здесь,

58
00:04:18,660 --> 00:04:22,580
так что только одна информация корпоративного лидера

59
00:04:22,580 --> 00:04:25,380
отображается на экране за раз.

60
00:04:25,380 --> 00:04:28,910
После того, как мы завершим настройку этой навигации с вкладками,

61
00:04:28,910 --> 00:04:31,755
мы перейдем вниз к фактическому контенту здесь.

62
00:04:31,755 --> 00:04:36,505
И теперь я собираюсь реорганизовать этот контент в четыре отдельных панели вкладок,

63
00:04:36,505 --> 00:04:38,840
каждая из которых будет отображаться, когда

64
00:04:38,840 --> 00:04:44,010
соответствующая панель вкладок выбрана в навигации с вкладками.

65
00:04:44,010 --> 00:04:45,830
Итак, чтобы начать,

66
00:04:45,830 --> 00:04:50,755
первое, что мы собираемся сделать, это войти и разделить

67
00:04:50,755 --> 00:04:55,680
каждого из этих четырех корпоративных лидеров на четыре части,

68
00:04:55,680 --> 00:04:58,815
чтобы мне было легко понять, что я делаю.

69
00:04:58,815 --> 00:05:01,180
Итак, на h3,

70
00:05:01,180 --> 00:05:04,355
я разрезаю их на четыре разные части,

71
00:05:04,355 --> 00:05:08,610
и тогда мы сможем работать с ними.

72
00:05:08,610 --> 00:05:13,395
Итак, теперь у меня есть один, два, три, четыре.

73
00:05:13,395 --> 00:05:19,055
Таким образом, этот контент теперь должен быть заключен внутри div

74
00:05:19,055 --> 00:05:28,540
с классом tab-content.

75
00:05:28,540 --> 00:05:32,845
Таким образом, весь этот контент, который у нас есть для

76
00:05:32,845 --> 00:05:40,055
четырех разных корпоративных лидеров, должен быть заключен внутри div tab-content.

77
00:05:40,055 --> 00:05:44,455
Итак, теперь я заключил это внутри контакта вкладки.

78
00:05:44,455 --> 00:05:46,090
Теперь для каждого из них

79
00:05:46,090 --> 00:05:52,235
мне нужно создать еще один div с панелью вкладки классов и некоторыми дополнительными классами.

80
00:05:52,235 --> 00:05:56,430
А затем организовать этот контакт.

81
00:05:56,430 --> 00:05:58,680
Итак, давайте начнем с первого.

82
00:05:58,680 --> 00:06:02,215
Итак, для первого корпоративного лидера,

83
00:06:02,215 --> 00:06:07,955
я собираюсь представить новый div с ролью в качестве вкладки.

84
00:06:07,955 --> 00:06:12,250
Таким образом, это служит панелью вкладок, которая будет отображаться

85
00:06:12,250 --> 00:06:17,235
при выборе первой навигации по табуляции.

86
00:06:17,235 --> 00:06:22,440
И соответствующий класс, который мне нужно применить, - это панель вкладок.

87
00:06:22,440 --> 00:06:24,090
Итак, это панель вкладок,

88
00:06:24,090 --> 00:06:26,430
фактическое содержимое, которое содержится там.

89
00:06:26,430 --> 00:06:29,805
И тогда еще один класс, который я применяю, - это исчезает.

90
00:06:29,805 --> 00:06:32,920
Таким образом, класс fade позволяет этому контенту исчезать.

91
00:06:32,920 --> 00:06:37,090
Итак, это класс анимации, который поддерживает Bootstrap.

92
00:06:37,090 --> 00:06:40,340
Кроме того, я применяю этот класс под названием show.

93
00:06:40,340 --> 00:06:43,770
Класс show по существу указывает

94
00:06:43,770 --> 00:06:48,425
, что этот конкретный контент должен отображаться при первом отображении страницы.

95
00:06:48,425 --> 00:06:52,870
Таким образом, он применит класс show только к первой панели вкладок,

96
00:06:52,870 --> 00:06:56,640
остальные панели вкладок не будут применять класс show.

97
00:06:56,640 --> 00:07:00,910
И последний класс, который я собираюсь применить, активен, потому

98
00:07:00,910 --> 00:07:07,190
что это панель вкладок, которая будет отображаться на странице при первом отображении страницы.

99
00:07:07,190 --> 00:07:10,095
Кроме того, для работы навигации

100
00:07:10,095 --> 00:07:12,760
мне нужно дать это a и ID,

101
00:07:12,760 --> 00:07:19,340
и поскольку я использовал хэштег Peter для содержимого навигации по вкладке,

102
00:07:19,340 --> 00:07:23,705
поэтому я собираюсь применить идентификатор как Питер здесь.

103
00:07:23,705 --> 00:07:31,680
И поэтому, когда это упоминается в ссылке там с хэштегом Peter,

104
00:07:31,680 --> 00:07:34,740
это соответствующая панель, на которую я имею в виду.

105
00:07:34,740 --> 00:07:39,885
Теперь, что я собираюсь сделать, я собираюсь скопировать этот div оттуда.

106
00:07:39,885 --> 00:07:49,010
И тогда я собираюсь применить этот div к информации второго корпоративного лидера,

107
00:07:49,010 --> 00:07:55,255
за исключением того, что для этого я должен применять только панель вкладок и соответствовать.

108
00:07:55,255 --> 00:07:58,730
Шоу и активный не должны применяться для остальных трех.

109
00:07:58,730 --> 00:08:03,820
И удостоверение должно быть Дэнни для второго.

110
00:08:03,820 --> 00:08:08,190
Я просто скопирую этот код,

111
00:08:08,190 --> 00:08:13,460
а затем вставьте его для третьего корпоративного лидера здесь.

112
00:08:13,460 --> 00:08:20,955
А затем панель вкладок, а третья - Агумбе.

113
00:08:20,955 --> 00:08:23,795
И последний,

114
00:08:23,795 --> 00:08:27,235
опять же, я вставляю это в,

115
00:08:27,235 --> 00:08:31,640
а затем идентификатор должен быть изменен на Альберто,

116
00:08:31,640 --> 00:08:34,280
и закрыть этот div здесь.

117
00:08:34,280 --> 00:08:39,580
Итак, этот div для последнего должен быть закрыт в этот момент.

118
00:08:39,580 --> 00:08:45,355
И это должно позаботиться о четырех панелях вкладок, которые мне нужны.

119
00:08:45,355 --> 00:08:50,725
Входя и отступая это содержание,

120
00:08:50,725 --> 00:08:53,490
чтобы я был доволен,

121
00:08:53,490 --> 00:08:56,245
моя одержимость довольна там.

122
00:08:56,245 --> 00:09:01,805
Хорошо, это завершает организацию содержимого вкладки.

123
00:09:01,805 --> 00:09:04,600
Теперь давайте сохраним изменения и

124
00:09:04,600 --> 00:09:09,030
посмотрим на то, что сейчас нравится веб-страница.

125
00:09:09,330 --> 00:09:11,480
Перейдя на нашу веб-страницу,

126
00:09:11,480 --> 00:09:19,680
вы теперь видите, что наша веб-страница отображает только содержание, соответствующее их генеральному директору.

127
00:09:19,680 --> 00:09:22,825
Если вы переключитесь на любой из других,

128
00:09:22,825 --> 00:09:26,415
вы увидите, что соответствующая информация отображается.

129
00:09:26,415 --> 00:09:32,290
И обратите внимание, как эта информация исчезает при выборе конкретного пользователя.

130
00:09:32,290 --> 00:09:35,400
Но, конечно, если вы довольны этим,

131
00:09:35,400 --> 00:09:37,890
то это нормально, мы можем остановиться на этом этапе.

132
00:09:37,890 --> 00:09:45,360
Но я хотел бы красиво определить реальную вкладку вокруг этого.

133
00:09:45,360 --> 00:09:50,370
Итак, здесь я собираюсь применить несколько атрибутов CSS,

134
00:09:50,370 --> 00:09:53,540
свойств для этой конкретной вкладки здесь,

135
00:09:53,540 --> 00:09:55,660
чтобы

136
00:09:55,660 --> 00:09:58,290
там была хорошая, чистая структура вкладок.

137
00:09:58,290 --> 00:10:03,590
Итак, давайте создадим несколько свойств CSS для этого.

138
00:10:03,590 --> 00:10:06,855
Последний шаг, переключение на styles.css.

139
00:10:06,855 --> 00:10:09,555
После обратной навигационной панели

140
00:10:09,555 --> 00:10:15,530
я собираюсь ввести классы CSS для содержимого вкладки,

141
00:10:15,530 --> 00:10:18,010
поэтому я указываю для содержимого вкладки,

142
00:10:18,010 --> 00:10:29,565
граница-слева: 1px solid DDD.

143
00:10:29,565 --> 00:10:48,195
И я собираюсь применить то же самое для границы справа и снизу.

144
00:10:48,195 --> 00:10:51,310
Мне не нужно применять к вершине, потому что верхняя часть

145
00:10:51,310 --> 00:10:55,585
уже регулируется навигацией по вкладкам.

146
00:10:55,585 --> 00:11:00,250
А затем позвольте мне дать отступ 10 пикселей вокруг,

147
00:11:00,250 --> 00:11:02,990
а затем сохранить изменения.

148
00:11:02,990 --> 00:11:07,450
Давайте посмотрим на нашу веб-страницу после этого.

149
00:11:07,450 --> 00:11:09,980
Возвращаясь к нашей странице,

150
00:11:09,980 --> 00:11:11,395
теперь вы видите красивую,

151
00:11:11,395 --> 00:11:14,920
чистую структуру, подобную вкладкам, создается.

152
00:11:14,920 --> 00:11:18,355
Таким образом, когда вы переходите к каждому из них

153
00:11:18,355 --> 00:11:24,695
, соответствующая информация отображается в его собственной вкладке.

154
00:11:24,695 --> 00:11:28,905
Это завершает это упражнение, где мы

155
00:11:28,905 --> 00:11:33,120
рассмотрели использование вкладки навигации для нашей веб-страницы.

156
00:11:33,120 --> 00:11:39,435
И тогда мы увидели, как мы можем создать навигацию по вкладкам и заключить другой контент.

157
00:11:39,435 --> 00:11:46,200
Это также хорошее время для вас сделать Git комментарий с вкладками сообщений.