1
00:00:03,650 --> 00:00:11,190
Мы только что завершили обсуждение важности предоставления навигации на вашем сайте.

2
00:00:11,190 --> 00:00:15,920
Мы также рассмотрели несколько различных способов, которые мы можем обеспечить навигацию на веб-сайте.

3
00:00:15,920 --> 00:00:21,229
Теперь пришло время для нас посмотреть на bootstrap и посмотреть на компоненты,

4
00:00:21,229 --> 00:00:26,269
которые предоставляет bootstrap, которые позволяют нам добавлять навигацию на наши веб-сайты.

5
00:00:26,269 --> 00:00:32,815
Два важных компонента начальной загрузки - Navbar и Breadcrumbs.

6
00:00:32,815 --> 00:00:37,610
Мы рассмотрим оба из них в этом упражнении.

7
00:00:37,610 --> 00:00:44,745
Давайте начнем с добавления навигационной панели в верхней части нашей веб-страницы.

8
00:00:44,745 --> 00:00:50,065
Мы можем сделать это, используя компонент Navbar, который является частью бутстрапа.

9
00:00:50,065 --> 00:00:51,605
Итак, как мы начнем?

10
00:00:51,605 --> 00:00:56,260
Мы переходим к телу нашей HTML-страницы.

11
00:00:56,260 --> 00:00:58,760
Итак, здесь у меня открыт index.HTML.

12
00:00:58,760 --> 00:01:00,495
И вверху

13
00:01:00,495 --> 00:01:06,090
я собираюсь добавить элемент, используя этот HTML-тег nav.

14
00:01:06,090 --> 00:01:10,330
Теперь NAV HTML-тег предназначен для обеспечения навигации.

15
00:01:10,330 --> 00:01:17,880
Итак, давайте воспользуемся этим тегом и построим нашу навигационную панель, используя тег nav.

16
00:01:17,880 --> 00:01:19,645
Итак, теперь, вверху,

17
00:01:19,645 --> 00:01:22,055
я собираюсь добавить в этот тег,

18
00:01:22,055 --> 00:01:30,040
поместить навигационную панель и построить навигационную панель вокруг этого тега навигации.

19
00:01:30,040 --> 00:01:33,910
Итак, как только мы добавим этот тег nav в index.HTML,

20
00:01:33,910 --> 00:01:39,590
тогда мы можем идти вперед, а затем применить классы bootstraps к этому тегу nav.

21
00:01:39,590 --> 00:01:42,700
Итак, я применяю навигационную панель класса.

22
00:01:42,700 --> 00:01:47,485
Итак, класс navbar в bootstrap позволяет мне создать панель навигации.

23
00:01:47,485 --> 00:01:50,730
Существует множество различных способов настройки панели навигации,

24
00:01:50,730 --> 00:01:56,600
которые мы рассматриваем как дополнительные классы, которые добавят к этому тегу навигации.

25
00:01:56,600 --> 00:01:58,770
Наряду с Navbar,

26
00:01:58,770 --> 00:02:02,880
мы также добавляем в следующий класс, который является navbar-dark.

27
00:02:02,880 --> 00:02:08,480
Теперь я хочу, чтобы моя панель навигации была темной в цвете,

28
00:02:08,480 --> 00:02:09,985
с более темным фоном.

29
00:02:09,985 --> 00:02:13,920
Потому что это хорошо сочетается с сайтом, который я только что разработал.

30
00:02:13,920 --> 00:02:16,150
Мы можем иметь navbar-light,

31
00:02:16,150 --> 00:02:18,950
который является более светлой цветной навигационной панелью.

32
00:02:18,950 --> 00:02:23,775
Таким образом, вы можете использовать любой из них на вашей веб-странице.

33
00:02:23,775 --> 00:02:32,620
Следующий класс, который я собираюсь использовать, - это класс navbar-expand-sm.

34
00:02:32,620 --> 00:02:36,870
Теперь, а также, я укажу размер экрана

35
00:02:36,870 --> 00:02:42,064
, ниже которого вступает в существование переключение.

36
00:02:42,064 --> 00:02:45,165
Теперь, когда я говорю navbar-expand-sm, это

37
00:02:45,165 --> 00:02:48,480
означает, что для маленьких и дополнительных маленьких экранов

38
00:02:48,480 --> 00:02:51,370
эта навигационная панель станет переключаемой навигационной панелью. Это

39
00:02:51,370 --> 00:02:57,080
означает, что он будет свернут в этих размерах экрана.

40
00:02:57,080 --> 00:03:00,520
Вы скоро узнаете, как это работает,

41
00:03:00,520 --> 00:03:02,930
когда мы посмотрим, как мы можем добавить

42
00:03:02,930 --> 00:03:07,460
плагин коллапса в навигационную панель, чтобы включить такое поведение.

43
00:03:07,460 --> 00:03:10,970
Таким образом, наряду с переключателем навигационной панели sm,

44
00:03:10,970 --> 00:03:15,240
я собираюсь применить цвет фона к навигационной панели изначально,

45
00:03:15,240 --> 00:03:18,570
что было бы bg-первичным.

46
00:03:18,570 --> 00:03:25,909
Теперь bg-primary - это основной цвет, который определен в вашем бутстрапе.

47
00:03:25,909 --> 00:03:33,350
По умолчанию это версия синего цвета, которая используется бутстрапами.

48
00:03:33,350 --> 00:03:35,910
Так что я начну с этого как моего основного цвета.

