使用 Bootstrap 构建固定、响应式导航栏

Bootstrap 是一个用于创建响应式、移动优先网站的开源框架，甚至能帮助新手开发者。但许多新用户在使用固定导航栏（即导航页眉）时会遇到困难：在小屏幕上导航栏折叠后，无法将网站名称或徽标居中。

作为最流行的响应式网页开发框架之一，Bootstrap 被成千上万的网站采用，也可与大多数电商平台结合使用，例如构建 Shopify 或 WooCommerce 主题。

默认情况下，Bootstrap 导航栏将品牌标识置于左侧且滚动时不折叠。本文将介绍如何突破这些限制，实现徽标居中、导航栏固定定位以及小屏幕菜单折叠功能。

加载依赖项

此项目需要 Bootstrap CSS 文件、Bootstrap JavaScript 文件以及 jQuery（版本高于 1.1.9 且低于 3）。将 Bootstrap 包含在项目中有多种方法，最简单的方式是从 CDN 调用所需文件。若选择此方法，请将 Bootstrap CSS 文件放在 HTML 文件的 head 部分中。

<head> ... <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" > </head>

Bootstrap JavaScript 文件和 jQuery 应在 HTML 文档底部引用，位于关闭 body 标签之前。由于 Bootstrap 依赖于 jQuery，需先引入 jQuery。

<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous" ></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous" ></script> </body>

响应式 Bootstrap 导航栏

首要功能是实现导航栏的折叠与展开。思路很简单：在移动端显示时，将多个导航项合并到一个按钮下，即“汉堡菜单”。

触摸或点击汉堡菜单即可显示导航项。

当页面在更大屏幕（宽度超过 768 像素）上显示时，导航栏将展开以单独显示各个项目。

这一功能在 Bootstrap 文档中已有展示，但在撰写本文时并未被特别标识为“折叠式导航栏”，而是作为众多导航栏功能描述的一部分呈现。

该折叠式导航栏由包裹在 nav 元素和 Bootstrap 容器中的两部分组成。在 Bootstrap 中，这些包装器对样式属性具有特定含义。

<nav class="navbar navbar-inverse navbar-fixed-top”> <div class="container"> ... </div><!-- end container --> </nav>

我们为 nav 元素应用了三个 Bootstrap CSS 类：navbar、navbar-inverse 和 navbar-fixed-top。

navbar 告诉 Bootstrap 这是一个导航栏并应用相应样式；navbar-inverse 设置深色背景配浅色文字；navbar-fixed-top 则使导航栏固定在屏幕顶部，即使页面滚动也不变（稍后详述）。

可折叠导航栏的第一部分定义了汉堡菜单（三条水平线）并包含网站标识（本例为纯文本）。

大部分代码可直接复制用于各类项目。关键点在于按钮的 data-target 属性，它告知 Bootstrap JavaScript 要折叠的导航栏项目所在 div 的 ID。

以下是可折叠导航栏的第二部分：

<div class="collapse navbar-collapse" id="expand-nav"> <ul class="nav navbar-nav navbar-left"> <li><a href="#">Men</a></li> <li><a href="#">Women</a></li> <li><a href="#">Luggage</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Watches</a></li> <li><a href="#">Weapons</a></li> <li><a href="#">Home &amp; Camp</a></li> </ul> </div>

本节描述了实际的列表项。注意 div 的 id 属性需与前述按钮的 data-target 属性匹配。除 Bootstrap CSS 类外，这仅是一对简单列表。

每个无序列表（ul）都使用了 navbar-left 和 navbar-right 类，这将引导我们完成第二个目标：居中品牌文本或徽标。

在 Bootstrap 导航栏中居中品牌

在上述展开示例中，品牌 "Best Store" 显示在中间，两侧是链接。但若直接运行上一节代码，品牌实际会位于左侧。

要在 Bootstrap 导航栏中居中品牌，可使用媒体查询和少量 CSS。此 CSS 可置于 HTML 文档内的 style 元素中或外部样式表里。本例中以内联样式表形式展示：

