使用 Bootstrap 创建响应式电商产品页面- 大数跨境

首页

使用 Bootstrap 创建响应式电商产品页面

电商实践

2016-04-11

导读：Bootstrap 框架让响应式电商产品详情页的布局变得轻松。小型企业主甚至新手网站设计师都可以使用

Bootstrap 是一个流行的 HTML、CSS 和 JavaScript 框架，是构建响应式电子商务产品详情页的利器。它让页面开发变得轻松，即便是小型企业主或新手设计师也能打造专业外观。

作为最流行的响应式网页开发框架之一，Bootstrap 被成千上万的网站采用，并能与 Shopify、LemonStand 和 WooCommerce 等主流电商平台无缝结合。本文将详细介绍如何利用 Bootstrap 布局电商产品详情页，涵盖网格系统、内置类、选项卡导航以及自定义 CSS 的融合应用。

引入 Bootstrap 十分便捷，只需在 HTML 文档的 head 部分添加链接即可：

同时，通过 CDN 引用 jQuery 和 Bootstrap JS 文件（置于 body 关闭标签前）：

从 Bootstrap 基于网格的布局开始

易用性是 Bootstrap 的核心优势，其移动优先的响应式网格系统几乎能满足所有项目需求。该网格允许在不编写大量自定义 CSS 的情况下布局页面，随着设备尺寸增大，网格项最多可流动至 12 列。

每个 Bootstrap 网格都包裹在带有“container”类（固定宽度）或“container-fluid”类（全宽布局）的元素中：

容器内放置带有“row”类的行元素（通常为 div 或 section）：

行内包含一个或多个列元素。Bootstrap 提供超小（xs）、小（sm）、中等（md）和大（lg）四种断点选项。本例使用中等网格（md）：

需注意，Bootstrap 默认针对智能手机设计，通过媒体查询适配更大屏幕。

将 Bootstrap 网格应用于产品详情页

产品部分由两半组成，每半占据可用 12 列中的六列。

产品详情页分为两半，分别对应产品图片和产品信息，各占六列宽度：

<div class="container" id="product-section"> <div class="row"> <div class="col-md-6"> … [this is the product image] </div> <div class="col-md-6"> …[this is the product information] </div> </div> </div>

使用 md 网格时，屏幕宽度小于 992px 两部分将占满全宽；大于等于 992px 则平分空间。

产品图片代码如下（位于 row 和 container 内部）：

“image-responsive”类会将图像最大宽度设为父元素宽度，使其随屏幕和布局自适应调整。

嵌套网格

Bootstrap 支持网格嵌套，即在网格内放置另一个网格。利用此特性可管理产品信息区域，需额外添加 row 元素。

例如产品标题代码：

<div class="col-md-6"> <div class="row"> <div class="col-md-12"> <h1>Kodak 'Brownie' Flash B Camera</h1> </div> </div>

第一个 div 表示与图像共享行的六列。在其内部添加新行，拥有全新的 12 列结构：

Bootstrap 网格支持嵌套。在本例中，包括产品名称在内的产品信息部分使用了嵌套网格。

行内的 div 占据全部 12 列，内部 h1 元素显示产品名称：

<div class="col-md-12"> <h1>Kodak 'Brownie' Flash B Camera</h1> </div>

下一段包含“Vintage”标签和 SKU 编号，同样使用新的 Bootstrap 行布局：

<div class="row"> <div class="col-md-12"> <span class="label label-primary">Vintage</span> <span class="monospaced">No. 1960140180</span> </div> </div>

“label”和“label-primary”为 Bootstrap 内置类。“monospaced”类展示了混合自定义 CSS 的便捷性，此处指定了 Ubuntu Mono 字体。

引入 Google Fonts 字体需在 head 添加 link：

创建应用字体的类（外部或内部样式表均可）：

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

简短描述区块也是嵌套行：

<div class="row"> <div class="col-md-12"> <p class="description"> Classic film camera. Uses 620 roll film. Has a 2¼ x 3¼ inch image size. </p> </div> </div>

评论部分结合了 glyphicons 和屏幕阅读器辅助功能：

<div class="row"> <div class="col-md-3"> <span class="sr-only">Four out of Five Stars</span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span> <span class="label label-success">61</span> </div> <div class="col-md-3"> <span class="monospaced">Write a Review</span> </div> </div>

“sr-only”类使文本仅在屏幕阅读器中朗读，视觉上隐藏，提升无障碍访问体验：