49
00:03:35,910 --> 00:03:42,350
Позже я настрою цвет моей навигационной панели, используя некоторые классы CSS.

50
00:03:42,350 --> 00:03:45,155
Кроме того, я также собираюсь применить

51
00:03:45,155 --> 00:03:50,255
другой класс, называемый фиксированной вершиной, к этой навигационной панели.

52
00:03:50,255 --> 00:03:55,210
То, что делает фиксированная верхняя часть, это фиксирует панель навигации в верхней

53
00:03:55,210 --> 00:04:00,330
части окна браузера, где эта веб-страница визуализируется.

54
00:04:00,330 --> 00:04:03,830
Даже когда вы прокручиваете свою

55
00:04:03,830 --> 00:04:07,870
влажную страницу, панель навигации оставалась вверху страницы.

56
00:04:07,870 --> 00:04:12,250
Вы можете просто использовать фиксированное дно, чтобы

57
00:04:12,250 --> 00:04:18,235
зафиксировать панель навигации в нижней части окна браузера или вы можете сказать, статический верх.

58
00:04:18,235 --> 00:04:21,810
А также, вы можете просто не использовать этот класс.

59
00:04:21,810 --> 00:04:23,140
Если вы не используете это,

60
00:04:23,140 --> 00:04:29,325
ваша навигационная панель также будет прокручиваться, когда ваша веб-страница прокручивается вверх.

61
00:04:29,325 --> 00:04:36,670
На моем веб-сайте я выбираю, чтобы панель навигации фиксировалась в верхней части страницы.

62
00:04:36,670 --> 00:04:38,600
Есть много других опций,

63
00:04:38,600 --> 00:04:43,920
которые вы можете найти в документации bootstraps.

64
00:04:43,920 --> 00:04:48,495
Таким образом, это один из примеров использования панели навигации.

65
00:04:48,495 --> 00:04:51,645
Теперь, кроме того, внутри панели навигации,

66
00:04:51,645 --> 00:04:54,545
я собираюсь заключить любой контент,

67
00:04:54,545 --> 00:04:57,450
который будет использоваться в навигационной панели внутри контейнера.

68
00:04:57,450 --> 00:05:02,880
Таким образом, здесь я буду использовать элемент div

69
00:05:02,880 --> 00:05:10,125
и применять класс контейнера к этому элементу div.

70
00:05:10,125 --> 00:05:12,520
Таким образом, все, что заключено внутри,

71
00:05:12,520 --> 00:05:17,375
будет ограничено той же шириной, что и остальная часть моей веб-страницы.

72
00:05:17,375 --> 00:05:20,575
Как вы помните, я использовал класс контейнера для

73
00:05:20,575 --> 00:05:24,870
определения ширины содержимого на моей веб-странице,

74
00:05:24,870 --> 00:05:28,080
поэтому я собираюсь применить то же самое к моей панели навигации,

75
00:05:28,080 --> 00:05:31,490
так что моя информация панели навигации будет

76
00:05:31,490 --> 00:05:36,185
отображаться в той же ширине, что и остальная часть моей веб-страницы.

77
00:05:36,185 --> 00:05:41,225
Вы можете не использовать класс контейнера на панели навигации, и в этом случае

78
00:05:41,225 --> 00:05:47,200
содержимое панели навигации будет распространяться по всей ширине экрана.

79
00:05:47,200 --> 00:05:49,055
Внутри панели навигации

80
00:05:49,055 --> 00:05:54,280
я собираюсь добавить класс в тег здесь.

81
00:05:54,280 --> 00:06:02,390
Этот класс, который я называю navbar-brand,

82
00:06:02,520 --> 00:06:09,170
позволяет мне отображать некоторую информацию в качестве информации о бренде на моей панели навигации.

83
00:06:09,170 --> 00:06:11,110
Так что, например, если у

84
00:06:11,110 --> 00:06:13,050
вас есть компания, вы можете отобразить название вашей компании или

85
00:06:13,050 --> 00:06:16,040
логотип вашей компании, используя navbar-бренд,

86
00:06:16,040 --> 00:06:21,390
так что он будет отображаться на панели навигации.

87
00:06:21,390 --> 00:06:23,370
Очевидно, что когда вы

88
00:06:23,370 --> 00:06:26,400
посещаете многие сайты, вы увидите, что название компании где-то видно

89
00:06:26,400 --> 00:06:30,310
на панели навигации этого сайта.

90
00:06:30,310 --> 00:06:33,085
Итак, позвольте мне добавить этот бренд navbar.

91
00:06:33,085 --> 00:06:42,190
Это также может быть гиперссылка на домашнюю страницу вашего сайта.

92
00:06:42,190 --> 00:06:43,895
Так что, я оставлю это там.

93
00:06:43,895 --> 00:06:46,000
На остальных страницах моего сайта

94
00:06:46,000 --> 00:06:50,480
я просто добавлю href, чтобы вернуть меня на страницу index.HTML,

95
00:06:50,480 --> 00:06:52,449
которая является главной страницей.

96
00:06:52,449 --> 00:07:00,109
И внутри я добавлю название своего ресторана.

97
00:07:03,220 --> 00:07:06,890
Давайте сохраним изменения и

98
00:07:06,890 --> 00:07:11,110
посмотрим на текущее состояние моей навигационной панели.

99
00:07:11,110 --> 00:07:13,710
Перейдя на веб-страницу в браузере,

100
00:07:13,710 --> 00:07:21,150
теперь вы можете увидеть, где панель навигации видна на моей веб-странице в браузере.

