打开 _variables.less ，搜索// Navbar，在这里看到导航条用到的变量。这里指定的大多数标准值既对折叠后的响应式导航条有效，也对宽屏幕下扩展的导航条有效。
我们希望折叠后响应式导航条的背景、文本和链接颜色和默认值基本一致，但在中大型视口中变成蓝色背景、浅色文本。
5.1 调整响应式导航条
为此要调整一些变量的默认值，然后再创建一些新变量，只应用给扩展后的导航条。
(1) 找到 注释// Basics of a navbar，修改代码如下：
@navbar-height: 44px; ... @navbar-default-color: @text-color; @navbar-default-bg: #fff;
(2) 向下找到导航条链接区，调整颜色让链接颜色与导航条文本颜色一致，并给活动链接添加一点背景色：
// Navbar links @navbar-default-link-color: @navbar-default-color; @navbar-default-link-hover-color: @navbar-default-color; @navbar-default-link-hover-bg: darken(@navbar-default-bg, 5%); @navbar-default-link-active-color: @navbar-default-color; @navbar-default-link-active-bg: @navbar-default-link-hover-bg;
(3) 再调整 navbar-toggle 的样式，删除边框和背景，调深导航条：
// Navbar toggle @navbar-default-toggle-hover-bg: transparent; @navbar-default-toggle-icon-bar-bg: @gray; @navbar-default-toggle-border-color: transparent;
在窄视口显示效果如下：
接下来，需要把右侧的 All Departments链接到左侧（折叠状态下）。Bootstrap 专门有一个类就是为了这个目的。
打开 html 文档，找到包含 All Departments 的标记，把 类 pull-right 改为 navbar-right 就可以了。
5.2 调整水平导航条
在大中型屏幕中，导航条水平排列在 Logo 下面。我们希望此时的导航条呈现 @brand-primary 变量中设置的蓝色背景。为此，必须要翻转链接和文本的颜色，即由浅变深。
我们要使用 Bootstrap 的 inverted-navbar 变量和样式。
(1) 打开 _variables.less，找到注释Inverted navbar，会发现一些与默认导航条所用类似的变量。我们就通过它们来给扩展后的导航条应用颜色。
(2) 按照如下所示调整变量：
//=== Inverted navbar // Reset inverted navbar basics @navbar-inverse-color: @gray-lightest; @navbar-inverse-bg: @brand-primary; @navbar-inverse-border: darken(@navbar-inverse-bg, 10%); // Inverted navbar links @navbar-inverse-link-color: @navbar-inverse-color; @navbar-inverse-link-hover-color: #fff; @navbar-inverse-link-hover-bg: darken(@navbar-inverse-bg,5%);
调整好这些变量后，只要把它们应用给扩展导航即可。谓词得写几行自定义的LESS代码。考虑到这种颜色切换属于页头区配色的变化，所以我们把代码写到 _banner.less 中。
(3) 打开 _banner.less 并添加一个新的带注释的区块：
//Apply .navbar-inverse styles to the enpanded navbar @media (min-width: @grid-float-breakpoint){ .navbar-default { .navbar-inverse(); } }
这个媒体查询使用 @grid-float-breakpoint 变量确定了应用新规则的最小视口宽度。因为我们已经在导航条中添加了 navbar-default 类，所以可以直接使用这个类作为选择符。混入 .navbar-inverse() 则把在 _navbar.less 中定义的样式 .navbar-inverse 应用给了这个媒体查询中的导航条。
保存编译后，可以看到在中大型屏幕中，可以看到导航条的蓝色背景和浅色文本：
可以看到显示效果中导航条两端的圆角，我们需要把这些样式去掉。为此，打开 _variables.less，修改变量@navbar-border-radius：
复制代码 代码如下:
@navbar-border-radius: 0;
最后，我们把文本转换为大写形式，稍微缩小一点，再加粗。
在 _banner.less 中，把如下代码添加到 .navbar-inverse() 混入后：
@media (min-width: @grid-float-breakpoint){ .navbar-default { .navbar-inverse(); .navbar-nav > li > a { text-transform:uppercase; font-size:82%; font-weight: bold; } } }
其显示效果如下：
6.设计复杂的响应式布局
假设我们在刚刚结束的客户会面中做出了承诺，要把主页内容分成三层，按照重要程度排序。
□在中大型视口中，所有内容将分布在三栏中。
□在较窄的视口中，这些栏将从上到下排成一栏。
□ 而在平板电脑的视口中，并排的只有两栏，第三栏水平放到它们下面。
作为起点，我们修改原来的主页内容，把其分为三栏，并适量添加内容，修改后代码如下：