现在,我们可以考虑把Bootstrap的文件弄到Project Template 1文件夹里来了。我们会从Bootstrap提供的一大堆文件里选出需要的部分。为了加快进度,强烈建议大家分别在两个窗口中打开Bootstrap 3文件夹和项目的模板文件夹,以便于比较和拖放。

从Bootstrap的主文件夹中,把fonts文件夹复制粘贴到Project Template 1文件夹中。这个文件夹里包含着Bootstrap附带的重要的Glyphicon字体。(如果你之前没用过图标字体,相信你会喜欢的。)

保险起见,建议大家再在这个文件夹里放一个跨域友好的.htaccess文件。为什么?因为随着越来越多的CDN(Content Delivery Network,内容分发网络)为你的网站缓存静态资源,你会发现如果没有这个文件,某些浏览器会拒绝识别你的Web字体。(注意,H5BP的.htaccess文件中包含了解决这个问题的代码。而我们需要做的,就是保证即使站点根目录下没有放H5BP的.htaccess文件,也不会出现字体问题。)

在代码编辑中创建一个新文件,添加以下代码:

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

 下载示例代码

Packt所有图书的示例代码都可以登录http://www.packtpub.com下载。如果没有注册过,需要注册一个账号,下载地址会发到你的注册邮箱里。

把这个新文件直接保存到fonts文件夹中,并将其命名为.htaccess。(注意,如果是在本地计算机中,你的操作系统可能不会显示这个文件。假如你不知道怎么让操作系统显示隐藏的文件,可以借助FTP客户端,设置客户端的首选项能查看隐藏的文件,然后使用它的浏览器窗口来查看这个本地文件夹。)

保存好之后,这个.htaccess就在你的fonts文件夹中了,它能够确保无论你的站点使用什么CDN服务,所有浏览器都可以使用你的Web字体。

好,接下来要加入Bootstrap的JavaScript文件。H5BP的文件夹中已经包含了一个放置JavaScript文件的文件夹(名为js),在这个文件夹里,可以看到4个文件——有2个位于名为vendor的子文件夹内,如下面的截图所示:

{%}

Bootstrap的插件都基于jQuery,而H5BP已经为我们准备好了。除了jQuery,我们还看到了Modernizr脚本。简单介绍一下,Modernizr包含的是HTML5“垫片”(shiv)脚本,可以让IE8支持HTML5的分区(section)元素。因为我们这个项目打算支持IE8,所以也用得着它。除此之外,Modernizr还可以让我们更方便地检测特定浏览器的能力,比如CSS 3D变换(要了解更多信息,请参考其文档,地址为:http://modernizr.com/docs/)。下一章,我们会用到Modernizr的特性检测功能。

接下来我们实际要做的,就是把Bootstrap的插件脚本都弄进来。首先,我们把它们以单个文件的形式复制过来。在Project Template 1文件夹的子文件夹js中,再创建一个名为bootstrap的文件夹,然后把Bootstrap的js文件夹中的脚本文件都复制过来。下面截图显示了Bootstrap随带的插件,每个插件一个文件:

{%}

把这些插件文件集中保存到新建的js/bootstrap文件夹,便于优化网站性能,即可以按需选用插件、排除其他文件并缩减文件大小。

在开发期间,保持所有Bootstrap的插件都可用也是一个办法。这样,如果你想添加个折叠、提示或者传送带效果,都可以信手拈来。我们在此选择自己的做法。

H5BP采用的方法是把所有插件代码都复制到一个plugins.js模板文件中。这是结束开发之后的最佳做法,因为这样可以减少HTTP请求,加快站点加载速度。(换句话说,加载一个80 KB的文件,比加载4个20 KB的文件速度更快。)

我们在这个项目的开发过程中,也将采用相同的方法。我们要做的只是把必要的插件代码复制到plugins.js0文件中。所以下面我们就要找到Bootstrap中包含插件代码的大文件。

 或许有读者喜欢在开发期间分别在标记中链接用到的单个插件,最终再把它们合并成一个。如果你愿意,大可这样做,忽略我们下面的内容即可。

打开Bootstrap文件夹中包含分发文件的dist文件夹。在这个文件夹中的js文件夹里,包含着bootstrap.js和bootstrap.min.js,它们就是包含Bootstrap所有插件代码的大文件。考虑到这一章的练习不用编辑插件代码,所以我们可以直接使用压缩后的版本。

{%}

找到图中选中的文件后,完成下列步骤:

1. 在编辑器中打开bootstrap.min.js;

2. 全选代码,包括开关的注释,然后复制;

3. 打开新项目文件夹中的plugins.js;

4. 把Bootstrap的插件代码粘贴到// Place any jQuery/helper plugins in here注释下面。结果看起来如下所示(这里当然省略了很多后续代码)。

// Place any jQuery/helper plugins in here.

/**
* bootstrap.js v3.0.0 by @fat and @mdo  
* Copyright 2013 Twitter Inc.  
* http://www.apache.org/licenses/LICENSE-2.0  
*/  
if(!jQuery)throw new Error("Bootstrap requires jQuery");+function(a){"use strict";
...

5. 保存并退出。

这样就把Bootstrap的插件都准备好了!

 保留Bootstrap插件及其他插件开头的注释,就保留了插件的来源信息,这些信息也是许可的基本内容。此外,我们因此也更容易搜索到相关插件。比如,在发布之前优化代码时,就需要把现在的压缩版本替换成只包含用到的插件的压缩版本。保留注释到时候就会派上用场。

在后面的项目中,我们会使用LESS创建自定义的Bootstrap CSS文件。下一章开始就会这么做,现在先不用考虑CSS。

下面我们把Bootstrap中重要的LESS文件复制过来:把bootstrap/less文件夹复制到Project Template 1文件夹中。

30:00