101
00:07:21,150 --> 00:07:25,960
Панель навигации теперь находится в верхней части страницы, и вы

102
00:07:25,960 --> 00:07:30,490
можете видеть, что, когда я прокручиваю свою страницу,

103
00:07:30,490 --> 00:07:36,745
панель навигации по-прежнему остается наверху, потому что я привык к классу с фиксированным топом.

104
00:07:36,745 --> 00:07:38,520
Вы также можете увидеть

105
00:07:38,520 --> 00:07:45,460
navbar-бренд, позволяющий мне отображать название ресторана там.

106
00:07:45,460 --> 00:07:50,310
Позже я собираюсь заменить это логотипом для этого ресторана.

107
00:07:50,310 --> 00:07:56,010
Вы заметили, что панель навигации частично покрыта Jumbotron.

108
00:07:56,010 --> 00:08:01,395
Вы собираетесь исправить это немного позже, используя некоторые настройки CSS.

109
00:08:01,395 --> 00:08:07,255
Следующее, что я собираюсь сделать, это добавить несколько ссылок на мою панель навигации,

110
00:08:07,255 --> 00:08:13,060
так что эти ссылки приведут меня к другим страницам на моем веб-сайте.

111
00:08:13,060 --> 00:08:14,790
Так как же нам это сделать?

112
00:08:14,790 --> 00:08:17,575
Возвращаясь к index.HTML,

113
00:08:17,575 --> 00:08:24,490
я собираюсь добавить в ul здесь,

114
00:08:24,490 --> 00:08:27,715
в котором я собираюсь объявить

115
00:08:27,715 --> 00:08:36,460
все различные ссылки, которые будут отображаться в моем окне навигации.

116
00:08:36,460 --> 00:08:43,590
Итак, этот ul, к которому я собираюсь применить класс как navbar-nav.

117
00:08:43,590 --> 00:08:46,530
Таким образом, это класс, который поможет мне определить

118
00:08:46,530 --> 00:08:51,275
набор ссылок, которые будут включены в мою панель навигации.

119
00:08:51,275 --> 00:08:56,655
И эти ссылки будут отображаться горизонтально внутри моей навигационной панели.

120
00:08:56,655 --> 00:09:01,660
Автокласс mr, который я также применил к ul,

121
00:09:01,660 --> 00:09:05,740
используется для указания правого поля.

122
00:09:05,740 --> 00:09:08,590
Таким образом, это класс утилиты, который доступен

123
00:09:08,590 --> 00:09:13,815
в bootstrap, который позволяет мне указать правый край.

124
00:09:13,815 --> 00:09:17,190
Так что, если я скажу, mr-auto,

125
00:09:17,190 --> 00:09:19,390
это означает, что с правой

126
00:09:19,390 --> 00:09:23,100
стороны, правый край должен быть установлен как можно больше.

127
00:09:23,100 --> 00:09:26,380
Таким образом, это означает, что содержимое будет нажато как

128
00:09:26,380 --> 00:09:30,175
можно больше влево в навигационной панели.

129
00:09:30,175 --> 00:09:32,310
Внутри этого неупорядоченного

130
00:09:32,310 --> 00:09:34,515
списка я могу использовать элементы списка

131
00:09:34,515 --> 00:09:38,775
, чтобы включить различные ссылки, которые будут частью моей панели навигации.

132
00:09:38,775 --> 00:09:42,595
Поэтому там я собираюсь добавить несколько ссылок там,

133
00:09:42,595 --> 00:09:48,900
и я начну с указания первого там со ссылкой.

134
00:09:48,900 --> 00:09:51,830
К каждому элементу списка на панели навигации

135
00:09:51,830 --> 00:09:56,110
вы собираетесь применить класс как элемент навигации.

136
00:09:56,110 --> 00:10:03,780
Это позволяет отображать эти элементы списка горизонтально в виде ссылок на моей панели навигации.

137
00:10:03,780 --> 00:10:06,055
И затем внутри здесь

138
00:10:06,055 --> 00:10:10,640
я могу использовать тег, чтобы добавить

139
00:10:10,640 --> 00:10:16,140
фактическую ссылку, которая будет частью моей навигационной панели.

140
00:10:16,140 --> 00:10:19,600
Поэтому внутри я использую тег с

141
00:10:19,600 --> 00:10:28,730
классом nav-link, и это также позволяет мне использовать href.

142
00:10:30,260 --> 00:10:37,145
Атрибут для определения связи там.

143
00:10:37,145 --> 00:10:41,255
И первое, что я включу, это Дом.

144
00:10:41,255 --> 00:10:46,935
Таким образом, это будет включать элемент под названием Home в этой навигационной панели.

145
00:10:46,935 --> 00:10:51,900
Позвольте мне просто скопировать это, а затем вставить это.

146
00:10:51,900 --> 00:10:55,475
И тогда мы отредактируем некоторые из них, потому что я хочу добавить

147
00:10:55,475 --> 00:11:00,630
четыре разных в свою панель навигации.

148
00:11:00,630 --> 00:11:02,110
Первый из них - Дом.

149
00:11:02,110 --> 00:11:04,170
Второй будет «О».

150
00:11:04,170 --> 00:11:13,560
Третьим было бы Меню, которое я собираюсь построить как часть следующего курса.

151
00:11:13,560 --> 00:11:16,630
И последним будет Контакт.

152
00:11:16,630 --> 00:11:25,495
Типичный веб-сайт компании будет иметь такие ссылки в своей навигационной панели.

