我们刚刚完成了关于在你的网站上提供导航的重要性的讨论
我们还看了我们可以在一个网站提供导航的几种不同方式
现在是时候让我们看看 Bootstrap 及其组件
使我们可以添加导航到我们的网站
两个重要组件是 Navbar 和 Breadcrumbs
我们将在这一练习中对它们进行研究
首先让我们添加一个导航栏到我们的网页顶部
我们可以使用 Navbar 来完成
那么, 我们如何开始呢？
我们进入我们 HTML 页面的 body
这里, 我打开了 index.HTML
在顶部,
我要添加一个元素, 使用
的作用是提供导航
让我们利用这个标签, 并使用 建立我们的导航栏
所以现在, 在顶部,
我要添加这个标签,
加入, 并构造导航栏
一旦我们把这个 标签添加到 index.HTML
我们就可以继续将 bootstrap 类应用到这个 标签
所以我应用了 navbar 类
bootstrap 中的 navbar 类让我能够新建一个导航栏
自定义导航栏有许多不同的方法
我们将在其他课程中学习
连同 navbar,
我们还添加了另一个类, navbar-dark
我想要我的导航栏是暗色的
有一个较暗的背景
因为它与我刚刚设计的网站非常一致
我们可以使用 navbar-light
这是一个较亮颜色的导航栏
你可以选择在网页中使用其中任一项
我要使用的下一个类是 navbar-expand-sm 类
现在, 我也将指定屏幕大小
使我们能够切换界面
当我说 navbar-expand-sm
它意味着对于小型和额外小型的屏幕,
这个导航栏将成为一个可切换的导航栏
意味着它将在这些屏幕大小折叠
你很快就会知道这是如何工作的
当我们看我们如何可以添加
折叠插件到导航栏以触发这种行为
有了这一在小型屏幕可切换的导航栏
我要对导航栏应用一个初始的背景颜色
这是 bg-primary
bg-primary 是在 bootstrap 中定义的主颜色
默认情况下, 这是 bootstrap 使用的蓝色版本
我将在一开始使用它作为我的主颜色
稍后, 我将使用一些 CSS 类自定义我的导航栏颜色
此外, 我要应用
另一个类称为 fixed-top 到我的导航栏
fixed-top 的作用是将导航栏固定到
正在呈现此网页的浏览器窗口的顶部
即使当你滚动你的网页,
导航栏会一直保持在页面的顶端
您可以简单地使用 fix-bottom 来固定
导航栏到浏览器窗口的底部, 或者你可以说, 静态顶部
你也可以不使用这个类
如果你不使用它,
那么, 当网页向上滚动时, 导航栏也会滚动
在我的网站, 我选择保持导航栏固定在页面的顶端
还有许多其他选项可用,
您可以在 bootstrap 文档中找到
这是一个使用导航栏的例子
现在, 在导航栏内,
我要附上任何
将在 container 内的导航栏中使用的内容
因此, 我将在这里使用 div 元素
并将 container 类应用于此 div 元素
所以不管里面是什么,
将被限制为与我的网页其余部分相同的宽度
正如你所记得的, 我用 container 类来
定义网页中内容的广度
所以我要对我的导航栏做同样的操作
这样, 我的导航栏信息将
与我网页的其余部分有相同的宽度
您可以选择不在导航栏中使用 container 类, 在这种情况下,
导航栏的内容将扩展到屏幕的整个宽度
在导航栏内,
我要在这里添加一个类到一个 标签
这个类, 我称之为 navbar-brand,
允许我在导航栏中显示一些信息作为品牌信息
例如如果你有一个公司,
你可以使用 navbar-brand 显示
公司名称或公司商标
它将突出显示在你的导航栏
很明显, 当你访问很多网站时,
你将看到公司的名称在
该网站的导航栏某处可见
所以, 让我加入 navbar-brand
它也可以链接到你的网站主页
所以, 我要把它留在那里
在我网站的其余页面上,
我只会添加链接使我回到 index.HTML
即主页
在这里, 我要添加我的餐厅名称
让我们保存改动, 去
快速查看我的导航栏的当前状态
在浏览器中进入网页
现在, 你可以在浏览器中看到导航栏在我的网页上可见
导航栏现在位于页面的顶部, 你
可以看到, 当我滚动我的页面,
导航栏仍然保持在顶部, 因为我使用了 fixed-top 类
你还可以看到
navbar-brand 允许我展示餐厅的名字
稍后我会用这个餐厅的商标替换它
你会发现导航栏部分被 jumbotron 覆盖
稍后, 你将使用一些自定义 CSS 来修复该问题
接下来, 我要做的是添加一些链接到我的导航栏,
这些链接将引导我到我的网站上的其他网页
所以我们如何做到那些呢?
回到 index.html
我要在这里添加一个 ,
在其中我要声明
所有将在我的导航栏中显示的链接
我将要对这个设置 class="navbar-nav"
这个类将帮助我定义
将包括在我的导航栏中的链接集合
这些链接将在我的导航栏中水平显示
我也设置了 mr-auto 类
用于指定右边距
这是一个实用程序类, 由
bootstrap 提供, 它允许我指定右边距
所以如果我说, mr-auto
它的意思是在右边,
应该尽可能多地设置右边距
这意味着导航栏中的内容将被推向
越左边越好
在这个无序列表中,
我可以使用列表元素包括
将成为我的导航栏一部分的各种链接
所以我要添加一些链接在那里
我将开始指定第一个链接
对于导航栏中的每个列表项,
你要设置 class="nav-item"
这允许这些列表项水平显示为导航栏中的链接
然后在这里,
我可以使用 标签添加
将成为我的导航栏一部分的实际链接
所以里面我使用 标签
class="nav-link", 这也允许我使用 href
属性定义链接
第一个我要包括的是 Home
这将在这个导航栏中包括一个名为 Home 的项目
让我把它复制, 然后粘贴
然后, 我们将编辑其中的一些, 因为我想添加
四个不同的项目到我的导航栏
第一个是 Home
第二个是 About
第三个是 Menu, 我将在下一个课程构建
最后一个是 Contact
一个典型的公司网站将在其导航栏中有这样的链接
加上这两个,
现在我能做的是
我们可以将其中一个链接显式标识为活动链接,
意思是当你在那个特定的页面上时,
可以突出显示该链接
要做到这一点, 我们将在这里对这些列表项之一应用称为 active 的类
在这种情况下, 因为这是 index.html 页,
我将应用 active 类到 home 链接
这几乎完成了我在 index.html 页的导航栏
我想解决的一个小问题是 About 链接,
我想把它与 aboutus.HTML 联系起来
这是我们先前已经包括在我们的网站的一个页面
因为那是我希望它链接到的地方
让我们去快速看看我们的导航栏这一部分
回到我们的导航栏,
您可以即刻看到将
这些项目放入无序列表中的结果
你在这里看到了 Home,
About, Menu 和 Contact
每个都是一个链接, 但也是一个导航项目
并且注意到由于使用了 active 类, 这里的 Home 是突出显示的
所以, 如果我点击 About,
它应该带我去 About 页面
瞧, 我们到了
但我确实意识到了我没有办法回去,
因此, 这意味着我也需要把这个导航栏加入 aboutus.html 页面
我们一会儿就来修改
现在, 我要用 "后退" 按钮快速
返回到 index.html 页
我还想向你展示的一件事是
这个导航栏是如何在小型和额外的小屏幕尺寸上折叠的
所以, 让我们使用响应视图打开视图,
让我选择 Galaxy S5
我注意到当我像这样使用 Galaxy S5,
您可以看到, 由于它优先显示，它已经覆盖了屏幕
这不是我想要的行为
我希望在小屏幕上能够隐藏它
也许我可以添加一个按钮在这里, 我可以使用
打开和关闭这些链接的显示
你在移动网站上看到过这样的东西
我们如何在 bootstrap 中进行这样的操作呢？
让我们进入下一步
回到我们的导航栏
让我在那里添加一个按钮,
它将作为从我的导航栏显示和隐藏我的链接的切换按钮,
当它显示在小屏幕上时
要加在那里,
让我添加一个按钮, 并将一些类应用到这个按钮
在下一课中, 我们将讨论有关按钮的更多信息
但要在 bootstrap 中添加按钮,
你要对它应用 navbar-toggler 类
所以, 这是一个 navbar-toggler
顾名思义,
你已经开始了解此按钮将做什么
然后, 我会添加类型为按钮, 以表明这是作为一个按钮
然后 data-toggle="collapse"
data-toggle 这个属性实际上是
一个 Bootstrap JavaScript 组件
我们将在下一个模块中更多地查看 data- 类型
当我们学习 bootstrap JavaScript 组件时
导航栏要求其中一个 JavaScript 组件能够
打开和关闭我的导航栏中的链接, 所以,
这就是为什么我在这里快速介绍这个概念的原因,
但我们会在下一个模块中回来检查
这一 bootstrap JavaScript 组件
data-toggle=“collapse“
然后 data-target=“#Navbar”
现在, 我将引入另一个带有 id=“Navbar” 的 div
所以, 当我指定一个数据或目标 #Navbar,
它指向的是那个元素的 id, 这将是
此特定按钮的目标
所以, 这是我添加到按钮的部分
另外, 我希望按钮显示一些东西
通常, 当您在移动网站中看到这些按钮时,
它将包含横线,
通常被称为 navbar-toggler 图标
所以, 我要使用一个特殊的图标,
称为 navbar-toggler-icon
因此, 如果我将此类应用于 标签,
这将引入一个 navbar-toggler-icon 到我的按钮这里
这样就引入了一个按钮
我们一会儿就来看看它是什么样的
现在, 当我单击此按钮时,
我希望能够显示和隐藏这些链接
为了让我能够这样做,
我要将这个 包含在一个 里
我要引入一个包围这个
而对于这个 ,
我会设置 class="collapse"
然后是 "navbar-collapse", 接着我给它一个 id 为 Navbar
现在, 你开始看到这些类和 id 之间的相关性,
以及我在 data-toggle 和data-target中声明的内容
所以这里的 data-target 我设置为 #Navbar, 而给这个 的 id 是 Navbar
我指定 data-toggle="collapse"
collapse 是一个 bootstrap JavaScript 组件,
我们将在下一模块中更详细地研究
因此, 在 中包括这些, 在小和额外小的屏幕,
默认情况下这将被隐藏,
但当我点击按钮,
此 的内容将显示在屏幕上
让我也向 添加一个 mr-auto 类
因而给 navbar-brand 引入了足够的右边距
现在, 让我们来看看在我们浏览器中的样子
去到浏览器, 你现在可以看到
我的 navbar 在小和额外小的屏幕尺寸上是折叠的
并注意左边的这个按钮
当我点击按钮,
导航栏中的链接将显示或隐藏
这是我想我的导航栏实现的响应行为
如果我切换到正常,
较大的屏幕, 导航栏完全显示包括链接
但是当我在这样一个较小的屏幕上查看相同的东西时,
导航栏链接就会隐藏在此按钮后面
然后将通过单击该按钮来切换开关
所以, 这是你可以在你的网站上
建立的响应式的导航栏
现在, 我们已经完成了 index.html 上的导航栏,
我希望能够引入相同的导航栏到 aboutus.html 页面
在那之前, 让我们看到这里的页脚,
你会注意到在页脚中,
我们有这些链接
我想能够更新这个链接也指向
aboutus.html, 以便即使通过单击我的页脚中的链接,
我也仍然能到 About 页面
现在, 回到这里,
我要做的只是从这里复制这个导航栏的代码
然后将它粘入 aboutus.html
不仅仅是如此, 我需要对此做一些调整,
因为现在这是在 aboutus.html 页面
很明显, 有几样东西我需要更新
首先, 这个 navbar-brand 应该带我回到
我的主页, 应该更新为 index.html
然后, 列表项里的 Home 项,
我想更新为 index.html 然后 About 项,
因为这是 aboutus.html,
我要把它改回 #, 然后我会移去
第一个项目中的 active 类, 然后将 active 类应用于第二个项目,
因为这是 About 页面, 所以应该突出显示它
再次, 前往 About 页面的页脚。
在页脚中, 我会对这里的链接做相同的更新, 所以
Home 应该带我们回到 index.html, 让我保存更改
所以, 现在我的 About 页面也被正确更新
回到浏览器中,
你现在可以看到, 我在我的主页上, 当我点击 About 页面,
我会进入 About 页面
注意到 About 页面显示相同的导航栏,
About 被高亮, 因为我
应用了 active 类, 然后我可以
回到我的主页, 要么点击 navbar-brand 要么点击 Home
让我们点击 navbar-brand, 现在我们回到了
我们的主页
因此, 现在在主页和 About 页面中都正确设置了导航
我要做的另一些事是应用一些 CSS
类, 从而我能够改变导航栏的颜色
此外, 我想给 About 页面添加
一个面包屑导航, 它也能够给我另一种方式
导航回我的主页, 也将表明
网站的层次结构, 我现在在那里
接下来, 让我们做这两个步骤
返回到编辑器的 styles.css
我要在这里加几个类
你会发现我的 navbar 遮盖了部分 jumbotron
为了避免这种情况,
我要做的是对我的 body,
我要给一个50px 的内边距
在顶部, 这 50px 用来让导航栏覆盖
无论何时你使用一个固定的顶部导航栏,
这都是一个好主意给网页的 body 添加内边距
使导航不覆盖
网页正文中最顶端的元素
剩下的我要设置为
0px, 并将 z-index 设置为 0
从你对 CSS 的了解, 你知道 z-index 是做什么的
下一个我要做的是,
通过增加一个新的颜色来重载 navbar-dark 类
我要选择的颜色是
512DA8
这是一个深紫色, 在我的网站看起来很好
事实上, 如果你有兴趣我在哪里发现这种颜色, 你可以访问
www.android.com, 然后查找他们的材料设计的文档, 那里,
他们对颜色如何使用有一些建议
它针对的是安卓应用程序, 但同样适用于网站,
所以这是我去哪里选择的这些颜色在我的网站上使用
所以, 应用这个, 现在当我这样做时,
我得回到我的主页去, 并
从 navbar 移除 bg-primary
否则, 我在 CSS 中建议的颜色将不会应用于此
同样, 转到 aboutus.html 页面, 然后滚动到
navbar 并移除 bg-primary
现在, 当我在aboutus.html 页面,
让我给我的 container 引入一个面包屑导航,
我的 container 的第一行
这是 About Us 标题之所在
所以我要引入一个
我只是用 标签作为介绍面包屑导航的一种方法
你甚至可以使用一个 , 它还是会正常工作的
只是碰巧 bootstrap 文档中的例子使用了 , 所以
我坚持使用, 纵使一个简单的 也可以工作得很好
我将 ol 设置为 class=“col-12 breadcrumb”
所以 breadcrumb 类被应用,
注意 col-12 是指填满整个屏幕
在里面, 我要添加两个列表项
现在你知道为什么使用 在这里较为有用了,
因为我可以使用列表项来描述 breadcrumb-item
这里添加一个 breadcrumb-item
所以我添加了一个 breadcrumb-item, 在那里我将使用
标签, 用于定义回到我的主页的链接
所以我写下 然后对于它
我设置 href="index.html", 将它
包括在我的第一个 breadcrumb 中, 然后在这之后,
我要添加的下一项是另一个列表项目
我会设置 class="breadcrumb-item active"
注意这里使用的 active 类, 然后在里面, 我会输入 "About
Us“, 我不需要链接, 因为我已经在这个页面上了
因此, 对于这个列表项, 不需要包含链接
让我们保存更改,
你可以看到 breadcrumb 是如何被引入到
About Us 页面中
让我们去看看网页结果
去到我的网页, 你现在可以看到, navbar 的颜色有所改变,
现在变成了深紫色, 这是由
更改 CSS 所致, 看起来很不错
深紫色, 其次是一个淡紫色, 然后在
底部页脚是更浅的紫色
嗯, 我不是设计师,
但这是我可以想出的最好的方案, 就添加网站颜色而言
你从历史上可以知道, 男人是色盲的
所以我们对颜色的品味很差
如果你结婚了, 你妻子一定会提醒你的
让我们转到 About 页面, 看看它长什么样
所以这是 About 页面, 在当前页面你可以
看见使用了正确颜色的导航栏
并且 Breadcrumb 也包括在了页面内
你可以看到 Home 会引导你返回到主页,
然后 About Us, 你可以看到我们对它应用了 active 链接,
active 类
这就是我们如何显示 About Us 和主页的方式
所以这是使用默认的 Bootstrap Breadcrumb 样式,
如果我点击主页, 我会回到我的主页
至此我们完成了这个 Navbar 和 Breadcrumbs 的训练
这对你来说是一个好时机 来进行一个 git commit, 信息为 "Navbar and Breadcumbs"