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
使我们可以添加导航到我们的网站

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 页面的 body

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
我要添加一个元素, 使用 <nav>

14
00:01:06,090 --> 00:01:10,330
<nav> 的作用是提供导航

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
加入<nav>, 并构造导航栏

19
00:01:30,040 --> 00:01:33,910
一旦我们把这个 <nav> 标签添加到 index.HTML

20
00:01:33,910 --> 00:01:39,590
我们就可以继续将 bootstrap 类应用到这个 <nav> 标签

21
00:01:39,590 --> 00:01:42,700
所以我应用了 navbar 类

22
00:01:42,700 --> 00:01:47,485
bootstrap 中的 navbar 类让我能够新建一个导航栏

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
有了这一在小型屏幕可切换的导航栏

44
00:03:10,970 --> 00:03:15,240
我要对导航栏应用一个初始的背景颜色

45
00:03:15,240 --> 00:03:18,570
这是 bg-primary

46
00:03:18,570 --> 00:03:25,909
bg-primary 是在 bootstrap 中定义的主颜色

47
00:03:25,909 --> 00:03:33,350
默认情况下, 这是 bootstrap 使用的蓝色版本

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
另一个类称为 fixed-top 到我的导航栏

52
00:03:50,255 --> 00:03:55,210
 fixed-top 的作用是将导航栏固定到

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
您可以简单地使用 fix-bottom 来固定

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
您可以在 bootstrap 文档中找到

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
将在 container 内的导航栏中使用的内容

68
00:04:57,450 --> 00:05:02,880
因此, 我将在这里使用 div 元素

69
00:05:02,880 --> 00:05:10,125
并将 container 类应用于此 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
正如你所记得的, 我用 container 类来

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
您可以选择不在导航栏中使用 container 类, 在这种情况下,

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
我要在这里添加一个类到一个 <a> 标签

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
你可以使用 navbar-brand 显示

85
00:06:13,050 --> 00:06:16,040
公司名称或公司商标

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-brand

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
我只会添加链接使我回到 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
导航栏仍然保持在顶部, 因为我使用了 fixed-top 类

104
00:07:36,745 --> 00:07:38,520
你还可以看到

105
00:07:38,520 --> 00:07:45,460
navbar-brand 允许我展示餐厅的名字

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>设置
class="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-auto 类

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
你要设置 class="nav-item"

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
我可以使用 <a> 标签添加

139
00:10:10,640 --> 00:10:16,140
将成为我的导航栏一部分的实际链接

140
00:10:16,140 --> 00:10:19,600
所以里面我使用 <a> 标签

141
00:10:19,600 --> 00:10:28,730
class="nav-link", 这也允许我使用 href

142
00:10:30,260 --> 00:10:37,145
属性定义链接

143
00:10:37,145 --> 00:10:41,255
第一个我要包括的是 Home

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
第一个是 Home

149
00:11:02,110 --> 00:11:04,170
第二个是 About

150
00:11:04,170 --> 00:11:13,560
第三个是 Menu, 我将在下一个课程构建

151
00:11:13,560 --> 00:11:16,630
最后一个是 Contact

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
要做到这一点, 我们将在这里对这些列表项之一应用称为 active 的类

159
00:11:48,685 --> 00:11:51,815
在这种情况下, 因为这是 index.html 页,

160
00:11:51,815 --> 00:11:56,085
我将应用 active 类到 home 链接

161
00:11:56,085 --> 00:12:02,725
这几乎完成了我在 index.html 页的导航栏

162
00:12:02,725 --> 00:12:08,095
我想解决的一个小问题是 About 链接,

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
你在这里看到了 Home,

171
00:12:34,160 --> 00:12:36,500
About, Menu 和 Contact

172
00:12:36,500 --> 00:12:43,145
每个都是一个链接, 但也是一个导航项目

173
00:12:43,145 --> 00:12:48,740
并且注意到由于使用了 active 类, 这里的 Home 是突出显示的

174
00:12:48,740 --> 00:12:50,305
所以, 如果我点击 About,

175
00:12:50,305 --> 00:12:52,990
它应该带我去 About 页面

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
我们如何在 bootstrap 中进行这样的操作呢？

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
所以, 这是一个 navbar-toggler

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
然后 data-toggle="collapse"

209
00:15:31,360 --> 00:15:36,070
data-toggle 这个属性实际上是

