如何在Bootstrap中创建，编辑和制作Navbar

67% of mobile users如果他们对导航感到沮丧，将离开网站。这是您的移动受众中三分之二，因为您可以轻松解决竞争对手。

为了避免这种情况，您可以在Bootstrap。Bootstrap是一个开源CSS框架，可让您快速在网站上实现移动优先设计。虽然您需要熟悉htmlCSS要使用引导程序，您不必从头开始构建网站。

A navigation bar is a particularly important feature because it allows visitors to quickly find您网站上的重要页面，例如您的博客，产品页面，定价和联系信息。这可以提高访问者浏览您网站更长的机会。让我们仔细研究一下Bootstrap如何接近Navbars以及如何制作一个。

Bootstrap 4 Navbar

Navbaris Bootstrap’s responsive navigation header. Here are a few key things you should know about this component:

• Navbars are responsive andfluid默认情况下，意味着它们会根据当前视口的宽度扩展或收缩。
• Navbars需要包装.navbarwith.navbar-expand{-sm|-md|-lg|-xl}课程。这些类确定内容何时倒在按钮后面。
• 这

自Bootstrap最早版本（版本2.3.2）以来，Navbar一直是核心组件。Navbar的其他样式表可以在最新的Bootstrap版本中找到。

If you haven’t yet installed Bootstrap, you can follow step-by-step instructions inBootstrap CSS的最终指南然后继续这篇文章。

如何创建bootstrap navbar

假设您想添加一个标准的纳维托，其中包含指向主页，功能页面和定价页面的链接。您还想使用适当的响应式样式，以使您的Navbar内容崩溃了汉堡按钮在移动设备上，然后成长以占据尽可能多的水平空间，以保持在更大的屏幕尺寸上。

In that case, use the following Bootstrap code in you HTML:

See the Pen如何创建基本的bootstrap navbar -1由HubSpot（@hubspot） 在CodePen。

无论您选择添加到网站的哪个Bootstrap Navbar示例，此过程都是相同的。

Bootstrap Navbar Styles

接下来，我们将查看Bootstrap的Navbar的不同样式选项，因此您可以选择最适合您网站品牌的样式。

Bootstrap Navbar下拉

假设您想在Navbar中包含很多页面。您可以列出最重要的三个，然后在下拉菜单中列出所有最重要的三个，而不是全部列出它们。

Or, maybe you want to include some action items that visitors could take like contacting you, subscribing to your blog, or signing up for your newsletter. You could include those items and their corresponding webpages in the dropdown menu.

To do so, simply nest the following snippet of code after your .nav-links.

See the Pen如何创建基本的bootstrap navbar -2由HubSpot（@hubspot） 在CodePen。

在此处的示例中，我更换了占位符文本“下拉链接”，“动作”，“另一个动作”和“这里的其他操作”。

引导程序纳维栏颜色

To change the color of your navbar, you just have to change the combination of theming classes andbackground-color第一行代码中提到的实用程序。

在第一个示例中，看看它说的位置Navbar-Light BG-Light？这CSS class.navbar-light呼吁采用轻型背景颜色（而.navbar-dark需要深色背景色）。这.bg-lightsets the navbar as a light gray. The other supported background colors are shown below.

Image Source

在下面的示例中，我选择了标有“信息”的蓝色。这是最终结果的样子：

See the Pen如何创建基本的bootstrap navbar -3由HubSpot（@hubspot） 在CodePen。

Bootstrap Transparent Navbar

如果您希望您的Navbar与背景颜色具有相同的颜色，那么您就不必匹配颜色。

相反，您可以使用.bg-transparent公用事业。在下面的示例中，我使用十六进制颜色代码＃EAF0F6更改了整个网页的背景颜色，并使Navbar透明。

See the Pen如何创建基本的bootstrap navbar -4由HubSpot（@hubspot） 在CodePen。

Bootstrap Navbar Collapse

In the examples above, the classes.navbar-toggler,.Navbar-Collapse， 和Navbar-Expand-LGare all used so the navbar content collapses behind a button at the large breakpoint (960px).

你可以结合.navbar-toggler和.Navbar-Collapse与.navbar-expand{-sm|-md|-lg|-xl}当内容折叠在按钮后面时，要更改。

假设我希望内容以540px而不是960px崩溃。那我会改变Navbar-Expand-LGtoNAVBAR-EXPAND-SM在我的代码中，结果看起来像这样：

See the Pen如何创建基本的bootstrap navbar -5由HubSpot（@hubspot） 在CodePen。