153
00:11:25,495 --> 00:11:27,830
С добавлением этих двух,

154
00:11:27,830 --> 00:11:30,915
теперь я могу сделать то,

155
00:11:30,915 --> 00:11:36,560
что мы можем явно определить одну из этих ссылок как активную ссылку,

156
00:11:36,560 --> 00:11:39,600
что означает, что когда вы находитесь на этой конкретной странице, эта

157
00:11:39,600 --> 00:11:42,145
конкретная ссылка может быть выделена.

158
00:11:42,145 --> 00:11:48,685
Поэтому для этого мы применим здесь класс, называемый активным к одному из этих элементов списка.

159
00:11:48,685 --> 00:11:51,815
В этом случае, поскольку это страница index.html,

160
00:11:51,815 --> 00:11:56,085
я применяю активный класс к домашней ссылке там.

161
00:11:56,085 --> 00:12:02,725
Это в значительной степени завершает мою панель навигации на странице index.HTML.

162
00:12:02,725 --> 00:12:08,095
Одна мелочь, которую я хотел бы исправить здесь, это то, что ссылка О,

163
00:12:08,095 --> 00:12:12,130
я хочу связать ее с aboutus.HTML

164
00:12:12,130 --> 00:12:16,965
страницу, которую мы уже включили в наш веб-сайт,

165
00:12:16,965 --> 00:12:19,680
потому что это то, где я хочу, чтобы она привела.

166
00:12:19,680 --> 00:12:23,795
Давайте посмотрим на нашу навигационную панель этой части.

167
00:12:23,795 --> 00:12:25,985
Вернувшись на нашу навигационную панель,

168
00:12:25,985 --> 00:12:28,995
вы можете сразу увидеть результат включения

169
00:12:28,995 --> 00:12:32,730
этих элементов в неупорядоченный список.

170
00:12:32,730 --> 00:12:34,160
Таким образом, вы видите «Главная», «

171
00:12:34,160 --> 00:12:36,500
О программе», «Меню»

172
00:12:36,500 --> 00:12:43,145
и «Контакты», и каждый из них является ссылкой, но это элемент навигации здесь.

173
00:12:43,145 --> 00:12:48,740
И обратите внимание, как Home подсвечивается здесь из-за использования активного класса.

174
00:12:48,740 --> 00:12:50,305
Итак, если я нажму на «О программе»,

175
00:12:50,305 --> 00:12:52,990
он должен отвести меня на поле «О».

176
00:12:52,990 --> 00:12:55,670
Вот и вот, вот и мы.

177
00:12:55,670 --> 00:12:58,970
Но я понимаю, что у меня нет способа вернуться,

178
00:12:58,970 --> 00:13:04,190
так что это означает, что мне также нужно передать эту панель навигации на страницу aboutus.HTML.

179
00:13:04,190 --> 00:13:07,330
Мы доберемся туда через короткое время.

180
00:13:07,330 --> 00:13:11,360
На данный момент я собираюсь быстро перемещаться с помощью кнопки «Назад»

181
00:13:11,360 --> 00:13:16,585
моего браузера обратно на мою страницу index.HTML.

182
00:13:16,585 --> 00:13:21,030
Одна вещь, которую я также хотел продемонстрировать вам, это то, как

183
00:13:21,030 --> 00:13:27,525
эта панель навигации будет рухнуть для небольших и дополнительных небольших размеров экрана.

184
00:13:27,525 --> 00:13:35,570
Итак, давайте включим представление с помощью отзывчивого представления,

185
00:13:35,570 --> 00:13:37,960
а затем позвольте мне перейти к Galaxy S5.

186
00:13:37,960 --> 00:13:43,250
И я заметил, что когда я использую Galaxy S5, как это,

187
00:13:43,250 --> 00:13:50,000
вы можете видеть, что это отображается раньше, чем он уже охватывает экран.

188
00:13:50,000 --> 00:13:52,145
Это не то поведение, которое я хочу.

189
00:13:52,145 --> 00:14:00,075
Я хочу, чтобы иметь возможность скрыть это, когда я просматриваю это на маленьком и дополнительном маленьком экране.

190
00:14:00,075 --> 00:14:04,220
И тогда, возможно, я добавляю здесь кнопку, которую я могу

191
00:14:04,220 --> 00:14:08,450
использовать для включения и отключения отображения этих ссылок.

192
00:14:08,450 --> 00:14:13,170
Вы видели такие вещи на мобильных сайтах.

193
00:14:13,170 --> 00:14:16,935
Как мы это сделаем в бутстрапе?

194
00:14:16,935 --> 00:14:19,645
Давайте перейдем к следующему шагу.

195
00:14:19,645 --> 00:14:24,300
Возвращаемся к нашей навигационной панели.

196
00:14:24,300 --> 00:14:27,910
Позвольте мне добавить туда кнопку,

197
00:14:27,910 --> 00:14:33,840
которая будет действовать как кнопка переключения для отображения и скрытия

198
00:14:33,840 --> 00:14:42,225
моих ссылок с моей навигационной панели, когда она отображается на дополнительных интеллектуальных и малых экранах.

199
00:14:42,225 --> 00:14:43,615
Итак, чтобы добавить туда,

200
00:14:43,615 --> 00:14:47,645
позвольте мне добавить кнопку и применить некоторые классы к этой кнопке.

201
00:14:47,645 --> 00:14:54,285
Мы обсудим больше о кнопках в бутстрапе в следующем уроке.

