上一章有对个人作品站点进行一些优化。本章,轮到我们充实这个作品站点了,补充一些项目,从而展示我们的能力。换句话说,我们要构建一个相对复杂的企业网站主页。
下面有几个成功企业的网站:
□ 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/#navbar
中文版文档:http://v3.bootcss.com/components/#nav-dropdowns
(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" class="navbar navbar-default">标签之间。
(3) 把这个 Logo 用 <div class="container">...</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/#responsive-utilities (中文文档:http://v3.bootcss.com/css/#responsive-utilities)
下面我们就按照需求来应用这些类。
(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/#larger
保存修改并刷新页面后,就可以看到新添加的 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/#helper-classes-screen-readers)
.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.设计复杂的响应式布局
假设我们在刚刚结束的客户会面中做出了承诺,要把主页内容分成三层,按照重要程度排序。
□ 在中大型视口中,所有内容将分布在三栏中。
□ 在较窄的视口中,这些栏将从上到下排成一栏。
□ 而在平板电脑的视口中,并排的只有两栏,第三栏水平放到它们下面。
作为起点,我们修改原来的主页内容,把其分为三栏,并适量添加内容,修改后代码如下:
修改后,中宽屏显示效果:
窄屏显示效果如下:
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.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://yexiaochao.github.io/show/bootstrap-code-04.html(附《Bootstrap 实战》的PDF文档和源码链接:http://pan.baidu.com/s/1slPDoux)
本例源码下载:bootstrap-code-04.zip