修改后效果如下：
5.调整折叠后的导航条配色
打开 _variables.less ，搜索// Navbar，在这里看到导航条用到的变量。这里指定的大多数标准值既对折叠后的响应式导航条有效，也对宽屏幕下扩展的导航条有效。
我们希望折叠后响应式导航条的背景、文本和链接颜色和默认值基本一致，但在中大型视口中变成蓝色背景、浅色文本。
5.1 调整响应式导航条
为此要调整一些变量的默认值，然后再创建一些新变量，只应用给扩展后的导航条。
(1) 找到 注释// Basics of a navbar，修改代码如下：
(2) 向下找到导航条链接区，调整颜色让链接颜色与导航条文本颜色一致，并给活动链接添加一点背景色：
(3) 再调整 navbar-toggle 的样式，删除边框和背景，调深导航条：
在窄视口显示效果如下：
接下来，需要把右侧的 All Departments链接到左侧（折叠状态下）。Bootstrap 专门有一个类就是为了这个目的。
打开 html 文档，找到包含 All Departments 的标记，把 类 pull-right 改为 navbar-right 就可以了。
5.2 调整水平导航条
在大中型屏幕中，导航条水平排列在 logo 下面。我们希望此时的导航条呈现 @brand-primary 变量中设置的蓝色背景。为此，必须要翻转链接和文本的颜色，即由浅变深。
我们要使用 Bootstrap 的 inverted-navbar 变量和样式。
(1) 打开 _variables.less，找到注释Inverted navbar，会发现一些与默认导航条所用类似的变量。我们就通过它们来给扩展后的导航条应用颜色。
(2) 按照如下所示调整变量：
调整好这些变量后，只要把它们应用给扩展导航即可。谓词得写几行自定义的LESS代码。考虑到这种颜色切换属于页头区配色的变化，所以我们把代码写到 _banner.less 中。
(3) 打开 _banner.less 并添加一个新的带注释的区块：
这个媒体查询使用 @grid-float-breakpoint 变量确定了应用新规则的最小视口宽度。因为我们已经在导航条中添加了 navbar-default 类，所以可以直接使用这个类作为选择符。混入 .navbar-inverse() 则把在 _navbar.less 中定义的样式 .navbar-inverse 应用给了这个媒体查询中的导航条。
保存编译后，可以看到在中大型屏幕中，可以看到导航条的蓝色背景和浅色文本：
可以看到显示效果中导航条两端的圆角，我们需要把这些样式去掉。为此，打开 _variables.less，修改变量@navbar-border-radius：
最后，我们把文本转换为大写形式，稍微缩小一点，再加粗。
在 _banner.less 中，把如下代码添加到 .navbar-inverse() 混入后：
li > a {
text-transform:uppercase;
font-size:82%;
font-weight: bold;
}
}
}
其显示效果如下：
6.设计复杂的响应式布局
假设我们在刚刚结束的客户会面中做出了承诺，要把主页内容分成三层，按照重要程度排序。
□在中大型视口中，所有内容将分布在三栏中。
□在较窄的视口中，这些栏将从上到下排成一栏。
□ 而在平板电脑的视口中，并排的只有两栏，第三栏水平放到它们下面。
作为起点，我们修改原来的主页内容，把其分为三栏，并适量添加内容，修改后代码如下：
-
-
-
Box">
Featured Content
Suspendisse et arcu felis,ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula,sed fringilla felis feugiat eget.
Welcome!
Suspendisse et arcu felis,sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.
Recent Updates
Suspendisse et arcu felis,sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.
And another thing
Suspendisse et arcu felis,sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.
Don't Miss!
Suspendisse et arcu felis,sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.
Check it out
Suspendisse et arcu felis,sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.
Finally
Suspendisse et arcu felis,sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.
修改后，中宽屏显示效果：
窄屏显示效果如下：
6.1 调整中、宽布局
当前，在中款时口中，三栏是等宽的，而且字体大小、按钮大小，还有颜色都一样。结果就是没有层次感。
要实现内容从视觉上的分层，可以调整栏宽、字体大小，还有颜色。我们先从调整栏宽开始。
(1) 打开 html文件，我们可以看到我们的分栏都是的类col-sm-4。这表示当前栏是父元素宽度的三分之一，从小视口（764px）及以上宽度开始。
我们想在中大视口（992px及以上）内保留三栏，而且希望第一栏比另两栏宽。
(2) 把第一栏的 栏宽类设为 col-md-5，其他两栏分别为 col-md-4 和 col-md-3.
(3) 保存，刷新，可以看到以宽度分层的三栏：
很明显，中间和第三栏的按钮并没有清除。下一步就来调整这些按钮，还有字体大小。
6.2 调整标题、字体大小和按钮
我们先来调整标题，以便它们清除自己上方的按钮，目前这些按钮都浮动了右侧。为此，要用到之前新建的用于管理页面内容细节的 _page-content.less。
(1) 在 _page-content.less 添加以下代码：
(2) 这样就清除了标题标签的浮动，并使三栏的最顶部标题对齐，器显示效果如下：
6.3 增大主栏
为了突出主栏，我们首先主栏内容的字体大小。
(1) 打开_variables.less，修改变量@font-size-large。
(2) 在 _page-contents.less，添加如下代码，以利用前一步设定的字体大小：
(3) 打开 html文档，在主页第一栏填上该CSS:
接下来调整按钮的颜色，要用到红色的 @brand-feature 变量。还需要利用 Bootstrap 在 mixins.less 中提供的方便的混入。
(1) 首先，准备一组新的按钮变量。在 _variables.less 中，//== Buttons下面，复制三个 @btn-primary-变量，将 -primary- 改为 -feature- ，并使用 @brand-feature 作为背景色：
(2) 然后没创建一个文件来保存自定义按钮的样式。新建 _buttons-custom.less 文件并根据 bootstrap/buttons.less 中的混入写一个下面这样的混入调用：
(3) 保存文件，并在 __main.less 导入此文件:
(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个精彩的专题：
插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
相关文章
BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证，由于本插件完全基于BootStrap...
顶求网首页是一个web2.0博客类的网站首页，在该网站中用户可以发表博客，也可以推荐图书给其他用户。所...
一直想改版网站首页的图书展示部分，以前的展示是使用BootStrap的传统的collapse,网页篇幅占用大，也不...
在视窗足够大的时候是没有任何问题的，但是当拖动改变视窗的大小后会发现布局又变乱了，这个问题困扰了...
BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是，它的样式比较单一，如何才能在其原有...
BootStrap是基于HTML、CSS和JavaScript的框架，使你只需要写简单的代码就可以很快的搭建一个还不错的前...