202
00:14:54,285 --> 00:14:57,515
Но чтобы добавить кнопку в bootstrap,

203
00:14:57,515 --> 00:15:03,770
вы примените класс для этой конкретной кнопки как navbar-toggler.

204
00:15:04,450 --> 00:15:07,420
Итак, это навигатор.

205
00:15:07,420 --> 00:15:09,400
Итак, как следует из названия,

206
00:15:09,400 --> 00:15:14,970
вы уже начинаете понимать, что эта кнопка будет делать в этом случае.

207
00:15:14,970 --> 00:15:22,650
И тогда я бы добавил тип как кнопку, чтобы указать, что это действует как кнопка.

208
00:15:22,650 --> 00:15:31,360
А затем переключение данных как свертывание.

209
00:15:31,360 --> 00:15:36,070
Теперь этот атрибут data-toggle, который вы увидите здесь, на самом деле

210
00:15:36,070 --> 00:15:42,400
является использованием компонента JavaScript в bootstrap.

211
00:15:42,400 --> 00:15:48,100
Мы собираемся посмотреть на эту строку дефисов данных типа атрибутов больше в следующем модуле,

212
00:15:48,100 --> 00:15:50,875
где мы будем смотреть на bootstraps JavaScript компоненты.

213
00:15:50,875 --> 00:15:55,225
Панель навигации требует одного из этих компонентов JavaScript, чтобы иметь возможность

214
00:15:55,225 --> 00:15:59,980
включать и выключать мои ссылки на моей панели навигации,

215
00:15:59,980 --> 00:16:03,825
поэтому я быстро представил эту концепцию здесь,

216
00:16:03,825 --> 00:16:05,800
но мы вернемся, чтобы изучить

217
00:16:05,800 --> 00:16:12,020
эти компоненты JavaScript больше в следующем модуле.

218
00:16:12,020 --> 00:16:14,420
Таким образом, переключение данных свернуть, а

219
00:16:14,420 --> 00:16:24,610
затем цель данных как #Navbar.

220
00:16:24,610 --> 00:16:30,660
Теперь я собираюсь представить еще один div с идентификатором как navbar.

221
00:16:30,660 --> 00:16:33,470
Итак, когда я указываю дату или цель #Navbar,

222
00:16:33,470 --> 00:16:38,560
это относится к идентификатору этого другого элемента, который будет

223
00:16:38,560 --> 00:16:44,025
целью этой конкретной кнопки здесь.

224
00:16:44,025 --> 00:16:47,625
Итак, это та часть, которую я добавляю в нижнюю часть.

225
00:16:47,625 --> 00:16:52,340
А также, я хочу, чтобы кнопка отображала что-то здесь.

226
00:16:52,340 --> 00:16:56,970
И обычно, когда вы видите такие кнопки на мобильных сайтах,

227
00:16:56,970 --> 00:16:59,730
он будет содержать свободные строки там,

228
00:16:59,730 --> 00:17:04,310
так что обычно называется значок Navbar-Toggle.

229
00:17:04,310 --> 00:17:11,630
Итак, я собираюсь включить специальный значок, который

230
00:17:11,630 --> 00:17:19,660
включен в bootstrap, называемый значком navbar-toggler.

231
00:17:19,660 --> 00:17:23,395
Итак, если я применим этот класс к тегу span,

232
00:17:23,395 --> 00:17:29,050
то это введёт значок navbar-toggler к моей кнопке здесь.

233
00:17:29,410 --> 00:17:32,130
Таким образом, это вводит кнопку.

234
00:17:32,130 --> 00:17:34,980
Мы посмотрим, как это выглядит через короткое время.

235
00:17:34,980 --> 00:17:36,780
Теперь, когда я нажимаю эту кнопку,

236
00:17:36,780 --> 00:17:41,140
я хочу иметь возможность показывать и скрывать эти ссылки.

237
00:17:41,140 --> 00:17:43,140
Чтобы позволить мне сделать это,

238
00:17:43,140 --> 00:17:50,780
то, что я собираюсь сделать, это окружить этот ul div здесь.

239
00:17:51,070 --> 00:17:57,585
Итак, я собираюсь войти и представить div вокруг этого ul.

240
00:17:57,585 --> 00:17:59,280
И к этому div

241
00:17:59,280 --> 00:18:04,850
я буду применять класс как коллапс,

242
00:18:04,850 --> 00:18:15,895
а затем navbar-clapse, а затем я даю ему идентификатор как Navbar.

243
00:18:15,895 --> 00:18:20,115
Теперь вы начинаете видеть корреляцию между

244
00:18:20,115 --> 00:18:26,300
этими классами и идентификатором и тем, что я объявил в переключении данных и цели данных.

245
00:18:26,300 --> 00:18:32,750
Итак, здесь цель данных, которую я указываю как #Navbar, и поэтому идентификатор, данный этому div, является navbar.

246
00:18:32,750 --> 00:18:35,640
И я указываю переключатель данных как свертывание.

247
00:18:35,640 --> 00:18:40,440
Collapse является одним из компонентов JavaScript bootstraps,

248
00:18:40,440 --> 00:18:43,955
который мы рассмотрим более подробно в следующем модуле.

249
00:18:43,955 --> 00:18:50,780
Итак, заключив это внутри div для небольших и дополнительных маленьких экранов,

250
00:18:50,780 --> 00:18:54,860
это будет скрыто по умолчанию,

