【读书笔记《Bootstrap 实战》】4.企业网站

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

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

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

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

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

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

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

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

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

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

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

【读书笔记《Bootstrap 实战》】4.企业网站

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

【读书笔记《Bootstrap 实战》】4.企业网站

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

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

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

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

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

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

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

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

 

1. 准备启动文件

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

 

2.页头区

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

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

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

□ 使用导航区。

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

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

【读书笔记《Bootstrap 实战》】4.企业网站

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

【读书笔记《Bootstrap 实战》】4.企业网站

让我们开始吧。

 

2.1 包含下拉菜单的导航项

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

官方文档:http://getbootstrap.com/components/#navbar 

中文版文档:http://v3.bootcss.com/components/#nav-dropdowns

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

【读书笔记《Bootstrap 实战》】4.企业网站
<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>
【读书笔记《Bootstrap 实战》】4.企业网站

可以看到效果如下:

【读书笔记《Bootstrap 实战》】4.企业网站

(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) 保存,编译。这样我们的下拉菜单初步完成。显示效果如下:

【读书笔记《Bootstrap 实战》】4.企业网站

 

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了:

【读书笔记《Bootstrap 实战》】4.企业网站

下面我们需要调整 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:

【读书笔记《Bootstrap 实战》】4.企业网站

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

【读书笔记《Bootstrap 实战》】4.企业网站

 

2.3 调整导航条

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

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

【读书笔记《Bootstrap 实战》】4.企业网站

操作步骤是:我们先把 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>

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

【读书笔记《Bootstrap 实战》】4.企业网站

 

2.4 添加使用导航

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

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

【读书笔记《Bootstrap 实战》】4.企业网站

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

【读书笔记《Bootstrap 实战》】4.企业网站

 

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

【读书笔记《Bootstrap 实战》】4.企业网站
    <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>
【读书笔记《Bootstrap 实战》】4.企业网站

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

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

【读书笔记《Bootstrap 实战》】4.企业网站

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

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

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

【读书笔记《Bootstrap 实战》】4.企业网站
//// Banner Area Styles
//
header[role="banner"]{
  .utility-nav {
    position: absolute;
    top: 0;
    right: 0;
  }
}
【读书笔记《Bootstrap 实战》】4.企业网站

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

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

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

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

□ 向左浮动列表项

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

□ 删除悬停时的下划线。

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

【读书笔记《Bootstrap 实战》】4.企业网站
//// 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;
          }
        }
      }
    }
  }
}
【读书笔记《Bootstrap 实战》】4.企业网站

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

 【读书笔记《Bootstrap 实战》】4.企业网站

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

 

3.调整响应式导航

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

【读书笔记《Bootstrap 实战》】4.企业网站

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

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

于是,实用导航就会出现了:

【读书笔记《Bootstrap 实战》】4.企业网站

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

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

保存后编译,就可以看到效果了:

【读书笔记《Bootstrap 实战》】4.企业网站

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

(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) 再增大图标尺寸,并在垂直方向上增加一些行高。同样还在这个媒体查询中写样式:

