导航栏
在第四章中，我们第一次尝试使用 Bootstrap 的导航栏。我们只是复制并粘贴了模板。在本文中，我们将学习如何使用导航栏。让我们首先解释一下我们上次使用的模板的代码。
公司的图标
首先，让我们看一下上面的代码。这个“navbar-brand”Clss在编写徽标和站点名称等部分时使用。如果只想输入字母的站点名称，重写文本部分“Navbar”就可以了。如果要使用图像，请在文本部分“导航栏”中写入“img”标签。
图片+文字的情况下，在“img”类中设置如下CSS的Class，将文字写在“img”标签后。
菜单
您要在导航栏中设置的菜单将放在以下部分。下面的代码是一个菜单。基本上，根据菜单的数量增加或减少以下部分。在“#”部分输入转换目标 URL，在文本部分输入菜单名称。
下拉菜单
现在让我们看看下拉部分。首先，如果你想使用下拉菜单，
连同标签的“nav-item”类，编写“dropdown”类（下面突出显示）。
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>让我们来看看创建下拉菜单时需要了解的内容。第一步是，创建菜单名称中始终可见的部分【Dropdown】。将其写在下面的链接标签中。保持此链接标记的目标 URL 不变。
第二步，是下拉菜单部分。如果不需要，请删除分区的一部分。另外，请根据菜单的数量增加或减少“dropdown-item”类的链接标签。
导航栏配色方案
查看导航栏模板的第一行。这段代码中有一个名为“navbar-light”或“navbar-dark”的 CSS 类。这是指定导航栏模板类型的部分。导航栏模板有两种，要根据导航栏背景色的亮度来使用。这是因为根据背景颜色，菜单等的文本颜色可能难以看清。
这个背景颜色可以更改为 Bootstrap 提供的其他配色方案或任何配色方案。因此，请使用与您的背景颜色相匹配的导航栏模板。
改变背景颜色
首先，让我们看一下 Bootstrap 提供的配色方案。以下颜色是部分的，在Bootstrap官网的“Utilities”项下的“Colors”中有所有颜色的列表。
这样，如果使用Bootstrap提供的配色方案，只需要改动部分模板代码即可。现在说一下你想把颜色改成任意颜色的情况。在这种情况下，您需要向模板添加代码。看看下面的图片。通过添加代码，您可以将其更改为任何颜色。
导航显示位置
如果没有指定任何内容，导航将固定在站点顶部，如下图所示。这意味着当您向下滚动到网站底部时，导航会消失。
如果你想把它固定在屏幕的顶部，使用 CSS 的Class的“fixed-top”。使用此Class将确保即使在滚动时导航也停留在屏幕顶部。
