如何创建，编辑，并使您的导航栏在引导中令人敬畏

44％的移动用户报告称，导航网页很困难。这可能会损害他们的访客体验并减少他们返回您的网站的机会。

要避免这种情况，您可以创建一个令人敬畏的导航标题引导。Bootstrap是一个开源开发工具包，为接口组件提供模板，因此您可以快速添加响应的功能，丰富您网站上的访客体验。虽然您需要熟悉HTML和CSS来使用Bootstrap，但您不必从头开始构建一个站点。

导航栏是一个特别重要的功能，因为它允许访问者在您的网站上快速且轻松地找到重要页面，如您的博客，产品页面，定价，联系信息和文档。这提高了访客浏览您网站的机会更长，这可以提高您的页面浏览和反弹率。

现在我们了解导航栏的好处，让我们仔细看看它是什么以及你如何创建和编辑一个。

bootstrap 4 navbar.

Navbar.bootstrap的响应式导航标头。自从最早版本的Bootstrap版本为2.3.2开始是一个核心组件。可以在最新的Bootstrap版本4.4中找到导航栏的其他和更快的样式表。

请注意，这些在Bootstrap 4.0,4.2.1和4.3.1中是相同的样式表。因此，如果您已经安装了任何以前版本，则仍将应用以下信息。

如果您尚未安装任何版本的Bootstrap，则可以按照逐步说明Bootstrap CSS的终极指南然后继续在这篇文章的其余部分。

如何创建Bootstrap导航栏

注意：对于下面的演示，我将在我的页面上建立我的页面W3Schools在线代码编辑器。您可以单击任何源链接以查看示例后面的完整代码片段。

假设您不想在本地下载和主机主机4，以便您开始建立用于最新版本的Bootstrap CDN的官方入门模板。然后您将拥有一个基本的引导布局，如下所示：

来源

如果这看起来裸露，不要担心 - 这只是一个起点。要构建一个更复杂的网页，可以开始向此HTML5 Doctype添加必要接口组件的代码，如导航栏。让我们走过这个过程。

假设您希望添加标准导航栏，其中包含主页，功能页面和定价页面。您还希望使用适当的响应样式，以便您的导航栏内容折叠后面汉堡包按钮在移动设备上，然后增长占据尽可能多的水平空间，以保持在较大的屏幕尺寸上。

在这种情况下，您将采用以下引导示例并将其复制并粘贴到HTML5 Doctype的部分中。

 navbar 
<按钮类=“navbar-toggler”类型=“按钮”数据 -  toggle =“折叠”数据 - 目标=“#avabbarnav”aria-controls =“navbarnav”aria-aldended =“false”aria-label =“切换导航“>
 
 home （current） 
 
 pricing 

以下是桌面和较小屏幕上的最终结果看起来像什么：

来源

无论您选择添加到您的网站，此过程都会相同。现在让我们继续探索可用的不同风格。

bootstrap vavbar样式

下面我们将看看Bootstrap的NavBar的不同风格选项。这样，您可以选择最适合您网站品牌的风格。

bootstrap vavbar下拉栏

假设您希望在导航栏中包含大量页面。您可以列出三个最重要的，而不是列出它们，而不是在下拉菜单中包含其余三个。或者也许您希望包含一些动作项目，访问者可以像联系您，订阅您的博客，或注册您的时事通讯。raybetapp然后，您可以在下拉菜单中包含这些项目及其相应的网页。

为此，只需在.NAV链接后嵌套以下代码片段。

下拉链接
操作
另一个动作
这里的其他东西

在下面的示例中，我替换了占位符文本“下拉链接”，“动作”，“另一个动作”和“这里的其他东西”。这是最终结果的样子：

来源

Bootstrap Navbar颜色

要更改导航栏的颜色方案，您只需要更改第一行代码中提到的主题类和背景实用程序的组合。

在第一个例子中，请参阅它说的导航杆 - 光BG-Light？这CSS类。Navbar.-Light呼吁浅色背景颜色（而.Navbar-暗呼叫黑暗的背景颜色）。.bg-light将导航栏设置为浅灰色。其他支持的背景颜色如下所示。

来源

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

来源

Bootstrap透明导航栏

如果您更愿意将导航栏与背景颜色的颜色相同，那么您不必匹配颜色。相反，您可以使用.bg透明实用程序使您的导航栏透明。在下面的示例中，我使用十六进制颜色代码＃f7f7f7更改了整个网页的背景颜色并使导航栏透明。

来源

Bootstrap Navbar崩溃

在上面的示例中，.Navbar-toggler，.Navbar-Collapse和Navbar-Advance-LG类都使用，因此导航栏内容在大断点（960px）的按钮后面折叠。您可以将.navbar-toggler和.navbar-togggler和.Navbar-unlast-and .navbar-excound {-sm | -md | -lg | -xl}组合在一起时更改。

假设我希望内容在540px下折叠，而不是960px。然后我将在我的代码中将“Navbar-expans-expand-lg”更改为“NavBar-expang-Sm”，结果如下所示：

来源

Bootstrap垂直导航栏

您可能需要您的网站上的垂直导航栏而不是有一个水平的导航栏。在这种情况下，您必须删除.navbar-toggler，.navbar-collapse和navbar-align-lg类。

结果将看起来像这样：

来源

Bootstrap固定导航栏

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

如果您想将导航栏放在非静态中CSS职位，然后您可以使用Bootstrap的位置实用程序。固定纳瓦尔使用位置：固定。它们跨越边缘到边缘，即使作为访问者滚动，也保持在同一个位置。您可以将NavBar修复到屏幕的顶部或底部。

下面，我通过在与.navbar-展开{-sm | -md | -lg | -xl}类的同一行代码中，将我的navbar固定在屏幕的底部。我还在身体中添加了一些虚拟文本，这样你就可以看到它在滚动时如何保持在同一个位置。

来源

值得注意的是，固定位置可能需要CSS填充防止与其他元素重叠。

bootstrap vavbar form.

您还可以使用.form-inline类添加导航栏中的搜索框。这样，访问者可以搜索整个网站以获取主题或特定关键字。

您只需嵌套以下代码段.Navbar品牌类。

<输入类=“form-control mr-sm-2”类型=“搜索”占位符=“搜索”aria-label =“search”>
<按钮类=“btn btn-compline-success my-2 my-sm-0”类型=“提交”>搜索

在下面的示例中，我想将绿色的按钮的颜色更改为灰色，看起来更好地看起来更好地看起来更好。为此，我用“BTN-Outline-Light”取代了“BTN-COUTLINE-COUNDER”。还有其他按钮颜色选项选择也可以选择。这是最终结果：

来源

在Bootstrap站点上改进UX

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

最初发布于5月18日，2020年7:00:00，Updated 5月18日2020年