html5 boilerplate(h5bp)是一个由 paul irish（google chrome 开发人员、jquery 项目成员、modernizr 作者、yayquery 播客主持人）主导的“前端开发模版”,也可以简单理解为web前端的最佳实践的html+css+jquery模板集合，帮你构建 快速, 健壮, 并且适应力强的web app或网站。
一、h5bp 特性简介
二、如何使用h5bp
删除下列只与h5bp有关的文件：
- changelog.md
- contributing.md
- doc文件夹及其内容
- 删除css文件夹内不需要的样式文件
样板中的下列文件提供了项目的标准信息，根据需要可以更新它们：
- humans.txt:这个文件记载了贡献者，h5bp、bootstrap等
- license.md:在h5bp许可前面，可加上你基于该许可构建的网站的许可信息，在h5bp许可之后，加上bootstrap以及其他站点中用到的重要的库的许可信息。
- readme.md:加上自己的项目说明信息并更新这个文件。
现在我们考虑把h5bp和bootstrap结合使用，我们需要从bootstrap提供的一大推文件中选出需要的部分：
- 字体：
把fonts文件夹复制到h5bp文件夹的根目录，这个文件夹包含bootstrap重要的glyphicon字体。
为保险起见，在这个fonts文件夹建一个.hatccsee文件，防止因为越来越多的cdn为你的网站缓存静态资源，如果没有这个文件某些浏览器会拒绝识别你的web字体，在创建的.hatccss文件中添加如下代码：
- javascript
在js目录下创建一个bootstrap文件夹，然后把bootstrap的js脚本文件拷到这个文件夹下，便于优化网站性能，即可按需选用插件、排除其他文件并缩减文件大小。
h5bp采用的方法是将所有的插件代码都复制到plugins.js模板文件，这是结束开发之后的最佳做法，因为这样可以减少http请求，加快站点的加载速度。所有现在我们需要找到bootstrap文件夹下的bootstrap.min.js文件，打开->全选代码->复制->粘贴到plugins.js模板文件中->保存并退出。
- css文件
此时的项目文件结构如下：
如对本文有疑问， 点击进行留言回复！！
我要评论
网友评论