210
00:15:36,070 --> 00:15:42,400
一个 Bootstrap JavaScript 组件

211
00:15:42,400 --> 00:15:48,100
我们将在下一个模块中更多地查看 data- 类型

212
00:15:48,100 --> 00:15:50,875
当我们学习 bootstrap 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
这一 bootstrap JavaScript 组件

218
00:16:12,020 --> 00:16:14,420
data-toggle=“collapse“

219
00:16:14,420 --> 00:16:24,610
然后 data-target=“#Navbar”

220
00:16:24,610 --> 00:16:30,660
现在, 我将引入另一个带有 id=“Navbar” 的 div

221
00:16:30,660 --> 00:16:33,470
所以, 当我指定一个数据或目标 #Navbar,

222
00:16:33,470 --> 00:16:38,560
它指向的是那个元素的 id, 这将是

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-toggler 图标

229
00:17:04,310 --> 00:17:11,630
所以, 我要使用一个特殊的图标,

230
00:17:11,630 --> 00:17:19,660
称为 navbar-toggler-icon

231
00:17:19,660 --> 00:17:23,395
因此, 如果我将此类应用于 <span> 标签,

232
00:17:23,395 --> 00:17:29,050
这将引入一个 navbar-toggler-icon 到我的按钮这里

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
我会设置 class="collapse"

242
00:18:04,850 --> 00:18:15,895
然后是 "navbar-collapse", 接着我给它一个 id 为 Navbar

243
00:18:15,895 --> 00:18:20,115
现在, 你开始看到这些类和 id 之间的相关性,

244
00:18:20,115 --> 00:18:26,300
以及我在 data-toggle 和data-target中声明的内容

245
00:18:26,300 --> 00:18:32,750
所以这里的 data-target 我设置为 #Navbar, 而给这个 <div> 的 id 是 Navbar

246
00:18:32,750 --> 00:18:35,640
我指定 data-toggle="collapse"

247
00:18:35,640 --> 00:18:40,440
collapse 是一个 bootstrap JavaScript 组件,

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
让我也向 <a> 添加一个 mr-auto 类

254
00:19:09,540 --> 00:19:18,775
因而给 navbar-brand 引入了足够的右边距

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
我的 navbar 在小和额外小的屏幕尺寸上是折叠的

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
我也仍然能到 About 页面

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

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-brand 应该带我回到

284
00:21:29,875 --> 00:21:35,485
我的主页, 应该更新为 index.html

285
00:21:35,485 --> 00:21:43,045
然后, 列表项里的 Home 项,

286
00:21:43,045 --> 00:21:51,165
我想更新为 index.html 然后 About 项,

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
第一个项目中的 active 类, 然后将 active 类应用于第二个项目,

290
00:22:06,045 --> 00:22:11,520
因为这是 About 页面, 所以应该突出显示它

291
00:22:11,520 --> 00:22:16,705
再次, 前往 About 页面的页脚。

292
00:22:16,705 --> 00:22:22,870
在页脚中, 我会对这里的链接做相同的更新, 所以

293
00:22:22,870 --> 00:22:29,525
Home 应该带我们回到 index.html, 让我保存更改

294
00:22:29,525 --> 00:22:34,740
所以, 现在我的 About 页面也被正确更新

295
00:22:34,740 --> 00:22:36,390
回到浏览器中,

296
00:22:36,390 --> 00:22:41,220
你现在可以看到, 我在我的主页上, 当我点击 About 页面,

297
00:22:41,220 --> 00:22:42,795
我会进入 About 页面

298
00:22:42,795 --> 00:22:48,710
注意到 About 页面显示相同的导航栏,

299
00:22:48,710 --> 00:22:51,090
About 被高亮, 因为我

300
00:22:51,090 --> 00:22:53,660
应用了 active 类, 然后我可以

301
00:22:53,660 --> 00:22:58,770
回到我的主页, 要么点击 navbar-brand 要么点击 Home

302
00:22:58,770 --> 00:23:02,115
让我们点击 navbar-brand, 现在我们回到了

303
00:23:02,115 --> 00:23:06,210
我们的主页

304
00:23:06,210 --> 00:23:13,180
因此, 现在在主页和 About 页面中都正确设置了导航

305
00:23:13,180 --> 00:23:17,810
我要做的另一些事是应用一些 CSS

306
00:23:17,810 --> 00:23:23,480
类, 从而我能够改变导航栏的颜色