<span class="sr-only">Four out of Five Stars</span>

后续五个 span 代表 glyphicon 图标，用于视觉展示评分但对屏幕阅读器隐藏：

评论评级中的星号是 Bootstrap 的 glyphicons。

Bootstrap 提供 295 个 Glyphicon 图标供项目使用。关键在于每个部分都是嵌套网格的一部分，共同布局产品信息区。

整合价格及订购信息的代码如下：

ottom-rule">

$129.00

In Stock

Add to Shopping List

To order by telephone, please call for details.

代码中持续使用嵌套行并混合 Bootstrap 与自定义 CSS。例如数量区域的加号按钮：

“btn”、“btn-default”和“btn-lg”属 Bootstrap 类，分别定义按钮样式、颜色和大小；“btn-qty”为自定义类，确保三个数量按钮尺寸一致：

.add-to-cart .btn-qty { width: 52px; height: 46px; }

配合以下 CSS 移除 Bootstrap 默认圆角：

.add-to-cart .btn { border-radius: 0; }

“In Stock”和“Add to Shopping List”所在行还使用了实用类：

<div class="row"> <div class="col-md-4 text-center"> <span class="monospaced">In Stock</span> </div> <div class="col-md-4 col-md-offset-1 text-center"> <a class="monospaced" href="#">Add to Shopping List</a> </div> </div>

“text-center”实现居中，类似还有“text-left”、“text-right”等。“col-md-offset-1”将元素右移一列，使“Add to Shopping List”在大屏上与上方按钮对齐。

使用 Bootstrap 的导航标签

借助 CSS 和 JavaScript，Bootstrap 提供了易用的选项卡导航方案，适合在产品页底部紧凑展示描述、特性、备注和评论等内容。

对于示例产品详情页面，Bootstrap 的导航标签用于在页面上相对较小的空间中容纳大量信息。

标签导航标记分两部分。第一部分为标签本身：

<ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#description" aria-controls="description" role="tab" data-toggle="tab" >Description</a> </li> <li role="presentation"> <a href="#features" aria-controls="features" role="tab" data-toggle="tab" >Features</a> </li> <li role="presentation"> <a href="#notes" aria-controls="notes" role="tab" data-toggle="tab" >Notes</a> </li> <li role="presentation"> <a href="#reviews" aria-controls="reviews" role="tab" data-toggle="tab" >Reviews</a> </li> </ul>

无序列表赋予“nav”和“nav-tabs”类及“tablist”角色：

每个标签是含链接的列表项，“active”类标识默认显示标签。href 属性指向对应面板 id。

第二部分为标签面板（去除内容以便查看结构）：

<div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="description"> ... </div> <div role="tabpanel" class="tab-pane top-10" id="features"> ... </div> <div role="tabpanel" class="tab-pane" id="notes"> ... </div> <div role="tabpanel" class="tab-pane" id="reviews"> ... </div> </div>

导航标签中的每个面板都可以包含任何类型的内容，包括文本甚至富媒体。

面板通过 id 与标签链接对应，可包含任意内容。例如描述面板：

<div role="tabpanel" class="tab-pane active" id="description"> <p class="top-10"> The 'Brownie' Flash B is a box camera taking 2¼ × 3¼" frames on 620 film, made of sheet metal by Kodak Ltd. in England, 1958-60. A more luxurious version of the Brownie Six-20 Model F, it has a two-speed shutter (1/80, 1/40 +B), a close-focus (5-10ft) lens, a yellow filter and flash sync. The Flash B is very similar to the Brownie Flash IV, adding a two-speed shutter but lacking a tripod bush. </p> <p> <small> (source <a href="http://camerapedia.wikia.com/wiki/Kodak_Brownie_Flash_B">http://camerapedia.wikia.com/wiki/Kodak_Brownie_Flash_B</a>) </small> </p> </div>

当 jQuery 和 Bootstrap JS 加载后，标签页即可正常工作。

总结

本文介绍了如何使用 Bootstrap 布局产品详情页，涵盖了网格系统、常用类及选项卡导航的应用。Bootstrap 布局兼容大多数电商平台，是高效开发的理想选择。

请参阅 Armando Roggio 关于使用 Bootstrap 系列的下一篇文章：“在 Bootstrap 中打造令人印象深刻的电商页脚”。

【声明】内容源于网络

电商实践

内容 8035

粉丝 0

电商实践电商实践

总阅读1.1k

粉丝0

内容8.0k