本节，我们将从增强页面整体性的角度出发，再做一些细节的调整。首先，给页面中的每个部分的 h1 标题增加上必要的上、下内边距，并增大字号。然后，再增强一下导航的体验，即给导航条添加 ScrollSpy 并使用 jQuery 将点击导航后的滚动过程变成动画。
10.1 调整标题
先来增强各部分的主标题。现在看一下这些标题，你会发现它们很不起眼。比如，就以 Features 部分为例吧：
我们的增强方案是降低其对比度，增大其内边距。我们只想把规则应用给 FEATURE、IMPACT 和 SIGN UP，因此可以通过 ID 选择它们。
(1) 在编辑器打开 _page-content.less 。
(2) 在文件顶部，在给页面主体应用上内边距的规则之后，添加以下代码：
#features, #impact, #signup { padding-top: 36px; padding-bottom: 48px; h1 { font-size: 5em; color: @gray; line-height: 1.3; padding-bottom: 24px; } }
(3) 以上规则做的事情如下：
□ 给这些部分添上上、下内边距；
□ 显著增大 h1 标题的字号；
□ 减少标题的对比度；
□ 通过设置行高和下内边距，保证标题周围的空间合适。
现在的效果如下，看看有什么不一样：
这些变化会体现在所有视口大小的页面中。对于小视口，目前的 h1 太大了。另外，我们还需要添加一些左、右外边距。因此还要继续调整一下。我们不想让后面的样式影响大视口的布局，所以得把它们封装到一个媒体查询中：
// Adjust section headings for extra-small viewports only @media (max-width: @screen-xs-max) { #features, #impact, #signup { margin-left: 30px; margin-right: 30px; h1 { font-size: 3em; } } }
下面的屏幕截图展示了调整后的效果：
接下来我们改进导航的体验。
10.2.为导航条添加 ScrollSpy
我们要配置顶部的导航条，令其对应页面中的位置。下面给导航条添加 Bootstrap 的 ：
(1) 打开 html 文档，给 body 标签添加下面的 ScrollSpy 属性：
<body data-spy="scroll" data-target=".navbar">
PS:假如页面中包含多个导航条，需要在 data-target 属性中具体指出。或许得为 ScrollSpy 导航条添加一个ID，比如，然后将这个ID作为 data-target属性的值。
(2) 设置了这些属性，保存文件，刷新浏览器，点击导航，会发现导航能够定位到页面对应的位置，如下图所示：
添加动画
打开 js/main.js 文件， 在$( document ).ready(function() { 中添加以下代码：
$('.navbar [href^=#]').click(function(e){ e.preventDefault(); var div = $(this).attr('href'); $("html, body").animate({ scrollTop: $(div).position().top }, "slow"); });
这里我们使用 jQuery 做了以下几件事：
□ 选择了 .navbar 元素中以页面位置中的锚为目标的链接；
□ 阻止了默认的单击行为；
□ 将滚动过程变为动画，设置了动画速度为 slow。
单击某个导航项，就可以看到滚动动画了。
11.小结
花点时间前后翻阅一下页面，欣赏一下各部分的细节，调整一下窗口，看看布局的响应性如何。
下面简单回顾下，我们的客户向我们提出了设计一个单页营销站点的要求：
□ 使用 Bootstrap 高清图样式的大字欢迎语，背景图十分抢眼，而且具有响应能力；
□ 使用 Font Awesome 图标的功能列表；
□图片墙网格的用户赞誉，同样完美适配各种视口；
□ 注册区使用 Bootstrap 的表格样式，并自定义了中档价目表，在其中、大视口更加突出；
□ 使用 ScrollSpy 和 jQuery 增强了导航条，并添加了动画滚动效果。
这样，本书就结束了。做完本章和前面几章的项目，相信你一定有了比较大的收获。总结一下吧：
□ 掌握了 Bootstrap 的所有细节；
□ 把 Bootstrap LESS 和 JavaScript 整合进我们的项目文件；
□ 把 Bootstrap 的 glyphicons 替换成了更丰富的 Font Awesome 图标字体；
□ 对 Bootstrap 的样式进行自定义和调整，从而达到对设计结果的精准控制。