【读书笔记《Bootstrap 实战》】4.企业网站
@media (max-width:(@grid-float-breakpoint - 1)){
  span {
    .sr-only();
  }
  .icon {
    font-size: 2em;
     line-height: 1.2;
  }
【读书笔记《Bootstrap 实战》】4.企业网站

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

【读书笔记《Bootstrap 实战》】4.企业网站

 

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

修改后效果如下:

【读书笔记《Bootstrap 实战》】4.企业网站

 

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

 

打开 _variables.less ,搜索// Navbar,在这里看到导航条用到的变量。这里指定的大多数标准值既对折叠后的响应式导航条有效,也对宽屏幕下扩展的导航条有效。

我们希望折叠后响应式导航条的背景、文本和链接颜色和默认值基本一致,但在中大型视口中变成蓝色背景、浅色文本。


5.1 调整响应式导航条

为此要调整一些变量的默认值,然后再创建一些新变量,只应用给扩展后的导航条。

(1) 找到 注释// Basics of a navbar,修改代码如下:

@navbar-height:          44px;  
...
@navbar-default-color:   @text-color;
@navbar-default-bg:     #fff;

(2) 向下找到导航条链接区,调整颜色让链接颜色与导航条文本颜色一致,并给活动链接添加一点背景色:

【读书笔记《Bootstrap 实战》】4.企业网站
// 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;
【读书笔记《Bootstrap 实战》】4.企业网站

(3) 再调整 navbar-toggle 的样式,删除边框和背景,调深导航条:

// Navbar toggle
@navbar-default-toggle-hover-bg:       transparent;
@navbar-default-toggle-icon-bar-bg:    @gray;
@navbar-default-toggle-border-color:   transparent;

在窄视口显示效果如下:

【读书笔记《Bootstrap 实战》】4.企业网站

 

接下来,需要把右侧的 All Departments链接到左侧(折叠状态下)。Bootstrap 专门有一个类就是为了这个目的。

打开 html 文档,找到包含 All Departments 的标记,把 类 pull-right 改为 navbar-right 就可以了。

【读书笔记《Bootstrap 实战》】4.企业网站

 

 

5.2 调整水平导航条

在大中型屏幕中,导航条水平排列在 Logo 下面。我们希望此时的导航条呈现 @brand-primary 变量中设置的蓝色背景。为此,必须要翻转链接和文本的颜色,即由浅变深。

我们要使用 Bootstrap 的 inverted-navbar 变量和样式。

(1) 打开 _variables.less,找到注释 Inverted navbar,会发现一些与默认导航条所用类似的变量。我们就通过它们来给扩展后的导航条应用颜色。

(2) 按照如下所示调整变量:

【读书笔记《Bootstrap 实战》】4.企业网站
//=== 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%);
【读书笔记《Bootstrap 实战》】4.企业网站

调整好这些变量后,只要把它们应用给扩展导航即可。谓词得写几行自定义的LESS代码。考虑到这种颜色切换属于页头区配色的变化,所以我们把代码写到 _banner.less 中。

(3) 打开 _banner.less 并添加一个新的带注释的区块:

【读书笔记《Bootstrap 实战》】4.企业网站
//Apply .navbar-inverse styles to the enpanded navbar
@media (min-width: @grid-float-breakpoint){
  .navbar-default {
    .navbar-inverse();
  }
}
【读书笔记《Bootstrap 实战》】4.企业网站

这个媒体查询使用 @grid-float-breakpoint 变量确定了应用新规则的最小视口宽度。因为我们已经在导航条中添加了 navbar-default 类,所以可以直接使用这个类作为选择符。混入 .navbar-inverse() 则把在 _navbar.less 中定义的样式 .navbar-inverse 应用给了这个媒体查询中的导航条。

保存编译后,可以看到在中大型屏幕中,可以看到导航条的蓝色背景和浅色文本:

【读书笔记《Bootstrap 实战》】4.企业网站

 可以看到显示效果中导航条两端的圆角,我们需要把这些样式去掉。为此,打开 _variables.less,修改变量 @navbar-border-radius:

@navbar-border-radius:  0;

最后,我们把文本转换为大写形式,稍微缩小一点,再加粗。

在 _banner.less 中,把如下代码添加到 .navbar-inverse() 混入后:

【读书笔记《Bootstrap 实战》】4.企业网站
@media (min-width: @grid-float-breakpoint){
  .navbar-default {
    .navbar-inverse();
    .navbar-nav > li > a {
      text-transform:uppercase;
      font-size:82%;
      font-weight: bold;
    }
  }
}
【读书笔记《Bootstrap 实战》】4.企业网站

其显示效果如下:

【读书笔记《Bootstrap 实战》】4.企业网站

 

6.设计复杂的响应式布局

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

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

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

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

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

【读书笔记《Bootstrap 实战》】4.企业网站 main

修改后,中宽屏显示效果:

【读书笔记《Bootstrap 实战》】4.企业网站

窄屏显示效果如下:

【读书笔记《Bootstrap 实战》】4.企业网站

 

6.1 调整中、宽布局

当前,在中款时口中,三栏是等宽的,而且字体大小、按钮大小,还有颜色都一样。结果就是没有层次感。

要实现内容从视觉上的分层,可以调整栏宽、字体大小,还有颜色。我们先从调整栏宽开始。

(1) 打开 html文件,我们可以看到我们的分栏都是的类 col-sm-4。这表示当前栏是父元素宽度的三分之一,从小视口(764px)及以上宽度开始。

我们想在中大视口(992px及以上)内保留三栏,而且希望第一栏比另两栏宽。

(2) 把第一栏的 栏宽类设为 col-md-5,其他两栏分别为 col-md-4 和 col-md-3.

(3) 保存,刷新,可以看到以宽度分层的三栏:

【读书笔记《Bootstrap 实战》】4.企业网站

很明显,中间和第三栏的按钮并没有清除。下一步就来调整这些按钮,还有字体大小。

 

6.2 调整标题、字体大小和按钮

我们先来调整标题,以便它们清除自己上方的按钮,目前这些按钮都浮动了右侧。为此,要用到之前新建的用于管理页面内容细节的 _page-content.less。

(1) 在 _page-content.less 添加以下代码:

【读书笔记《Bootstrap 实战》】4.企业网站
div[role="main"]{
  [class*="col-"]{
    h1,h2,h3,h4 {
      clear: both;  //清除浮动
      padding-top: 20px;
      &:first-child { //首项对齐
        margin-top: 0;
        padding-top:0;
      }
    }
  }
}
【读书笔记《Bootstrap 实战》】4.企业网站

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

【读书笔记《Bootstrap 实战》】4.企业网站

 

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="#">

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

【读书笔记《Bootstrap 实战》】4.企业网站

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%);

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

