Bootstrap企业网站实战项目4

上一章有对个人作品站点进行一些优化。本章，轮到我们充实这个作品站点了，补充一些项目，从而展示我们的能力。换句话说，我们要构建一个相对复杂的企业网站主页。

下面有几个成功企业的网站：

□ Zappos (http://www.zappos.com/)

□ Amazon (https://www.amazon.com/)

尽管这些网站网站各有特色，但共同的一点就是它们都很复杂。

如果按照区域划分，可以将这些网站的主页分成三部分。

□ 页头区：这一部分包含Logo、带下拉菜单的主导航、二级和实用链接导航，以及登录和注册选项。

□ 主内容区：这一部分布局复杂，至少三栏。

□ 页脚区：包含多栏链接和信息。

我们必须能够掌控这些复杂性。为此，需要充分利用 Bootstrap 的12栏响应式系统。

以下是我们打算要构造的设计在中、宽视口中的效果：

在窄视口中，页面会相应变化，如下图所示：

这样，我们需要做以下这些事。

(1) 以【Bootstrap】2.作品展示站点的个人站点作为起点。

(2) 完成复杂的页头区，包括 Logo、导航以及右上角的实用导航（桌面视口）。

(3) 在较窄的视口中，实用导航只显示为图标，与折叠后的响应式导航条并列。

(4) 要实现企业风格的配色方案。

(5) 调整桌面版和响应式导航条。

(6) 为主内容区和页脚区设置复杂的多栏布局。

先做最核心的工作 —— 准备项目的启动文件。

1. 准备启动文件

我们直接把前面的例子作为启动文件，然后在其之上进行修改就行了。（当然也可以直接提供的本书源码,然后解压缩找到文件夹04_Code_BEGIN ）

2.页头区

下面我们就从上到下，先来实现复杂的页头区，在前一个项目的基础上包括以下特性：

□在桌面浏览器及较大视口中，让站点 Logo 显示在导航条之上。

□ 包含菜单项的导航条，每个菜单项又都包含下拉菜单。

□ 使用导航区。

□ 带用户名和密码字段的登录表单。

□ 注册选项。一下是桌面浏览器中的目标结果：

窄视口中的目标结果如下：

让我们开始吧。

2.1 包含下拉菜单的导航项

可以看到导航条是由下拉菜单的，所以我们先修改下对应的导航条。很明显，导航项采用了下拉菜单。我们可以参考下官方文档，先实现下拉菜单。

官方文档：http://getbootstrap.com/components/

中文版文档：http://v3.bootcss.com/components/

(1) 根据文档，我们实现第一个下拉菜单的代码如下：

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Shoes <span class="caret"></span>
</a>
<ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li class="divider"></li>
 <li><a href="#">Separated link</a></li>
 <li class="divider"></li>
 <li><a href="#">One more separated link</a></li>
</ul>
</li>

可以看到效果如下：

(2) 补全其他下拉菜单代码。

(3) 我们修改导航项。把bootstrap/navbar.less 的内容复制到_navbar.less 中，覆盖原内容。然后找到注释// Brand/project name，修改.navbar-brand的内边距如下：

// Brand/project name
.navbar-brand { ...
 padding: 10px 30px 0 15px;
 ...

(4) 打开 less/_variables.less 文件，修改变量如下：

代码如下:

@navbar-height: 50px;

(5) 保存，编译。这样我们的下拉菜单初步完成。显示效果如下：

2.2 把 Logo 放到导航条上方

在这个设计方案里，Logo 可能出现在两个地方，视情况而定：

□ 在桌面和宽屏幕中，显示在导航条上方;

□ 在平板和手机屏幕中，显示在响应式导航条内部。

利用 Bootstrap 的响应式使用类，这两点我们都可以做到。方法如下;

(1) 打开html文档，找到导航条，复制 navbar-brand 的链接和图片：

<a class="navbar-brand" href="index.html">
<img src="img/logo.png" alt="Bootstrap'" width="120" />
</a>

(2) 然后粘贴到导航条上方，在<header role="banner">标签和<nav role="navigation">标签之间。

(3) 把这个 Logo 用<div>...</div> 包装起来，使其被限制在 Bootstrap 居中的网格内部。

(4) 编辑 Logo 链接，将其类名由 navbar-brand 改为 banner-brand 。然后把图片宽度改为180

<div class="container">
 <a class="banner-brand" href="index.html">
 <img src="img/logo.png" alt="Bootstrap'" width="180" />
 </a>
</div>

(5) 保存修改，刷新显示，就可以在导航条上面看到新的Logo了：

下面我们需要调整 Logo，让它只在必要时显示。

在 _variables.less 中，找到变量 @grid-float-breakpoint ，并修改为：

代码如下:

@grid-float-breakpoint: @screen-md-min;

这个变量决定了导航条在窄视口中折叠，在宽视口中展开。在我们的实际中，考虑到导航的复杂性，需要在接近的下一个较宽的断点折叠导航条。因此，需要把变量的值设置为@screen-md-min。

设置完这个变量后，我们要考虑让 banner-brand 只在中、大型视口中显示，而让 navbar-brand 只在小和超小型视口中显示。Bootstrap 为此提供了一组响应式实用类，具体可以参考在线文档：http://getbootstrap.com/css/（中文文档：http://v3.bootcss.com/css/）

下面我们就按照需求来应用这些类。

(1) 把 visible-md visible-lg 添加到 banner-brand 类后面：

<a class="banner-brand visible-md visible-lg" href="#">
 <img src="img/logo.png" alt="Bootstrap'" width="180" />
</a>

(2) 把 visible-xs visible-sm 添加到 navbar-brand 类后面：

<a class="navbar-brand visible-xs visible-sm" href="#">
 <img src="img/logo.png" alt="Bootstrap'" width="120" />
</a>

(3) 保存修改，刷新网页。可以看到，在中、大型视口中，只会显示 banner-brand 中的 Logo：

在小型和超小型视口中，只会显示 navbar-brand 中的 Logo：

2.3 调整导航条

现在导航条包含7项，每项又各有子菜单，体现了一个大型复杂网站的需求。

接下来，我们要把 All Departments 菜单挪到导航条的最右端，让它与其他菜单保持最大距离。

操作步骤是：我们先把 All Departments 菜单移除父元素 ul，并列排在原父元素 ul 后；然后使其包含在新的 ul 标签内，新标签的类名为 "nav navbar-nav pull-right"。

</ul>
<ul class="nav navbar-nav pull-right">
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">All Departments <b class="caret"></b></a>

保持修改并刷新页面，就可以看到效果了：

2.4 添加使用导航

我们的设计需要提供几个实用的导航链接，让用户可以登录、注册和查看购物车。

在中大型的视口中，我们把它们放到页头区的右上角，如下图所示：

在较小的屏幕中，则把对应的链接图标显示在折叠后的导航条的最右端，如下图所示：

说做就做。打开 html 文档，在页头区添加实用导航项的标记，放在 banner-brand 元素后面。以下是完整的标记，开头是 header 标签：

<header role="banner">
 <div class="container">
 <a class="banner-brand visible-md visible-lg" href="#">
 <img src="img/logo.png" alt="Bootstrap'" width="180" />
 </a>
 <div class="utility-nav">
 <ul>
 <li><a href="#" title="Login or Register"><i class="icon fa fa-user fa-lg"></i> Log In or Register</a></li>
 <li><a href="#" title="View Cart"><i class="icon fa fa-shopping-cart fa-lg"></i> View Cart</a></li>
 </ul>
 </div>
 </div>

上面的 fa-user 和 fa-shopping-cart 类添加了 Font Awesome 的用户和购物车的图标，并通过 fa-lg 类把它们的尺寸增大了33%。关于增大 Font Awesome 图标的详细说明，可以参考它的文档：http://fontawesome.io/examples/

保存修改并刷新页面后，就可以看到新添加的 utility-nav 出现在 banner-brand Logo下方了：

接下来，我们需要对布局进行相对位置的调整。

(1) 新建文件 less/_banner.less ，并在 __main.less 导入该文件。

(2) 编辑 _banner.less 文件，先把 .utility-nav 设置为绝对定位到右上角，而且是在 header[role="banner"]的上下文中应用样式：

//// Banner Area Styles
//
header[role="banner"]{
 .utility-nav {
 position: absolute;
 top: 0;
 right: 0;
 }
}

(3) 然后再进行一些细节调整：

□ 为.banner-brand 类添加上内边距，以增加页头区的高度。

□ 将页头区 container 的定位方式设置为 relative，以使它包含绝对定位的 utility-nav 元素。

□ 删除无序列表的项目符号。

□ 向左浮动列表项

□ 将链接显示为 inline-block 并添加内边距。

□ 删除悬停时的下划线。

完成上述调整的样式规则如下：

//// Banner Area Styles
//
header[role="banner"]{
 .banner-brand {
 padding-top:40px;
 }
 > .container {
 position: relative;
 }
 .utility-nav {
 position: absolute;
 top: 0;
 right: 0;
 > ul {
 list-style:none;
 > li {
 float: left;
 > a {
 display: inline-block;
 padding: 8px 12px;
 &:hover {
 text-decoration: none;
 }
 }
 }
 }
 }
}

保存修改并编译。把浏览器窗口调整到桌面创建大小，然后刷新。应该能看到 utility-nav 元素出现在页头区的右上角位置。

这些调整适合中大型的视口。下面我们针对折叠后的响应式导航条来添加样式。

3.调整响应式导航

在小屏幕中，导航条折叠后 utility-nav 会出现问题。最明显的问题就是它会消失不见。

要让 utilility-nav 显示。必须给他设置一个比导航条更大的 z-index，前者在 _variables.less 中被设置为1000.我们可以在 _banner.less 中，把 .unlility-nav 的 z-index 设置为 1999.

代码如下:

.utility-nav { ... z-index: 1999;

于是，实用导航就会出现了：

接下来需要解决它会遮挡 navbar-toggle 按钮的问题。把按钮移到导航条左侧就行了，修改 _navbar.less ，找到注释// Navbar toggle，修改.navbar-toggle 选择符的值：

.navbar-toggle {
 position: relative;
 float: left; //edited
 margin-left: @navbar-padding-horizontal; //edited

保存后编译，就可以看到效果了：

很明显，我们还需要解决过分拥挤的问题，也就是要对除屏幕阅读器之外的设备隐藏链接文本。在折叠后的导航条中，图标本身就足以传递意图了，何况还可以把图标弄得更大一些。

(1) 打开 html 文档，用 span 元素包围 utilility-nav 中每个链接的文本：

<li><a href="#" title="Login or Register"><i class="icon fa fa-user fa-lg"></i> <span>Log In or Register</span></a></li>
<li><a href="#" title="View Cart"><i class="icon fa fa-shopping-cart fa-lg"></i> <span>View Cart</span></a></li>

(2) 在 _banner.less 中添加针对这些 span 标签的媒体查询。在使用LESS的情况下，可以精确的嵌套媒体查询。在此要使用 @grid-float-breakpoint 变量，把 max-width 查询设置为 @grid-float-breakpoint -1 ，因为这个变量的值意味着在它那么宽时，导航条就会从折叠变成扩展状态。在这个媒体查询中，使用实用类 sr-only 作为混入，对除屏幕阅读器之外的所有设备隐藏文本。（参考文档：http://getbootstrap.com/css/）

.utility-nav { ...
 > a { ...
 @media (max-width:(@grid-float-breakpoint - 1)){
 span { .sr-only(); }
 }

这样就隐藏了 span 标签中的文本，屏幕上将只剩图标。

(3) 再增大图标尺寸，并在垂直方向上增加一些行高。同样还在这个媒体查询中写样式：

@media (max-width:(@grid-float-breakpoint - 1)){
 span {
 .sr-only();
 }
 .icon {
 font-size: 2em;
 line-height: 1.2;
 }

保存编译后，可以查看到显示效果如下：

4.调整配色

我们希望网站的配色是标准的企业网站颜色：蓝、红、灰。下面我们把这些颜色放到变量里。

(1) 打开 _variables.less ，修改 @brand-primary，并新增红色的 @brand-feature。

@brand-primary: #3e7dbd; //edited blue

@brand-feature: #c60004; //added new red

(2) 然后调整链接的悬停颜色，使其比 @brand-primary 稍浅：

代码如下:

@link-hover-color: lighten(@link-color, 15%); //edited

修改后效果如下：

5.调整折叠后的导航条配色

打开 _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.设计复杂的响应式布局

假设我们在刚刚结束的客户会面中做出了承诺，要把主页内容分成三层，按照重要程度排序。

□在中大型视口中，所有内容将分布在三栏中。

□在较窄的视口中，这些栏将从上到下排成一栏。

□ 而在平板电脑的视口中，并排的只有两栏，第三栏水平放到它们下面。

作为起点，我们修改原来的主页内容，把其分为三栏，并适量添加内容，修改后代码如下：

<div role="main">
 <div class="container page-contents">
 <div class="row">
 <div class="col-sm-4 clearfix">
 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 <li data-target="#carousel-example-generic" data-slide-to="3"></li>
 </ol>
 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
 <div class="item active">
 <img src="img/okwu-sm.jpg" alt="OKWU.edu Homepage">
 </div>
 <div class="item">
 <img src="img/okwu-athletics-sm.jpg" alt="OKWU Athletics Homepage">
 </div>
 <div class="item">
 <img src="img/bartlesvillecf-sm.jpg" alt="Bartlesville Community Foundation">
 </div>
 <div class="item">
 <img src="img/emancipation-sm.jpg" alt="Emancipation Stories">
 </div>
 </div>
 <!-- /.carousel-inner -->
 <!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 <span class="icon fa fa-chevron-left"></span>
 <span class="sr-only">Previous</span>
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
 <span class="icon fa fa-chevron-right"></span>
 <span class="sr-only">Next</span>
 </a>
 </div>
 <!-- /#homepage-feature.carousel -->

 <h2>Featured Content</h2>
 <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget.</p>
 <p><a class="btn btn-primary pull-right" href="#">Learn more <span class="icon fa fa-arrow-circle-right"></span></a></p>
 </div>
 <div class="col-sm-4 clearfix">
 <h3>Welcome!</h3>
 <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
 <p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>

 <h3>Recent Updates</h3>
 <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
 <p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>

 <h3>And another thing</h3>
 <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
 <p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>
 </div>
 <div class="col-sm-4 clearfix">
 <h4>Don't Miss!</h4>
 <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
 <p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>
 <h4>Check it out</h4>
 <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
 <p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>
 <h4>Finally</h4>
 <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
 <p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>
 </div>
 </div>
 </div>
 </div>

修改后，中宽屏显示效果：

窄屏显示效果如下：

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 添加以下代码：

代码如下:

div[role="main"]{ [class*="col-"]{ h1,h2,h3,h4 { clear: both; //清除浮动 padding-top: 20px; &:first-child { //首项对齐 margin-top: 0; padding-top:0; } } }}

(2) 这样就清除了标题标签的浮动，并使三栏的最顶部标题对齐，器显示效果如下：

6.3 增大主栏

为了突出主栏，我们首先主栏内容的字体大小。

(1) 打开_variables.less，修改变量@font-size-large。

代码如下:

@font-size-large: ceil((@font-size-base * 1.15)); // ~16px

(2) 在 _page-contents.less，添加如下代码，以利用前一步设定的字体大小：

代码如下:

.content-primary { font-size:@font-size-large;}

(3) 打开 html文档，在主页第一栏填上该CSS:

代码如下:

<div class="col-md-5 content-primary">

接下来调整按钮的颜色，要用到红色的 @brand-feature 变量。还需要利用 Bootstrap 在 mixins.less 中提供的方便的混入。

(1) 首先，准备一组新的按钮变量。在 _variables.less 中，//== Buttons下面，复制三个 @btn-primary-变量，将 -primary- 改为 -feature- ，并使用 @brand-feature 作为背景色：

@btn-feature-color: #fff;
@btn-feature-bg: @brand-feature;
@btn-feature-border: darken(@btn-feature-bg, 5%);

(2) 然后没创建一个文件来保存自定义按钮的样式。新建 _buttons-custom.less 文件并根据 bootstrap/buttons.less 中的混入写一个下面这样的混入调用：

.btn-feature {
 .button-variant(@btn-feature-color;@btn-feature-bg;@btn-feature-border);
}

(3) 保存文件，并在 __main.less 导入此文件:

代码如下:

@import "_buttons-custom.less";

(4) 在html文档中把第一栏的按钮的btn-primary 类改为 btn-feature 类。并给按钮填上 btn-lg 类，使按钮变大些。

代码如下:

<a class="btn btn-feature btn-lg  pull-right" href="#">

现在我们可以看到起显示效果如下：

6.4 调整第三栏

我们还需要调整下第三栏，缩小其字体，同时让按钮不那么突出。

(1) 和前面一样，先在 _variables.less, 调整 @font-size-small 变量。只是为了字体大小有差别，但不是那么大。

代码如下:

@font-size-small: ceil((@font-size-base * 0.90)); // ~12px

(2) 然后在 _page-content.less 中应用该变量：

.content-tertiary {
 font-size:@font-size-small;
}

(3) 然后给主页的第三栏应用该类：

代码如下:

<div class="col-md-3 content-tertiary">

(4) 再接着，把第三栏的所有按钮的 btn-primary 类改为 btn-default，并使用 btn-xs 缩小其尺寸：

代码如下:

<a class="btn btn-default btn-xs pull-right" href="#">

(5) 最后，我们编辑下其按钮的颜色，把按钮的背景颜色改为浅灰色，同时调整字体颜色和边框：

@btn-default-color: @gray;
@btn-default-bg: @gray-lightest;
@btn-default-border: darken(@btn-default-bg,5%);

这样，现在页面的层次已经很清晰了，从左到右一次是主内容、此内容和第三栏。

再看看我们的设计在小屏幕单栏布局时的样子：

在窄视口中，三栏布局变成了垂直排列的一栏，主内容在上，然后是次内容和第三栏。那么剩下所要做的，就是对设计精雕细琢，以便让它在不同设备和视口中体验更佳。

6.5 针对多个视口进行微调

无论在什么视口，通常都应该在页面中提供一些留白。另外，每个区块的边框最好也有所标示。

(1) 首先，在内容上下各添加一些内边距。给 main 添加一些内边距，这个内边距适用于所有视口，所以不必使用媒体查询：

div[role="main"]{
 padding-top: 20px;
 padding-bottom: 40px;
 ...

(2) 然后，设置分栏在单栏布局时清除上方的浮动元素。如果不设置，第二栏和第三栏可能会覆盖紧上方的按钮。这些样式要卸载媒体查询中，以便限制它只应用到窄视口：

//Make columns clear floats in narrow viewport single-colomn layout
 @media (max-width: @screen-sm-min){
 [class*="col-"]{
 clear: both;
 }
 }

这样，主内容区收工了。

7.复杂的页脚

接下来我们要实现一个复杂的多用途的页脚，页脚包括：指向网站三个重要栏目的三组链接、About Us 文本、社交媒体图标，还有 Logo。

7.1 准备标记

我们先从准备标记着手。页脚的目的是对用户尽可能有用，我们修改页脚代码如下：

<footer role="contentinfo">
 <div class="container">
 <div class="row">
 <div class="col-md-2">
 <h3>Categories</h3>
 <ul>
 <li><a href="javascript:;">Shoes</a></li>
 <li><a href="javascript:;">Clothing</a></li>
 <li><a href="javascript:;">Accessories</a></li>
 <li><a href="javascript:;">Men</a></li>
 <li><a href="javascript:;">Women</a></li>
 <li><a href="javascript:;">Kids</a></li>
 <li><a href="javascript:;">Pets</a></li>
 </ul>

 </div>
 <div class="col-md-2">
 <h3>Styles</h3>
 <ul>
 <li><a href="javascript:;">Athletic</a> </li>
 <li><a href="javascript:;">Casual</a></li>
 <li><a href="javascript:;">Dress</a></li>
 <li><a href="javascript:;">Everyday</a></li>
 <li><a href="javascript:;">Other Days</a></li>
 <li><a href="javascript:;">Alternative</a></li>
 <li><a href="javascript:;">Otherwise</a></li>
 </ul>
 </div>
 <div class="col-md-2">
 <h3>Other</h3>
 <ul>
 <li><a href="javascript:;">Link</a></li>
 <li><a href="javascript:;">Another link</a></li>
 <li><a href="javascript:;">Link again</a></li>
 <li><a href="javascript:;">Try this</a></li>
 <li><a href="javascript:;">Don't you dare</a></li>
 <li><a href="javascript:;">Oh go ahead</a></li>
 </ul>
 </div>
 <div class="about col-md-6">
 <h3>About Us</h3>
 <p>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.</p>
 <a class="btn btn-default btn-xs pull-right" href="javascript:;">Learn more <span class="fa fa-circle-arrow-right"></span></a>
 </div>
 </div>

 <ul class="social">
 <li><a href="#" title="Twitter Profile"><span class="icon fa fa-twitter"></span></a></li>
 <li><a href="#" title="Facebook Page"><span class="icon fa fa-facebook"></span></a></li>
 <li><a href="#" title="LinkedIn Profile"><span class="icon fa fa-linkedin"></span></a></li>
 <li><a href="#" title="Google+ Profile"><span class="icon fa fa-google-plus"></span></a></li>
 <li><a href="#" title="GitHub Profile"><span class="icon fa fa-github-alt"></span></a></li>
 </ul>

 <p class="footer-brand"><a href="bootstrap-code-04.html">
 <img src="img/logo.png" width="80" alt="Bootstrappin'"></a></p>
 </div>
 </footer>

修改下 _footer.less 中之前的样式文件如下：

footer[role="contentinfo"] { ...
 //text-align: center;
}

现在在980px及更大的视口中，页脚中的栏如下所示：

7.2 调整布局适应平板

视口在768px到980px之间时的布局，Bootstrap 把这个区间界定为小断点，对应变量 @screen-sm 和 col-sm-网格类。在这个宽度内，单栏布局会导致不必要的空白，如下图所示：

要改进这个布局，可以让三组链接浮动起来。使用 Bootstrap 的类 col-sm-4，可以将一栏设置为三分之一宽，使用 col-sm-12 将About Us设置为全宽：

<div class="col-md-2 col-sm-4">
...
<div class="col-md-2 col-sm-4">
...
<div class="col-md-2 col-sm-4">
...
<div class="about col-md-6 col-sm-12">

保存并在小视口中测试，可以看到结果如下：

7.3 修整细节

对于页脚，我们还想修整几个地方：

□ 修整三组链接的外观；

□ 调整内外边距；

□ 反转配色方案，与导航条保持一致。

要完成以上工作，得写一些自动以的样式。我们准找层叠原理，先写一些针对页脚的通用规则，然后在过渡到特殊规则。

(1) 在编辑器中打开 _footer.less 以添加针对页脚的自定义样式。

(2) 现在开始添加针对复杂页脚的样式。首先，缩小页脚字体大小，反转颜色与导航条对应——蓝色背景，浅色文本。我们先设置成这样的颜色，然后再把它们稍微调暗一点。

footer[role="contentinfo"] {
 padding-top: 20px;
 padding-bottom: 20px;
 font-size:@font-size-small;
 background-color:darken(@navbar-inverse-bg,18%);
 color: darken(@navbar-inverse-color,18%);
}

(3) 接下来调整链接和按钮，以适应新的配色。同样要把规则放在footer[role="contentinfo"] 选择符下：

footer[role="contentinfo"] { ...
 a {
 color: @navbar-inverse-color;
 &:focus,
 &.hover,
 &:active{
 color: @navbar-inverse-link-hover-color;
 }
 }
 .btn-default {
 color: darken(@navbar-inverse-bg,18%) !important;
 }
}

(4) 然后是四个h3标题，调整它们的字号，去掉外边距，并把文本转换成大写：

footer[role="contentinfo"] {
 ...
 h3 {
 font-size: 120%;
 margin-bottom:4px;
 text-transform: uppercase;
 }
}

(5) 接着，再去掉链接列表前的项目符号：

footer[role="contentinfo"] {
 ...
 ul {
 list-style: none;
 padding: 0;
 margin: 0;
 }
}

(6) 再然后，调整底部的Logo，使其居中：

footer[role="contentinfo"] {
 ...
 .footer-brand {
 margin: 10px;
 text-align: center;
 }
}

(7) 最后，调整社交媒体图标。就是添加一些上内边距，调整一下颜色，以便与新配色方案协调一致。因为图标使用的是 Font Awesome 字体，所以只要调整颜色和背景颜色的值即可：

ul.social {
 ...
 padding:20px 0 0;
 ...
 > 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文档和源码链接：http://xiazai.jb51.net/201610/yuanma/BootstrapSite(jb51.net).rar）

本例源码下载：bootstrap-code-04.zip

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。