<style> @media (min-width: 768px) { .navbar-brand { position: absolute; width: 100%; left: 0; top: 0; text-align: center; margin: auto; } } </style>

Bootstrap 使用媒体查询在满足特定条件的屏幕上应用样式。上述 CSS 仅应用于宽度至少为 768 像素的屏幕。

因此，当导航栏折叠时，品牌显示在左侧，汉堡菜单在右侧；而当导航栏展开时，品牌则居中显示。

在固定的 Bootstrap 导航栏上方放置消息

第三个功能已在上述示例中展示：Bootstrap 导航栏上方有一个包含免费送货优惠的小区域——“订单满 $200 免运费”。

这种导航前头部区域是目前流行的设计模式，但通常不适用于固定位置的 Bootstrap 导航栏，因为后者默认占据页面顶部。

要实现这一点，首先需在 Bootstrap 导航栏上方添加该头部区域：

<div class="nav-top"> <div class="container"> <div class="row"> <div class="col-xs-12"> <a href="#">Free Shipping on Orders Over $200</a> </div> </div> </div> </div>

container、row 和 col-xs-12 类属于 Bootstrap 网格系统，赋予头部特定的样式特征。nav-top 则是自定义类，用于引用此头部。以下是定位和装饰头部的样式：

.nav-top { width: 100%; height: 40px; background: #000; color: white; text-transform: uppercase; text-align: center; position: fixed; overflow: hidden; } .nav-top a { color: white; } .nav-top a:hover { text-decoration: underline; } .nav-top div.row { padding: 10px 0; }

注意，头部被设置为固定位置以保持页面顶部，水平填充整个屏幕，垂直占据 40 像素空间。

接下来，向 Bootstrap 导航栏添加一个类 head-room 和一个 ID general-nav：

<nav class="navbar navbar-inverse navbar-fixed-top head-room" id="general-nav">

该类允许在导航栏上方添加边距，为头部腾出空间：

.head-room { margin-top: 40px; }

至此，你将拥有一个固定在 Bootstrap 导航栏上方的页眉。

在此基础上增加动画效果：当用户向下滚动时，导航栏缓慢上移覆盖页眉，为用户留出更多空间专注于内容。这是当前流行的设计模式。

该效果由两部分组成。首先是 CSS 过渡效果：

.navbar-fixed-top { transition: all 3s ease; }

此样式表示：当具有 navbar-fixed-top 类的元素样式发生变化时，用三秒时间过渡到新样式。

第二部分是基于 jQuery 的 JavaScript 脚本。因依赖 jQuery 的选择器和方法，必须将其置于 HTML 文档中 jQuery 之后：

<script> $(window).scroll(function(){ if ( $(this).scrollTop() > 10 ){ $('.navbar-fixed-top').removeClass('head-room'); } else { $('.navbar-fixed-top').addClass('head-room'); } }); </script>

这段代码监听屏幕状态，当用户滚动时调用函数：

$(window).scroll(function(){ …}

若用户向下滚动至少 10 像素，脚本会从 Bootstrap 导航栏中移除 head-room 类（该类添加了 40 像素上边距），使导航栏定位在页面顶部：

if ( $(this).scrollTop() > 10 ){ $('.navbar-fixed-top').removeClass('head-room'); }

若屏幕距离顶部不足 10 像素，脚本则添加 head-room 类：

else { $('.navbar-fixed-top').addClass('head-room'); }

需注意潜在问题：固定的 Bootstrap 导航栏可能遮挡部分内容，请记得为其余内容添加额外顶部边距。

应用你的可折叠固定式 Bootstrap 导航栏

现在你已掌握如何创建可折叠、固定位置的 Bootstrap 导航栏，并在顶部预留页眉空间。

该导航栏可集成到几乎任何平台或主题中。无论为 Shopify、LemonStand、Bigcommerce 或其他电商系统创建主题，均可使用 Bootstrap。

如需更多信息，请参阅“使用 Bootstrap 创建响应式电子商务产品页面。”