使用 Bootstrap 打造令人印象深刻的电商页脚

电子商务网页的页脚或底部区域通常是购物者查找隐私政策、退货信息的地方。一个规划得当且组织有序的页脚有助于提升购物体验。

Bootstrap让构建美观且功能完善的电商页脚变得轻松，该框架利用HTML、CSS及有时使用的JavaScript提供一组类，使页面无需大量自定义样式表开发即可呈现良好外观。

Bootstrap 可与许多电子商务平台配合使用，例如 Shopify、Volusion、WooCommerce 和 LemonStand 的主题。

本文是我关于使用Bootstrap系列的第三部分，此前我已探讨了如何布局响应式商品详情页以及如何设计一个既固定位置又对移动设备响应的页面头部，这两篇文章均基于Bootstrap并为本文关于页面页脚的讨论奠定了基础。

要使用 Bootstrap，您需要将其添加到项目中。例如，这里有一个链接，可包含在页面的 head 部分中。

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

页面页脚的内容

关于网页页脚中应包含哪些内容，存在多种观点。对此话题的深入讨论足以再写一两篇文章。尽管如此，为了说明如何使用 Bootstrap 布局电子商务页面的页脚，我将介绍五个内容区块，它们分别是：

• 电子邮件订阅表单；
• 链接区块；
• 商店的地址；
• 用于突出显示页脚链接的页脚导航栏；
• 品牌与版权区块。

页脚结构

页面页脚将依赖 Bootstrap 的响应式、移动优先网格系统。该网格允许您在无需编写大量 CSS 的情况下布局页面元素。随着设备屏幕尺寸的增大，网格项最多可扩展至 12 列。

Bootstrap网格具有特定结构，在以下代码中，我将使用语义化的HTML5 footer标签来指定整个页脚区域，并在该页脚元素内包含一个带有container类的div，此类作为Bootstrap网格系统中的第一层级。

<footer class="navbar-default"> <div class="container"> ... </div><!-- end container --> </footer>

在容器内部，我们添加一个 row（行），这是 Bootstrap 网格中的下一层级。

bottom-rule 类引用了一个自定义 CSS 声明，该声明为元素底部添加浅灰色边框。Bootstrap 提供了丰富的类供使用，且不会妨碍我们根据需要自由使用自定义 CSS。

.bottom-rule { border-bottom: 1px solid lightgray; }

在此行内部，我将放置额外的div元素，每个元素占据Bootstrap网格中指定的列数。

我还可以为页脚添加顶部边框，以帮助将其与页面其余内容区分开来。

footer { padding-top: 20px; border-top: 10px solid #332e20; background-color: white; }

电子邮件订阅表单

页脚的第一部分将是电子邮件订阅表单，它将占用小型Bootstrap网格中的最多四列，网格大小和列数包含在一个单一的Bootstrap类col-sm-4中。

<div class="col-sm-4 footer-section"> ... </div>

footer-section类是一个自定义声明，用于添加底部边框和一些额外的内边距。

.footer-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid lightgray; }

当页脚在移动设备上显示时，我们希望电子邮件订阅表单与其下方的内容之间有清晰的间隔。这是因为在屏幕相对较小的移动设备上，列会垂直堆叠。因此，电子邮件表单将位于包含链接的下一节之上。

然而，我们不希望在屏幕宽度大于 768 像素的设备上出现底部规则线或额外的间距。在这些屏幕上，该行中的各个部分将水平排列，因此电子邮件表单将与链接部分并排显示。

为了管理这一行为，我们使用 CSS 媒体查询。

@media (min-width: 768px) { ... }

媒体查询内的 CSS 声明仅应用于屏幕宽度至少为 768 像素的设备。请注意，现在 footer-section 类不再添加间距或边框。

@media (min-width: 768px) { .footer-section { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } }

现在我们已经处理了该部分在不同尺寸设备上的布局方式，接下来让我们放置“连接”内容，我们可以使用一个简单的strong标签来强调该部分，而同样简单的p标签（段落）则容纳该部分的描述。

form-inline、form-group和form-control类来自Bootstrap，这些类将布局基本的电子邮件订阅表单，无需进一步的CSS工作，就是这么简单。

另外三个需要注意的类是：sr-only，它仅向屏幕阅读器显示关联元素；btn，它布局订阅按钮；以及btn-default，它为按钮应用背景、边框和字体颜色，再次强调，这些都是Bootstrap的标准配置，因此我们只需在项目中包含Bootstrap并在此处引用这些类即可。

