菜单

使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目402.com

2019年5月5日 - 计算机教程
  1. 下载H5BP

    下载地址:HTML5 Boilerplate(H5BP)

  2. 删除不必要的样板文件

    删除下列只与H5BP有关的文件:

    • CHANGELOG.md
    • CONTRIBUTING.md
    • doc文件夹及其内容
    • 删除css文件夹内不需要的样式文件
  3. 理解样板中的.htaccess文件
    建议先看一遍H5BP的文档(https://html5boilerplate.com/),此文件本身也有详细的注释,可以打开编辑器从头到尾看一遍,这个文件夹的内容不全都有用,主要取决于你的主机设置和站点需求,不过这个文件的一个主要用途是保证站点性能最优。

  4. 可选择更新的样板文件

    样板中的下列文件提供了项目的标准信息,根据需要可以更新它们:

    – humans.txt:这个文件记载了贡献者,H5BP、Bootstrap等

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

    • README.md:加上自己的项目说明信息并更新这个文件。
  5. 更新站点桌面图标和触摸设备图标

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

    apple-touch-icon.png:为确保所有移动设备都有最佳效果,这个图标应该是144px*144px方形图标

    • favicon.ico:32px方形图标
  6. 加入Bootstrap 文件

    现在我们考虑把H5BP和bootstrap结合使用,我们需要从bootstrap提供的一大推文件中选出需要的部分:
    – 字体:
    把fonts文件夹复制到H5BP文件夹的根目录,这个文件夹包含bootstrap重要的Glyphicon字体。
    为保险起见,在这个fonts文件夹建一个.hatccsee文件,防止因为越来越多的CDN为你的网站缓存静态资源,如果没有这个文件某些浏览器会拒绝识别你的WEB字体,在创建的.hatccss文件中添加如下代码:
    402.com 1
    – JavaScript
    在js目录下创建一个bootstrap文件夹,然后把bootstrap的js脚本文件拷到这个文件夹下,便于优化网站性能,即可按需选用插件、排除其他文件并缩减文件大小。
    H5BP采用的方法是将所有的插件代码都复制到plugins.js模板文件,这是结束开发之后的最佳做法,因为这样可以减少http请求,加快站点的加载速度。所有现在我们需要找到Bootstrap文件夹下的bootstrap.min.js文件,打开->全选代码->复制->粘贴到plugins.js模板文件中->保存并退出。
    – css文件

    1. 第一种方法:可以直接把bootstrap的样式大文件拷贝到css文件夹内;
    2. 第二种方法:把bootstrap中重要的less文件夹全部复制过来:把bootstrap/less文件夹复制到H5BP文件夹的根目录下,然后使用less自定义编译css文件到css文件夹中。
  7. 大盘点

    此时的项目文件结构如下:
    402.com 2

更新需要的文件

  1. humans.txt,里面可以写上整个网站工作团队,对帮助过网站建设的人们致以谢意,以及使用到的开发工具等等。
  2. LICENSE.md,添加上 Bootstrap 和其它框架的许可信息。
  3. README.md,提供一个基本的项目说明。

二、如何使用H5BP

为什么选择
Bootstrap,因为它是一个简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。

HTML5 Boilerplate(H5BP)是一个由 Paul
Irish(Google Chrome 开发人员、jQuery 项目成员、Modernizr
作者、yayQuery
播客主持人)主导的“前端开发模版”,也可以简单理解为web前端的最佳实践的HTML+CSS+jquery模板集合,帮你构建
快速, 健壮, 并且适应力强的web app或网站。

更新 favicon 和 touch icons

用自己的图标替换掉 H5BP 默认的图标,

不知道怎么生成 ico 图标,点击这里,可以帮助你在线转换

下载 HTML5 Boilerplate

访问 http://html5boilerplate.com/ 获取最新的 HTML5 Boilerplate(H5BP)
文件,解压后我们给文件夹命名为 project1
表示项目1,打开文件夹,可以看到里面包含的内容,如下所示,

402.com 3

一、H5BP 特性简介

下载  Bootstrap

访问下面网站下载最新的 bootstrap 源文件

http://getbootstrap.com/

找到如下所示的下载页面,点击 Download source 按钮即可下载,如果用 Sass
开发,那么把 Sass 文件也下载下来,

402.com 4

解压后,打开 bootstrap
文件夹可以看到里面有一堆文件以及文件夹,大致就像这样,

402.com 5

其中,less 文件夹里面包含了所有的 less 文件,js 文件夹里面包含了12个 js
插件,接下来,我们去下载 HTML5 Boilerplate。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图