251
00:18:54,860 --> 00:18:56,520
но когда я нажимаю на кнопку,

252
00:18:56,520 --> 00:19:01,445
содержимое этого div будет показано на экране.

253
00:19:01,445 --> 00:19:09,540
Позвольте мне также добавить mr-auto к классу navarbar-brand, чтобы

254
00:19:09,540 --> 00:19:18,775
я автоматически вводил достаточный правый край для этого бренда navbar-.

255
00:19:18,775 --> 00:19:22,495
Теперь давайте посмотрим на это в нашем браузере.

256
00:19:22,495 --> 00:19:25,270
Перейдя в браузер, теперь вы можете увидеть, как

257
00:19:25,270 --> 00:19:31,370
моя навигационная панель рухнула на небольших и дополнительных маленьких размерах экрана.

258
00:19:31,370 --> 00:19:35,925
И обратите внимание на эту кнопку с левой стороны.

259
00:19:35,925 --> 00:19:38,005
Когда я нажимаю на кнопку,

260
00:19:38,005 --> 00:19:43,805
ссылки на моей панели навигации отображаются и скрыты.

261
00:19:43,805 --> 00:19:51,360
Это поведение, которое я хочу для адаптивной реализации моей навигационной панели.

262
00:19:51,360 --> 00:19:55,375
Если переключиться на обычный,

263
00:19:55,375 --> 00:20:00,925
больший экран, панель навигации полностью отображается, включая ссылки.

264
00:20:00,925 --> 00:20:07,190
Но когда я просматриваю то же самое на меньшем экране, как это,

265
00:20:07,190 --> 00:20:10,430
тогда ссылки панели навигации скрыты за

266
00:20:10,430 --> 00:20:15,020
этой кнопкой, а затем будут включаться и выключены, нажав на эту кнопку.

267
00:20:15,020 --> 00:20:18,190
Так что это отзывчивое поведение, которое вы можете

268
00:20:18,190 --> 00:20:22,870
построить в панели навигации на вашем сайте.

269
00:20:22,870 --> 00:20:27,285
Теперь, когда мы завершили навигационную панель на моей странице index.HTML,

270
00:20:27,285 --> 00:20:32,015
я хочу иметь возможность ввести ту же панель навигации на странице aboutus.HTML.

271
00:20:32,015 --> 00:20:35,540
Прежде чем мы туда доберемся, пойдем к нижнему колонтитулу.

272
00:20:35,540 --> 00:20:38,250
И тогда вы заметили, что в нижнем колонтитуле

273
00:20:38,250 --> 00:20:39,870
у нас есть эти ссылки.

274
00:20:39,870 --> 00:20:43,265
Я хочу иметь возможность обновить эту ссылку, чтобы указать на

275
00:20:43,265 --> 00:20:48,450
aboutus.HTML, чтобы даже щелкнув ссылку в моем нижнем колонтитуле,

276
00:20:48,450 --> 00:20:51,090
я все равно перейду на страницу о.

277
00:20:51,090 --> 00:20:53,780
Теперь, возвращаясь сюда,

278
00:20:53,780 --> 00:21:02,320
то, что я собираюсь сделать, это просто скопировать этот код этой навигационной панели отсюда.

279
00:21:02,870 --> 00:21:13,520
А затем перейдите на страницу aboutus.HTML, а затем вставьте ее в мою страницу aboutus.HTML.

280
00:21:13,520 --> 00:21:17,145
Не только это, мне нужно сделать некоторые корректировки этого,

281
00:21:17,145 --> 00:21:20,750
потому что это теперь на странице aboutus.HTML.

282
00:21:20,750 --> 00:21:25,105
Очевидно, есть несколько вещей, которые мне нужно обновить.

283
00:21:25,105 --> 00:21:29,875
Прежде всего, этот бренд navbar, который должен привести меня обратно

284
00:21:29,875 --> 00:21:35,485
на мою домашнюю страницу, теперь должен быть обновлен как index.HTML здесь.

285
00:21:35,485 --> 00:21:43,045
И затем, элемент списка здесь теперь второй Главная страница снова,

286
00:21:43,045 --> 00:21:51,165
я хочу обновить это до index.HTML там, а затем вторую ссылку на о.,

287
00:21:51,165 --> 00:21:53,610
потому что это страница aboutus.HTML,

288
00:21:53,610 --> 00:21:58,480
я собираюсь положить его обратно в этот хэш там, а затем я удалю

289
00:21:58,480 --> 00:22:06,045
активный класс из первого , а затем применить активный класс ко второму элементу,

290
00:22:06,045 --> 00:22:11,520
потому что это страница «О странице» и поэтому это должно быть тот, который выделен.

291
00:22:11,520 --> 00:22:16,705
Опять же, перейдя в нижний колонтитул страницы «О странице».

292
00:22:16,705 --> 00:22:22,870
В нижнем колонтитуле я буду делать те же обновления для ссылок здесь, поэтому

293
00:22:22,870 --> 00:22:29,525
Главная страница должна привести меня к index.HTML, а затем позволить мне сохранить изменения.

294
00:22:29,525 --> 00:22:34,740
Итак, теперь моя About Page также обновляется правильно.

295
00:22:34,740 --> 00:22:36,390
Перейдя в браузер,

296
00:22:36,390 --> 00:22:41,220
теперь вы можете увидеть, что я нахожусь на моей домашней странице, а затем, когда я нажимаю на странице о странице,

297
00:22:41,220 --> 00:22:42,795
я перейду на страницу о программе.