【读书笔记《Bootstrap 实战》】4.企业网站

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

【读书笔记《Bootstrap 实战》】4.企业网站

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

 

6.5 针对多个视口进行微调

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

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

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

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

【读书笔记《Bootstrap 实战》】4.企业网站
  //Make columns clear floats in narrow viewport single-colomn layout
  @media (max-width: @screen-sm-min){
     [class*="col-"]{
       clear: both;
     }
  }
【读书笔记《Bootstrap 实战》】4.企业网站

这样,主内容区收工了。

 

7.复杂的页脚

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

 

7.1 准备标记

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

【读书笔记《Bootstrap 实战》】4.企业网站 footer

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

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

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

【读书笔记《Bootstrap 实战》】4.企业网站

7.2 调整布局适应平板

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

【读书笔记《Bootstrap 实战》】4.企业网站

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

【读书笔记《Bootstrap 实战》】4.企业网站
<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">
【读书笔记《Bootstrap 实战》】4.企业网站

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

【读书笔记《Bootstrap 实战》】4.企业网站

 

7.3 修整细节

对于页脚,我们还想修整几个地方:

□ 修整三组链接的外观;

□ 调整内外边距;

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

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

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

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

【读书笔记《Bootstrap 实战》】4.企业网站
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%);
}
【读书笔记《Bootstrap 实战》】4.企业网站

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

【读书笔记《Bootstrap 实战》】4.企业网站
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;
  }
}
【读书笔记《Bootstrap 实战》】4.企业网站

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

【读书笔记《Bootstrap 实战》】4.企业网站
footer[role="contentinfo"] {
  ...
  h3 {
    font-size: 120%;
    margin-bottom:4px;
    text-transform: uppercase;
  }
}
【读书笔记《Bootstrap 实战》】4.企业网站

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

【读书笔记《Bootstrap 实战》】4.企业网站
footer[role="contentinfo"] {
  ...
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
}
【读书笔记《Bootstrap 实战》】4.企业网站

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

【读书笔记《Bootstrap 实战》】4.企业网站
footer[role="contentinfo"] { 
   ...
  .footer-brand {
    margin: 10px;
    text-align: center;
  }
}
【读书笔记《Bootstrap 实战》】4.企业网站

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

【读书笔记《Bootstrap 实战》】4.企业网站
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; } } }
【读书笔记《Bootstrap 实战》】4.企业网站

保存,编译,刷新。以下是页脚在中大型屏幕中的结果:

【读书笔记《Bootstrap 实战》】4.企业网站

然后是在小屏幕中的效果:

【读书笔记《Bootstrap 实战》】4.企业网站

最后是在超小屏幕中的效果:

【读书笔记《Bootstrap 实战》】4.企业网站

 

8.小结

此次我们又掌握了一些利用 Bootstrap 的新技术。简单总结如下:

□ 为复杂的响应式导航条添加样式,使其在中大视口中出现在 Logo 下方,而在小屏幕中又能折叠起来。

□ 构建了自定义的响应式实用导航条,文本和图标都能创造性地适应较大和较小的屏幕。

□ 为页面的主内容设计了响应式布局,是三栏内容主次分明。

□ 构建了一个复杂的页脚,有效地组织了多个链接块,还有跨视口的文本段落。

□ 以导航条配色为基础增强了页脚的配色。

 

此例显示效果地址:http://yexiaochao.github.io/show/bootstrap-code-04.html(附《Bootstrap 实战》的PDF文档和源码链接:http://pan.baidu.com/s/1slPDoux

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






本文转自叶超Luka博客园博客,原文链接:http://www.cnblogs.com/yc-755909659/p/5928247.html,如需转载请自行联系原作者
上一篇:《人工智能:计算Agent基础》——1.4 知识表示


下一篇:智能汽车距离CarPlay的样子越来越远了