307
00:23:23,480 --> 00:23:26,340
此外, 我想给 About 页面添加

308
00:23:26,340 --> 00:23:32,595
一个面包屑导航, 它也能够给我另一种方式

309
00:23:32,595 --> 00:23:36,950
导航回我的主页, 也将表明

310
00:23:36,950 --> 00:23:42,170
网站的层次结构, 我现在在那里

311
00:23:42,170 --> 00:23:45,505
接下来, 让我们做这两个步骤

312
00:23:45,505 --> 00:23:49,835
返回到编辑器的 styles.css

313
00:23:49,835 --> 00:23:52,765
我要在这里加几个类

314
00:23:52,765 --> 00:23:58,030
你会发现我的 navbar 遮盖了部分 jumbotron

315
00:23:58,030 --> 00:23:59,590
为了避免这种情况,

316
00:23:59,590 --> 00:24:01,705
我要做的是对我的 body,

317
00:24:01,705 --> 00:24:06,110
我要给一个50px 的内边距

318
00:24:06,110 --> 00:24:11,505
在顶部, 这 50px 用来让导航栏覆盖

319
00:24:11,505 --> 00:24:14,580
无论何时你使用一个固定的顶部导航栏,

320
00:24:14,580 --> 00:24:17,580
这都是一个好主意给网页的 body 添加内边距

321
00:24:17,580 --> 00:24:20,270
使导航不覆盖

322
00:24:20,270 --> 00:24:24,435
网页正文中最顶端的元素

323
00:24:24,435 --> 00:24:29,675
剩下的我要设置为

324
00:24:29,675 --> 00:24:39,155
0px, 并将 z-index 设置为 0

325
00:24:39,155 --> 00:24:43,485
从你对 CSS 的了解, 你知道 z-index 是做什么的

326
00:24:43,485 --> 00:24:48,865
下一个我要做的是,

327
00:24:48,865 --> 00:24:55,580
通过增加一个新的颜色来重载 navbar-dark 类

328
00:24:55,580 --> 00:24:59,750
我要选择的颜色是

329
00:24:59,750 --> 00:25:06,490
512DA8

330
00:25:06,490 --> 00:25:15,275
这是一个深紫色, 在我的网站看起来很好

331
00:25:15,275 --> 00:25:21,505
事实上, 如果你有兴趣我在哪里发现这种颜色, 你可以访问

332
00:25:21,505 --> 00:25:29,665
www.android.com, 然后查找他们的材料设计的文档, 那里,

333
00:25:29,665 --> 00:25:33,325
他们对颜色如何使用有一些建议

334
00:25:33,325 --> 00:25:38,965
它针对的是安卓应用程序, 但同样适用于网站,

335
00:25:38,965 --> 00:25:46,675
所以这是我去哪里选择的这些颜色在我的网站上使用

336
00:25:46,675 --> 00:25:51,060
所以, 应用这个, 现在当我这样做时,

337
00:25:51,060 --> 00:25:55,740
我得回到我的主页去, 并

338
00:25:55,740 --> 00:26:01,095
从 navbar 移除 bg-primary

339
00:26:01,095 --> 00:26:09,320
否则, 我在 CSS 中建议的颜色将不会应用于此

340
00:26:09,320 --> 00:26:14,185
同样, 转到 aboutus.html 页面, 然后滚动到

341
00:26:14,185 --> 00:26:20,850
navbar 并移除 bg-primary

342
00:26:21,610 --> 00:26:26,580
现在, 当我在aboutus.html 页面,

343
00:26:26,580 --> 00:26:34,080
让我给我的 container 引入一个面包屑导航,

344
00:26:34,080 --> 00:26:36,310
我的 container 的第一行

345
00:26:36,310 --> 00:26:39,405
这是 About Us 标题之所在

346
00:26:39,405 --> 00:26:45,120
所以我要引入一个 <ol>

347
00:26:45,260 --> 00:26:53,560
我只是用 <ol> 标签作为介绍面包屑导航的一种方法

348
00:26:53,560 --> 00:26:59,025
你甚至可以使用一个 <div>, 它还是会正常工作的

349
00:26:59,025 --> 00:27:06,050
只是碰巧 bootstrap 文档中的例子使用了 <ol>, 所以

350
00:27:06,050 --> 00:27:14,030
我坚持使用<ol>, 纵使一个简单的 <div> 也可以工作得很好