298
00:22:42,795 --> 00:22:48,710
Обратите внимание, как та же панель навигации отображается в About Page,

299
00:22:48,710 --> 00:22:51,090
поэтому у вас есть о том, чтобы быть выделенным, потому

300
00:22:51,090 --> 00:22:53,660
что я применил к этому активный класс, а затем я могу

301
00:22:53,660 --> 00:22:58,770
вернуться на свою домашнюю страницу, нажав на нарвар-бренд или домашнюю страницу.

302
00:22:58,770 --> 00:23:02,115
Итак, давайте нажмем на нарвар-бренд, и мы снова в нашей

303
00:23:02,115 --> 00:23:06,210
главной или домашней странице или index.HTML.

304
00:23:06,210 --> 00:23:13,180
Таким образом, теперь навигация правильно настроена как на главной странице, так и на странице о программе.

305
00:23:13,180 --> 00:23:17,810
Несколько дополнительных вещей, которые я собираюсь сделать, это применить, если вы видите,

306
00:23:17,810 --> 00:23:23,480
что это класс, который я могу изменить цвет моей

307
00:23:32,595 --> 00:23:36,950
навигационной панели, а также я хотел бы добавить хлебную крошку к этой странице, и так, что хлебная крошка также даст мне еще один способ вернуться к моей домашней странице, а также указать

308
00:23:36,950 --> 00:23:42,170
иерархию на моем сайте, где я нахожусь в данный момент.

309
00:23:42,170 --> 00:23:45,505
Итак, давайте сделаем эти два шага дальше.

310
00:23:45,505 --> 00:23:49,835
Возвращаясь к этому редактору в styles.css.

311
00:23:49,835 --> 00:23:52,765
Я собираюсь добавить еще пару классов здесь.

312
00:23:52,765 --> 00:23:58,030
Вы заметили, что моя навигационная панель скрывала часть джамботрона.

313
00:23:58,030 --> 00:23:59,590
Чтобы избежать этого,

314
00:23:59,590 --> 00:24:01,705
то, что я собираюсь сделать, это для моего тела,

315
00:24:01,705 --> 00:24:06,110
я собираюсь дать отступ 50 пикселей

316
00:24:06,110 --> 00:24:11,505
сверху, чтобы эти 50 пикселей были оставлены для панели навигации для покрытия.

317
00:24:11,505 --> 00:24:14,580
Всякий раз, когда вы используете фиксированную верхнюю панель навигации,

318
00:24:14,580 --> 00:24:17,580
рекомендуется дать это дополнение к телу

319
00:24:17,580 --> 00:24:20,270
вашей веб-страницы, чтобы навигация не покрывала

320
00:24:20,270 --> 00:24:24,435
самый верхний элемент в теле вашей веб-страницы.

321
00:24:24,435 --> 00:24:29,675
Итак, остальные я собираюсь оставить как

322
00:24:29,675 --> 00:24:39,155
нулевые пиксели, а также z-индекс для моего тела как ноль.

323
00:24:39,155 --> 00:24:43,485
Из ваших знаний CSS вы понимаете, что делает z-индекс,

324
00:24:43,485 --> 00:24:48,865
и следующий, который я собираюсь сделать, я собираюсь

325
00:24:48,865 --> 00:24:55,580
перегрузить navbar-dark класс, добавив еще один цвет для

326
00:24:55,580 --> 00:24:59,750
класса navbar, а цвет, который я собираюсь

327
00:24:59,750 --> 00:25:06,490
выбрать, - 512DA8.

328
00:25:06,490 --> 00:25:15,275
Это темно-фиолетовый цвет, который выглядит очень хорошо на моем сайте.

329
00:25:15,275 --> 00:25:21,505
Действительно, Если у вас есть интерес, где я нашел эти цвета, вы можете посетить

330
00:25:21,505 --> 00:25:29,665
www.android.com, а затем посмотреть их документацию для дизайна материала и там,

331
00:25:29,665 --> 00:25:33,325
у них есть предложения о том, как цвета могут быть использованы

332
00:25:33,325 --> 00:25:38,965
в вашем приложении для Android, но то же самое относится даже к веб-сайту,

333
00:25:38,965 --> 00:25:46,675
так что где я пошел и выбрал эти цвета для использования на моем сайте.

334
00:25:46,675 --> 00:25:51,060
Итак, применяя это, теперь, когда я это делаю,

335
00:25:51,060 --> 00:25:55,740
мне нужно вернуться на мою страницу index.HTML, а

336
00:25:55,740 --> 00:26:01,095
затем из навигационной панели я должен удалить этот bg-primary.

337
00:26:01,095 --> 00:26:09,320
В противном случае цвет, который я предложил в CSS, не будет применяться к этому.

338
00:26:09,320 --> 00:26:14,185
Аналогичным образом перейдите на страницу aboutus.HTML, а затем прокрутите

339
00:26:14,185 --> 00:26:20,850
панель навигации, а затем удалите из нее bg-primary.

340
00:26:21,610 --> 00:26:26,580
Теперь, пока я нахожусь на странице aboutus.HTML,

341
00:26:26,580 --> 00:26:34,080
позвольте мне ввести панировочную крошку в мой контейнер,

342
00:26:34,080 --> 00:26:36,310
первую строку моего контейнера там.

343
00:26:36,310 --> 00:26:39,405
Вот где был титул «О нас»,

344
00:26:39,405 --> 00:26:45,120
так что там я собираюсь войти и представить ол.

