Bootstrap实战——1.4　加入Bootstrap文件

现在，我们可以考虑把Bootstrap的文件弄到Project Template 1文件夹里来了。我们会从Bootstrap提供的一大堆文件里选出需要的部分。为了加快进度，强烈建议大家分别在两个窗口中打开Bootstrap 3文件夹和项目的模板文件夹，以便于比较和拖放。 1.4.1　字体 从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字体。 1.4.2　JavaScript 好，接下来要加入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插件及其他插件开头的注释，就保留了插件的来源信息，这些信息也是许可的基本内容。此外，我们因此也更容易搜索到相关插件。比如，在发布之前优化代码时，就需要把现在的压缩版本替换成只包含用到的插件的压缩版本。保留注释到时候就会派上用场。 1.4.3　暂时不考虑CSS文件 在后面的项目中，我们会使用LESS创建自定义的Bootstrap CSS文件。下一章开始就会这么做，现在先不用考虑CSS。 1.4.4　复制LESS文件 下面我们把Bootstrap中重要的LESS文件复制过来：把bootstrap/less文件夹复制到Project Template 1文件夹中。