351
00:27:14,030 --> 00:27:20,895
我将 ol 设置为 class=“col-12 breadcrumb”

352
00:27:20,895 --> 00:27:23,200
所以 breadcrumb 类被应用,

353
00:27:23,200 --> 00:27:26,825
注意 col-12 是指填满整个屏幕

354
00:27:26,825 --> 00:27:33,500
在里面, 我要添加两个列表项

355
00:27:34,250 --> 00:27:39,625
现在你知道为什么使用 <ol> 在这里较为有用了,

356
00:27:39,625 --> 00:27:48,565
因为我可以使用列表项来描述 breadcrumb-item

357
00:27:48,565 --> 00:27:50,725
这里添加一个 breadcrumb-item

358
00:27:50,725 --> 00:27:55,020
所以我添加了一个 breadcrumb-item, 在那里我将使用

359
00:27:55,020 --> 00:28:02,380
<a> 标签, 用于定义回到我的主页的链接

360
00:28:02,380 --> 00:28:07,275
所以我写下 <a> 然后对于它

361
00:28:07,275 --> 00:28:12,010
我设置 href="index.html", 将它

362
00:28:12,010 --> 00:28:17,815
包括在我的第一个 breadcrumb 中, 然后在这之后,

363
00:28:17,815 --> 00:28:25,660
我要添加的下一项是另一个列表项目

364
00:28:25,660 --> 00:28:34,700
我会设置 class="breadcrumb-item active"

365
00:28:34,700 --> 00:28:40,900
注意这里使用的 active 类, 然后在里面, 我会输入 "About

366
00:28:40,900 --> 00:28:45,090
Us“, 我不需要链接, 因为我已经在这个页面上了

367
00:28:45,090 --> 00:28:49,425
因此, 对于这个列表项, 不需要包含链接

368
00:28:49,425 --> 00:28:51,010
让我们保存更改,

369
00:28:51,010 --> 00:28:54,910
你可以看到 breadcrumb 是如何被引入到

370
00:28:54,910 --> 00:28:59,555
About Us 页面中

371
00:28:59,555 --> 00:29:04,410
让我们去看看网页结果

372
00:29:04,410 --> 00:29:11,320
去到我的网页, 你现在可以看到, navbar 的颜色有所改变,

373
00:29:11,320 --> 00:29:14,310
现在变成了深紫色, 这是由

374
00:29:14,310 --> 00:29:17,900
更改 CSS 所致, 看起来很不错

375
00:29:17,900 --> 00:29:20,780
深紫色, 其次是一个淡紫色, 然后在

376
00:29:20,780 --> 00:29:24,300
底部页脚是更浅的紫色

377
00:29:24,300 --> 00:29:27,240
嗯, 我不是设计师,

378
00:29:27,240 --> 00:29:33,875
但这是我可以想出的最好的方案, 就添加网站颜色而言

379
00:29:33,875 --> 00:29:38,660
你从历史上可以知道, 男人是色盲的

380
00:29:38,660 --> 00:29:42,750
所以我们对颜色的品味很差

381
00:29:42,750 --> 00:29:48,065
如果你结婚了, 你妻子一定会提醒你的

382
00:29:48,065 --> 00:29:52,680
让我们转到 About 页面, 看看它长什么样

383
00:29:52,680 --> 00:29:55,960
所以这是 About 页面, 在当前页面你可以

384
00:29:55,960 --> 00:29:59,520
看见使用了正确颜色的导航栏

385
00:29:59,520 --> 00:30:06,925
并且 Breadcrumb 也包括在了页面内

386
00:30:06,925 --> 00:30:10,910
你可以看到 Home 会引导你返回到主页,

387
00:30:10,910 --> 00:30:15,020
然后 About Us, 你可以看到我们对它应用了 active 链接,

388
00:30:15,020 --> 00:30:16,655
active 类

389
00:30:16,655 --> 00:30:19,500
这就是我们如何显示 About Us 和主页的方式

390
00:30:19,500 --> 00:30:23,770
所以这是使用默认的 Bootstrap Breadcrumb 样式,

391
00:30:23,770 --> 00:30:29,450
如果我点击主页, 我会回到我的主页

392
00:30:29,450 --> 00:30:35,585
至此我们完成了这个 Navbar 和 Breadcrumbs 的训练

393
00:30:35,585 --> 00:30:42,640
这对你来说是一个好时机
来进行一个 git commit, 信息为 "Navbar and Breadcumbs"