44％的移动用户报告说浏览网页很困难。这可能会损害他们的访问者体验，并减少他们返回您的网站的机会。
为了避免这种情况，你可以创建一个很棒的导航标题引导。Bootstrap是一个开源的开发工具包，它提供了接口组件的模板，这样你就可以快速添加响应特性，丰富访问者在你的站点上的体验。虽然您需要熟悉HTML和CSS才能使用Bootstrap，但您不必从头开始构建站点。
导航栏是一个特别重要的功能，因为它允许访问者快速、轻松地找到网站上的重要页面，比如博客、产品页面、价格、联系信息和文档。这可以提高访问者浏览你网站的时间，从而提高你的页面浏览量和跳出率。
既然我们已经了解了导航条的好处，那么让我们来仔细看看它是什么，以及如何创建和编辑导航条。
引导4导航
Navbar.bootstrap的响应式导航标头。自从最早版本的Bootstrap版本为2.3.2开始是一个核心组件。可以在最新的Bootstrap版本4.4中找到导航栏的其他和更快的样式表。
请注意，这些在Bootstrap 4.0,4.2.1和4.3.1中是相同的样式表。因此，如果您已经安装了任何以前版本，则仍将应用以下信息。
如果您尚未安装任何版本的Bootstrap，则可以按照逐步说明引导CSS的终极指南然后继续在这篇文章的其余部分。
如何创建引导导航栏
注意：对于下面的演示，我将在我的页面上建立我的页面W3Schools在线代码编辑器。您可以单击任何源链接以查看示例后面的完整代码片段。
假设您不想在本地下载和主机主机4，以便您开始建立用于最新版本的Bootstrap CDN的官方入门模板。然后您将拥有一个基本的引导布局，如下所示：
如果这看起来光秃秃的，不要担心——这只是一个起点。要构建一个更复杂的web页面，您可以开始为这个HTML5 doctype添加基本接口组件(如导航栏)的代码。让我们来看看下面的过程。
假设你想添加一个标准的导航栏，其中包含主页、功能页面和价格页面的链接。您还需要使用适当的响应样式，以便导航栏内容在汉堡按钮在移动设备上，然后尽可能多地占据水平空间，以便在更大的屏幕上保持对齐。
在这种情况下，您将采用以下引导示例并将其复制并粘贴到HTML5 Doctype的
部分中。
< class = " navbar-brand " href = " # " >导航条< / >
< ul类= " navbar-nav " >
<李类= " nav-item活跃”>
< class = " nav-link " href = " # " >家<跨类= " sr-only " >(当前)< / span > < / >
李< / >
<李类= " nav-item " >
< class = " nav-link " href = " # " > < / >特性
李< / >
<李类= " nav-item " >
< class = " nav-link " href = " # " > < / >定价
李< / >
< / ul >
< / div >
以下是在桌面和小屏幕上的最终结果:
无论您选择添加到您的网站，此过程都会相同。现在让我们继续探索可用的不同风格。
bootstrap vavbar样式
下面我们将看看Bootstrap的NavBar的不同风格选项。这样，您可以选择最适合您网站品牌的风格。
引导导航条下拉
假设您希望在导航栏中包含大量页面。您可以列出三个最重要的，而不是列出它们，而不是在下拉菜单中包含其余三个。或者也许您希望包含一些动作项目，访问者可以像联系您，订阅您的博客，或注册您的时事通讯。raybetapp然后，您可以在下拉菜单中包含这些项目及其相应的网页。
为此，只需在.NAV链接后嵌套以下代码片段。
<李类= " nav-item拉" >
下拉菜单链接
< / div >
李< / >
在下面的例子中，我替换了占位符文本“Dropdown link”、“Action”、“Another Action”和“Something else here”。下面是最终的结果:
引导导航条的颜色
要更改导航栏的颜色方案，只需要更改第一行代码中提到的主题类和背景颜色实用程序的组合。
在第一个例子中，请参阅它说的导航杆 - 光BG-Light？这CSS类。navbar-light要求使用浅色背景色(而.navbar-dark要求使用深色背景色)。.bg-light设置导航栏为浅灰色。其他支持的背景颜色如下所示。
在下面的例子中，我选择了标有“info”的蓝色。下面是最终的结果:
Bootstrap透明导航栏
如果您更愿意将导航栏与背景颜色的颜色相同，那么您不必匹配颜色。相反，您可以使用.bg透明实用程序使您的导航栏透明。在下面的示例中，我使用十六进制颜色代码＃f7f7f7更改了整个网页的背景颜色并使导航栏透明。
Bootstrap Navbar崩溃
在上面的示例中，.navbar-toggler、.navbar-collapse和navbar-expand-lg类都被使用，以便导航栏内容在大断点(960px)的按钮后面折叠。你可以将.navbar-toggler和.navbar-collapse类与.navbar-expand{-sm|-md|-lg|-xl}组合在一起，当按钮后面的内容折叠时进行更改。
假设我想让内容在540px折叠，而不是960px。然后我将“navbar-expand-lg”改为“navbar-expand-sm”在我的代码中，结果会像这样:
Bootstrap垂直导航栏
您可能需要您的网站上的垂直导航栏而不是有一个水平的导航栏。在这种情况下，您必须删除.navbar-toggler，.navbar-collapse和navbar-align-lg类。
结果将看起来像这样：
Bootstrap固定导航栏
默认情况下，导航栏(像任何HTML元素一样)默认定位为静态的。这意味着它们总是根据正常的页面流进行定位——正式称为文档对象模型(DOM)。
如果你想把导航栏设置成非静态的CSS的位置，然后您可以使用Bootstrap的位置实用程序。固定纳瓦尔使用位置：固定。它们跨越边缘到边缘，即使作为访问者滚动，也保持在同一个位置。您可以将NavBar修复到屏幕的顶部或底部。
下面，我通过在与.navbar-expand{-sm|-md|-lg|-xl}类相同的代码行中添加.navbar fixed-bottom将导航栏固定在屏幕底部。我还在正文中添加了一些虚拟文本，这样你就可以看到它如何保持在我滚动的相同位置。
值得注意的是，固定位置可能需要CSS填充防止与其他元素重叠。
bootstrap vavbar form.
您还可以使用.form-inline类添加导航栏中的搜索框。这样，访问者可以搜索整个网站以获取主题或特定关键字。
您只需将以下代码片段嵌套在.navbar-brand类下面。
<形式类= " form-inline " >
> < /形式
在下面的示例中，我想将绿色的按钮的颜色更改为灰色，看起来更好地看起来更好地看起来更好。为此，我用“BTN-Outline-Light”取代了“BTN-COUTLINE-COUNDER”。还有其他按钮颜色选项也可以从中选择。这是最终的结果:
改进引导站点的用户体验
通过在你的网站上添加上面提到的导航栏例子，你可以帮助你的访问者更快地找到他们想要的内容。这不仅会给他们提供更好的体验，也会增加他们更长时间浏览你网站的机会。
最初发布于2020年5月18日上午7:00:00，更新于2020年5月18日
话题：
引导和CSS< / div >
相关文章