Bootstrap Vertical Navbar

您可能需要在网站上使用垂直的Navbar，而不是具有水平的Navbar。在这种情况下，您必须删除.navbar-toggler,.Navbar-Collapse， 和Navbar-Expand-LG课程。

这result will look like this:

See the PenBootstrap Vertical Navbar由HubSpot（@hubspot） 在CodePen。

Bootstrap Fixed Navbar

默认情况下，Navbars（与任何HTML元素一样）默认情况下是静态定位的。这意味着它们始终根据页面的正常流量定位 - 正式称为文档对象模型（DOM）。

如果您想将Navbar放在非静态CSS位置，然后您可以使用Bootstrap的位置实用程序。固定的Navbars使用position: fixed。这y span the viewport from edge to edge and stay in the same place even as a visitor scrolls. You can fix your navbar to the top or bottom of the screen.

在下面，我通过添加将Navbar修复到屏幕的底部.navbar固定底在与代码相同的代码中.navbar-expand{-sm|-md|-lg|-xl}班级。我还在体内添加了一些虚拟文字，因此您可以看到它如何与滚动相同的位置保持。

See the PenBootstrap Fixed Navbar由HubSpot（@hubspot） 在CodePen。

重要的是要注意，固定的Navbar可能需要填充to prevent overlap with other elements.

Bootstrap Navbar Forms

您还可以使用Navbar中添加一个搜索框.forminline班级。这样，访问者可以搜索整个网站上的特定关键字。只需在下面嵌套以下代码段.navbar-brand班级。

In the example below, I wanted to change the color of the button from green to gray to look better with the navbar’s background color. To do so, I replaced “btn-outline-success” with “btn-outline-light.” There are other按钮颜色选项也可以选择。

See the PenBootstrap Navbar Forms由HubSpot（@hubspot） 在CodePen。

Customize Bootstrap Navbar

如果您想创建一个完全唯一的Navbar，则可以从上面的预设计模板之一开始，然后使用自定义CSS自定义它。

让我们看一个例子。假设我想将Navbar的背景颜色更改为自定义颜色，而不是使用Bootstrap提供的10个色彩实用程序中的任何一个。

在这种情况下，我将从HTML中删除任何颜色实用程序（例如“ BG-Light”）。然后，在我的CSS中，我会使用类选择器.navbar和set the background property to the shade of orange I wanted (#FF7A59).

这是CSS和结果：

See the PenCustomize Bootstrap Navbar with custom CSS由HubSpot（@hubspot） 在CodePen。

要了解有关自定义引导程序的更多信息，请查看如何编辑，自定义和覆盖Bootstrap CSS适合您的品牌。

定制的引导纳维尔斯的示例

Many developers and designers have created their own custom Bootstrap navbars and made them available for purchase or download. Let's check out a few examples.

Website Menu V01

网站菜单V01是一种透明的自举磁带，当用户开始滚动时，将变成固体白色。它具有多级下拉菜单以及社交媒体图标。

引导程序磁带，徽标上方以徽标为中心

上方以徽标为中心的徽标的引导程序是一个极简主义和现代的例子。该示例没有将Navbar品牌放下并在左侧，而是具有徽标，该徽标以页面上的和上方为中心。这些导航链接将在较小的屏幕尺寸上的切换按钮后面崩溃。

Simple Horizontal Bootstrap Navbar

简单的水平自举磁带是一个高级的纳维尔示例。它具有自定义的背景颜色，有点透明，蓝色底部边框。NAV项目是白色的，但是当用户徘徊在它们上时，将其变成相同的蓝色阴影。当用户徘徊在“按类别浏览”或“ Auctions浏览”时，也会出现菜单。

响应固定的动画纳维尔

响应固定的动画纳维尔is an animated navbar example. As the user scrolls, the navbar transitions from a transparent background to a solid black. It also shrinks in size.

Bootstrap Navbar Login Signup

Bootstrap Navbar Login Signup is an example of how you could incorporate login or sign-up buttons into your Bootstrap navbar. This example features a login dropdown menu. When users click on the dropdown menu, they'll be invited to login via Facebook, Twitter, email or to create an account.

在引导网站上改进UX

通过在网站上添加上面提到的任何NAVBAR示例，您可以帮助访问者找到他们想要更快的内容。这不仅可以为他们提供更好的体验 - 还将增加他们浏览您的网站更长的机会。

Editor's note: This post was originally published in May 2020 and has been updated for comprehensiveness.

编者注：该帖子最初发表于2021年6月，并已更新以进行全面性。