这是一个布局，而不是一个功能完整的页面。因此目前我们就完成了。如果您将其与电子商务平台集成，则需要一些代码来捕获电子邮件地址并将其添加到您的列表中。

链接部分

在与我们的电子邮件表单相同的 Bootstrap 行中工作，让我们添加一个链接部分。该部分将在小型 Bootstrap 网格中占据五列。

请注意，该部分由三个无序列表（ul）组成，我们使用Bootstrap类list-inline来指定我们希望这些列表水平布局，其余工作由Bootstrap自动完成。

我们也可以稍微自定义这个 Bootstrap 类。下面的 CSS 声明在每个列表项的右侧添加浅灰色边框，但排除每个列表中的第一个和最后一个项目。

footer .list-inline li:not(:first-child):not(:last-child) { border-right: 1px solid lightgray; }

显示商店地址

此页脚行中的第三个部分显示商店的基本内容信息。

<div class="col-sm-3"> <address> <strong>Best Store</strong><br> 1000 Some Fantastic Place<br> San Francisco, CA 94103<br> <a href="#">Contact Us</a> </address> </div>

Bootstrap 具有用于该布局和地址的样式，因此上面的代码就是我们所需的全部。

页脚导航栏

在一个新的 Bootstrap 行内，我将为页脚添加一个导航栏。该导航栏将包含几个额外的链接。

<div class="row bottom-rule"> <div class="col-sm-12"> <nav class="navbar navbar-default navbar-footer"> <ul class="nav navbar-nav"> <li><a href="#">Customer Care</a></li> <li><a href="#">Summer Lookbook</a></li> <li><a href="#">Gift Cards</a></li> <li><a href="#">About Best Store</a></li> <li><a href="#">Careers</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">The Best Journal</a></li> </ul> </nav> </div> </div><!-- end row -->

上面的代码很好地展示了 Bootstrap 能为你的页面带来什么效果。其中包含基本的 HTML 结构，并辅以多个类进行样式修饰。

• row – 在Bootstrap网格中设置一行。
• bottom-rule – 一个用于添加底部边框的自定义（非Bootstrap）声明。
• col-sm-12 – 定义此部分在 Bootstrap 网格系统中占据的列数。
• navbar、navbar-default、nav和navbar-nav – Bootstrap类，描述了导航栏应有的外观及其定位方式。
• navbar-footer——这是另一个自定义（非 Bootstrap）的 CSS 声明，也是我们需要关注的唯一新类。

首先，navbar-footer 类通过使用一个目标来修改 Bootstrap 导航栏的外观，我们可以为该目标分配自己的 CSS 声明。

.navbar-footer { background-color: inherit; border-radius: 0; border: none; }

当导航栏在 768 像素或更宽的屏幕上显示时，我们希望链接居中。这并非 Bootstrap 导航栏的标准行为，因此我们需要编写一些 CSS 声明来实现。

.navbar-footer { margin-bottom: 0; text-align: center; } footer .navbar .navbar-nav { display: inline-block; float: none; vertical-align: top; }

请注意，这些引用中的第一个指向 navbar-footer 类，而第二个则针对 navbar-nav 类。实际上，这些类移除了浮动效果，改变了链接的显示方式，并将链接居中。

版权信息的位置

页脚的最后一部分也是一个新的 Bootstrap 行。

<div class="row leg-room"> <div class="col-md-12 text-center"> <h1 class="text-uppercase">Best Store</h1> <p class="monospaced"> &copy;2016 Best Store Company Inc. <span class="text-uppercase">All Rights Reserved</span></p> </div> </div><!-- end row -->

在本节中有一些不熟悉的类，其中第一个是 leg-room。这个自定义类为节的底部添加了外边距和内边距。

.leg-room { margin-bottom: 20px; padding-bottom: 20px; }

text-center 类来自 Bootstrap，它完全如其名称所示那样起作用。text-uppercase 类也来自 Bootstrap。

monospaced 类是自定义的，它为受影响的文本设置字体族。

.monospaced { font-family: 'Ubuntu Mono', monospaced ; }

这只有在 Ubuntu Mono 字体可用时才有效。因此，让我们将其包含在文档头部中。

总结

本文演示了一种使用 Bootstrap 在电子商务网页上布局页脚的方法。

页脚依赖于 Bootstrap 网格系统以及少量自定义 CSS 声明。