345
00:26:45,260 --> 00:26:53,560
Я просто использую тег ol как способ введения хлебной крошки.

346
00:26:53,560 --> 00:26:59,025
Вы можете использовать даже div для этого, и он все равно будет работать отлично.

347
00:26:59,025 --> 00:27:06,050
Просто так получилось, что пример документации bootstraps использовал ol, поэтому

348
00:27:06,050 --> 00:27:14,030
я придерживаюсь того, что даже простой div также будет работать нормально здесь.

349
00:27:14,030 --> 00:27:20,895
Итак, я говорю ол класс кол-12 панировочные крошки.

350
00:27:20,895 --> 00:27:23,200
Таким образом, применялись классы хлебной крошки

351
00:27:23,200 --> 00:27:26,825
, а не col-12, что растянуло весь экран.

352
00:27:26,825 --> 00:27:33,500
И внутри, я собираюсь войти и добавить два элемента списка.

353
00:27:34,250 --> 00:27:39,625
Теперь вы видите, почему использование ol полезно здесь,

354
00:27:39,625 --> 00:27:48,565
потому что я могу использовать элементы списка для описания элемента хлебной крошки.

355
00:27:48,565 --> 00:27:50,725
Итак, элемент хлебной крошки здесь,

356
00:27:50,725 --> 00:27:55,020
поэтому я включаю один элемент хлебной крошки, а затем внутри там я буду использовать

357
00:27:55,020 --> 00:28:02,380
тег A, чтобы определить ссылку обратно на мою домашнюю страницу.

358
00:28:02,380 --> 00:28:07,275
Поэтому я говорю, «A», а затем к этому A,

359
00:28:07,275 --> 00:28:12,010
я даю href как index.HTML, а затем

360
00:28:12,010 --> 00:28:17,815
включаю это в мою первую крошку, а затем после этого

361
00:28:17,815 --> 00:28:25,660
следующий, который я собираюсь включить, - это другой элемент списка, а

362
00:28:25,660 --> 00:28:34,700
второй элемент списка, который я буду применять класс как элемент хлебной крошки и активный.

363
00:28:34,700 --> 00:28:40,900
Поэтому обратите внимание на использование активного класса здесь, а затем внутри, я скажу «о

364
00:28:40,900 --> 00:28:45,090
нас», мне не нужна ссылка здесь, потому что я уже на странице

365
00:28:45,090 --> 00:28:49,425
, поэтому его не нужно включать для этого элемента списка.

366
00:28:49,425 --> 00:28:51,010
Давайте сохраним изменения,

367
00:28:51,010 --> 00:28:54,910
чтобы вы могли увидеть, как хлебная крошка была введена на этой

368
00:28:54,910 --> 00:28:59,555
странице «О нас» здесь.

369
00:28:59,555 --> 00:29:04,410
Давайте посмотрим на полученную веб-страницу.

370
00:29:04,410 --> 00:29:11,320
Перейдя на мою веб-страницу, теперь вы можете видеть, что цвет навигационной панели

371
00:29:11,320 --> 00:29:14,310
теперь изменился на темно-фиолетовый, которые вводятся

372
00:29:14,310 --> 00:29:17,900
через CSS, и это выглядит красиво на экране здесь.

373
00:29:17,900 --> 00:29:20,780
Темно-фиолетовый, а затем светлее фиолетовый, а затем

374
00:29:20,780 --> 00:29:24,300
на дне еще более светлее фиолетовый для моего нижнего колонтитула.

375
00:29:24,300 --> 00:29:27,240
Ну, я не дизайнер,

376
00:29:27,240 --> 00:29:33,875
но это лучшее, что я мог придумать с точки зрения добавления близко к веб-сайтам.

377
00:29:33,875 --> 00:29:38,660
Как вы знаете из истории, мужчины слепые цвета.

378
00:29:38,660 --> 00:29:42,750
Поэтому у нас очень плохой вкус в цветах.

379
00:29:42,750 --> 00:29:48,065
Если вы женаты, ваша жена обязательно напомнит вам об этом.

380
00:29:48,065 --> 00:29:52,680
Давайте перейдем к странице «О странице» и посмотрим, как это выглядит.

381
00:29:52,680 --> 00:29:55,960
Таким образом, это страница «О странице» и в разделе «О странице» вы можете

382
00:29:55,960 --> 00:29:59,520
увидеть навигационную панель с правильным цветом

383
00:29:59,520 --> 00:30:06,925
там и отметить хлебную крошку, включенную в About Us здесь.

384
00:30:06,925 --> 00:30:10,910
Таким образом, вы можете увидеть Главная, которая приводит вас обратно на страницу индекса, а

385
00:30:10,910 --> 00:30:15,020
затем О нас, как вы видели, мы применили активную ссылку,

386
00:30:15,020 --> 00:30:16,655
активный класс к этому.

387
00:30:16,655 --> 00:30:19,500
Так вот как отображается «О нас» и Домашняя страница.

388
00:30:19,500 --> 00:30:23,770
Таким образом, это стиль навигации по умолчанию, используемый

389
00:30:23,770 --> 00:30:29,450
в bootstrap, и если я нажму на главную страницу, я вернусь на мою домашнюю страницу.

390
00:30:29,450 --> 00:30:35,585
С этим мы завершаем это упражнение на навигационной панели и сухарях.

391
00:30:35,585 --> 00:30:42,640
Это хорошее время для вас сделать git фиксацию с сообщением «navbar и breadcumbs».