功能列表部分，就是6个包含图标、标题和简短文字描述的功能列表，加上一个大的标题组成，我们可以先通过栅格系统（Grid system）实现基本代码如下：
<!-- FEATURES SECTION --> <section> <div> <h1>Features</h1> <div> <div> <span></span> <h2>Feature 1</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo. </p> </div> ... </div> </div> </section>
目前在大屏幕下，显示效果如下：
很明显，我们的目标是增大图标，居中对齐文本，然后平整网格。
(1) 打开 _page-content.less 文件，新开辟一块，并添加注释，表明是功能区的样式：
// Features Section #features { }
(2) 首先针对 .features-item 部分，居中文本，添加内边距，并设定高度以避免浮动的功能相互交错，同时将 .icon 字体增大为90px：
#features { .features-item { text-align: center; padding: 20px; height: 270px; clear: none; .icon { font-size: 90px; } } }
现在的效果如下：
(3) 下面针对平板等小视口调整功能列表。当前，每个 .features-item 都有类 col-md-4，而我们希望在小屏幕中功能列表显示为两栏，相应的要添加类 col-sm-6 ：
<div>
其前后显示效果如下图所示：
(4) 再小一些，在超小视口中，功能项会自己变成一栏。
(5) 但是，在超小屏幕范围之上，即500 ~ 767px 的时候，一栏的布局会导致文本描述太宽：
(6) 解决这个问题，只需要再添加一个媒体查询，为 .features-item 设置最大宽度，同时应用 Bootstrap 的 .center-block() 混入：
#features { .features-item { ... @media (max-width:@screen-xs-max){ max-width: 320px; .center-block(); } ...
有了以上限制，.features-item 元素在任何视口中都会保存理想的宽度了！
8.用户评论区
接下的部分就是用户评论区了，用来展示成功用户的评论。在这一部分，我们看到的是成功用户的笑脸，还有他们对我们客户商品的赞美之词。可以从前面的效果图看到是由若干条评论组成。每条评论都包含了用户的图片、评论以及用户名称。
<!-- IMPACT SECTION --> <section> <div> <h1>Impact</h1> <div> <div> <img src="https://www.jb51.net/img/smiling1-by-RomainGuy-600x900.jpg" alt="Customer Photo1"> <div> <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod, nulla pretium commodo ultricies</p></blockquote> <p>Smiling Customer1</p> </div><!-- /.caption --> </div><!-- /.hreview --> ... </div><!-- /.reviews --> </div><!-- /.container --> </section>
这里每一条评论都使用了上面这样的 hreview 微格式标记。hreview 微格式相关参考示例和介绍地址：
为了方便布局和添加样式，我们使用了 Bootstrap 的 thumbnail 类结构，这个结构有以下好处：
□ 在每条评论的父元素中，我们都会在 hreview 类旁边再添加一个 thumbnail 类；
□ 评论内容，包括引用的话和评论者的名字，都包含在 div 中。
这种缩略图（thumbnail）和说明（caption）结构对每条评论给出了整体封装。Bootstrap 的缩略图样式就是用来在我们期望的布局中显示图片和说明比例的。
我们知道，用户评论区最终要做成一面图片墙的样子，图片有竖也有横。为了让照片中的脸部都露出来，同时有地方叠加文字，我们把所有的图片都处理成了同样宽。
没有 Bootstrap 的布局类，这些图片就从上到下依次排列。如果把窗口缩小到大约320~400px，可以看到它们垂直排列成一栏的样子，如下图所示;
在针对大视口调整布局之前，我们先来为说明元素添加样式。
8.1 定位及美化说明
我们要把说明元素放到对应用户照片的上面。
(1) 打开 _page-content.less 文件中，添加针对 #impact 部分的注释：
// Impact Section #impact { }