接下来,我们为第一个项目创建一个文件夹以及一些基本的文件。为此,我们还要用到HTML5样板文件HTML5 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去。

在浏览器中打开h5bp.com。这是一个短链接,服务器解析后会重定向到H5BP的主文档页面。可以在这个页面直接下载H5BP,也可以单击SOURCE CODE链接,在GitHub上下载。

解压下载到的ZIP文件,并把文件夹重命名为Project Template 1。

在这个文件夹中,可以看到类似下图所示的目录结构:

{%}

 如果你的文件系统没有显示隐藏的文件,可能看不到.htaccess文件。在我的电脑上,我是通过自己的FTP客户端打开这个本地文件夹,从而看到.htaccess文件的。

删除下列只与H5BP相关的文件夹和文件:

  • 因为稍后我们要使用LESS创建自己的CSS文件,所以先删除css文件夹。

  • CHANGELOG.md。

  • CONTRIBUTING.md。

  • doc文件夹及其中内容。

如果你还从未看过H5BP中的.htaccess文件,建议先看看H5BP的文档(http://h5bp.com)。当然,这个文件本身也有详细注释,可以用编辑器打开从头到尾看一遍。这个文件中的内容不一定全都有用,这取决于你的主机设置和站点需求。不过这个文件的一个主要用途是保证站点性能最优。希望大家能够认真对待它,多听听高手的建议,然后根据需要配置它。就我而言,因为我的主机提供商会帮我处理这些事,所以就不需要这个.htaccess文件了。

样板中的下列文件提供了项目的标准信息,根据需要你可以更新它们、直接使用它们,也可以放那儿不管,完全取决于你。

  • humans.txt:这个文件记载贡献者,H5BP、Bootstrap的,还有其他贡献者。

  • LICENSE.md:在H5BP许可前面,加上你基于该许可构建的网站的许可信息,在H5BP许可之后,加上Bootstrap以及其他站点中用到的重要的库的许可信息。

  • README.md:更新这个文件,加上自己项目的说明信息。

不要忘了用自己项目的图标替换Boilerplate默认的图标文件,包括以下图标。

  • apple-touch-icon-precomposed.png:为确保所有移动设备(包括高像素密度屏幕设备)都有最佳效果,这个图标应该是144px见方的(样板文件中的是152px见方的)。

  • favicon.ico:32px见方的图标文件。

 之前版本的样板文件曾经包含过多达6种尺寸的触摸设备图标。最近,这个做法有所改变。因为大图标可用于所有相关设备,而由此造成的性能损失非常非常小。为了减少开发人员制作图标的工作量,现在就只留下一个触摸设备图标了。如果你对相关的讨论感兴趣,可以参考这个链接:https://github.com/h5bp/html5-boilerplate/issues/1367#ref-pullrequest-18787780

30:00