(1) 首先，准备一组新的按钮变量。在 _variables.less 中，//== Buttons下面，复制三个 @btn-primary-变量，将 -primary- 改为 -feature- ，并使用 @brand-feature 作为背景色：
(4) 在html文档中把第一栏的按钮的btn-primary 类改为 btn-feature 类。并给按钮填上 btn-lg 类，使按钮变大些。
现在我们可以看到起显示效果如下：
6.4 调整第三栏
我们还需要调整下第三栏，缩小其字体，同时让按钮不那么突出。
(1) 和前面一样，先在 _variables.less,调整 @font-size-small 变量。只是为了字体大小有差别，但不是那么大。
(2) 然后在 _page-content.less 中应用该变量：
(3) 然后给主页的第三栏应用该类：
(4) 再接着，把第三栏的所有按钮的 btn-primary 类改为 btn-default，并使用 btn-xs 缩小其尺寸：
(5) 最后，我们编辑下其按钮的颜色，把按钮的背景颜色改为浅灰色，同时调整字体颜色和边框：
这样，现在页面的层次已经很清晰了，从左到右一次是主内容、此内容和第三栏。
再看看我们的设计在小屏幕单栏布局时的样子：
在窄视口中，三栏布局变成了垂直排列的一栏，主内容在上，然后是次内容和第三栏。那么剩下所要做的，就是对设计精雕细琢，以便让它在不同设备和视口中体验更佳。
6.5 针对多个视口进行微调
无论在什么视口，通常都应该在页面中提供一些留白。另外，每个区块的边框最好也有所标示。
(1) 首先，在内容上下各添加一些内边距。给 main 添加一些内边距，这个内边距适用于所有视口，所以不必使用媒体查询：
(2) 然后，设置分栏在单栏布局时清除上方的浮动元素。如果不设置，第二栏和第三栏可能会覆盖紧上方的按钮。这些样式要卸载媒体查询中，以便限制它只应用到窄视口：
这样，主内容区收工了。
7.复杂的页脚
接下来我们要实现一个复杂的多用途的页脚，页脚包括：指向网站三个重要栏目的三组链接、About Us 文本、社交媒体图标，还有 Logo。
7.1 准备标记
我们先从准备标记着手。页脚的目的是对用户尽可能有用，我们修改页脚代码如下：
<div class="jb51code">
<pre class="brush:xhtml;">
<footer role="contentinfo">
<div class="container">
<div class="row">
<div class="col-md-2">
Categories
About Us
Lorem ipsum dolor sit amet,consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa,nec ultricies metus gravida egestas. Duis congue viverra arcu,ac aliquet turpis rutrum a. Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit.
<ul class="social">
<p class="footer-brand"><a href="bootstrap-code-04.html">
<img src="img/logo.png" width="80" alt="Bootstrappin'">
修改下 _footer.less 中之前的样式文件如下：
现在在980px及更大的视口中，页脚中的栏如下所示：
7.2 调整布局适应平板
视口在768px到980px之间时的布局，Bootstrap 把这个区间界定为小断点，对应变量 @screen-sm 和 col-sm-网格类。在这个宽度内，单栏布局会导致不必要的空白，如下图所示：
要改进这个布局，可以让三组链接浮动起来。使用 Bootstrap 的类 col-sm-4，可以将一栏设置为三分之一宽，使用 col-sm-12 将About Us设置为全宽：
保存并在小视口中测试，可以看到结果如下：
7.3 修整细节
对于页脚，我们还想修整几个地方：
□ 修整三组链接的外观；
□ 调整内外边距；
□ 反转配色方案，与导航条保持一致。
要完成以上工作，得写一些自动以的样式。我们准找层叠原理，先写一些针对页脚的通用规则，然后在过渡到特殊规则。
(1) 在编辑器中打开 _footer.less 以添加针对页脚的自定义样式。
(2) 现在开始添加针对复杂页脚的样式。首先，缩小页脚字体大小，反转颜色与导航条对应——蓝色背景，浅色文本。我们先设置成这样的颜色，然后再把它们稍微调暗一点。
(3) 接下来调整链接和按钮，以适应新的配色。同样要把规则放在footer[role="contentinfo"] 选择符下：
(4) 然后是四个h3标题，调整它们的字号，去掉外边距，并把文本转换成大写：
(5) 接着，再去掉链接列表前的项目符号：
(6) 再然后，调整底部的Logo，使其居中：
(7) 最后，调整社交媒体图标。就是添加一些上内边距，调整一下颜色，以便与新配色方案协调一致。因为图标使用的是 Font Awesome 字体，所以只要调整颜色和背景颜色的值即可：
li {
...
background-color:darken(@navbar-inverse-bg,27%);
> a {
...
color: darken(@navbar-inverse-color,18%);
}
&:hover {
...
background-color:darken(@navbar-inverse-bg,32%);
color:@navbar-inverse-link-hover-color;
}
}
}
保存，编译，刷新。以下是页脚在中大型屏幕中的结果：
然后是在小屏幕中的效果：
最后是在超小屏幕中的效果：
8.小结
此次我们又掌握了一些利用 Bootstrap 的新技术。简单总结如下：
□ 为复杂的响应式导航条添加样式，使其在中大视口中出现在 Logo 下方，而在小屏幕中又能折叠起来。
□ 构建了自定义的响应式实用导航条，文本和图标都能创造性地适应较大和较小的屏幕。
□ 为页面的主内容设计了响应式布局，是三栏内容主次分明。
□ 构建了一个复杂的页脚，有效地组织了多个链接块，还有跨视口的文本段落。
□ 以导航条配色为基础增强了页脚的配色。
此例显示效果地址：http://ycdoit.com/show/bootstrap-code-04.html（附《Bootstrap 实战》的PDF文档和源码链接：）
本例源码下载：
如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：
插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
