作为Web前端开发框架，Bootstrap为大多数标准的UI设计常见提供了用户友好、扩浏览器的解决方案。
1.下载Bootstrap
打开官方网址
2.准备项目模板文件夹
接下来，我们为第一个项目创建一个文件夹以及一些基本的文件。谓词我们还要用到HTML5样板文件 HTML5 Boilerplate（H5BP），然后把Bootstrap的有用文件复制过去。
2.1 下载H5BP
访问网站链接地址：
解压后，修改文件夹名为Bootstrap_First，其目录结构如下：
□ 因为稍后要使用LESS创建自己的CSS文件，所以先删除css文件夹。
2.3 理解样板中的.htaccess文件
这个文件中的内容不一定全部都用，这取决于主机设置和站点需求。这个文件的一个主要用途是保证站点性能最优。
2.4 更新必要的样板文件
样板中的下列文件提供了项目的标准信息，根据需要可以更新它们、直接使用它们或者就放那不管。
□humans.txt：这个文件记载贡献者，H5BP、Bootstrap的，还有其他贡献者。
□LICENSE.txt：在H5BP许可前面，加上你基于该许可构建的网站的许可信息，在H5BP许可后，加上Bootstrap以及其他站点中用到的重要的库的许可信息。
2.5 更新站点桌面和触摸设备图标
不要忘了用自己项目的图标替换 Boilerplate 默认的图标文件。
3.加入Bootstrap文件
3.1 字体
从Bootstrap的主文件夹中，把fonts文件夹复制粘贴到Bootstrap_First文件夹中。这个文件夹里包含着Bootstrap附带的重要的Glyphicon字体。
保险起见，再在fonts文件夹中放一个跨域友好的.htaccess文件：
其目的是保证即使站点根目录下没有放H5BP的.htaccess文件，也不会出现字体问题。
3.2 JavaScript
接下来就是加入Bootstrap的JavaScript文件。H5BP的文件夹中已经包含了几个JavaScript文件如下：
在js文件夹里新建文件夹bootsreap，然后把Bootstrap的js文件夹中的脚本都复制过来。下面的截图显示了Bootstrap随带的插件。每个插件一个文件：
把这些插件文件集中保存到新建的js/bootstrap 文件夹，便于优化网站性能，即可以按需选用插件、排除其他文件并缩减文件大小。
在开发期间，保持所有Bootstrap的插件都可用也是一个办法。这样，如果想添加个折叠、提示或者传送带效果，都可以信手拈来。
H5BP采用的方法是把所有插件代码复制到一个 plugins.js模板文件中。这是结束开发之后的最佳做法，因为这样可以减少HTTP请求，加快站点速度。（换句话说，一个80K的文件，比加载4个20K的文件速度更快。）
打开Bootstrap文件夹中包含分发文件的dist文件夹。在这个文件夹中的js文件夹里，包含着 bootstrap.js 和 bootstrap.min.js，它们就是包含 Bootstrap所有插件代码的大文件。
把bootstrap.min.js 的所有代码复制到plugins.js 里。
然后把Bootstrap文件夹里的less文件夹也复制到项目文件夹中。
4.构造HTML模板
打开项目中的 index.html 文件进行编辑。这个示例标记文件来自H5BP，体现了一些最佳实践和建议方案。我们就以这个为基础，把它整合到Bootstrap的工作流中。
浏览一下整个文件，其中有几个有意思的地方，H5BP文档中都有详细说明，目前的5.3.0版本的链接地址为： 。下面也简单介绍下，按次序来：
□ HTML5 文档类型声明：
■ 用于指定字符集的：
■ 告诉IE使用最新版的渲染引擎
■ 预留给描述站点用的：
■ 针对移动浏览器的视口标签
□ 接下来是两个样式表的链接
□ 再下面就是加载Modernizr脚本的script标签。这个脚本回味IE8提供HTML5“垫片脚本”，以便它能识别HTML5的分区元素：
□ 接下来是IE条件注释，包含推荐用户把旧版本IE升级到新版本的消息：
outdated browse. ...
□ 紧接着是一段文本 □ 随后是托管在谷歌服务器上的jQuery链接，以及一个本地jQuery的后备链接：
□ 下面就是plugins.js 和main.js的链接，别分保存JavaScript插件代码和我们编写的代码：
对此次的任务而言，我们需要对这个模板中的元素进行如下操作：
(1) 设定我们站点的标题，针对旧版本浏览器用户更新现有的IE条件注释；
(2) 基于LESS文件编译Bootstrap的CSS，添加基本的页面内容；
(3) 整合Bootstrap的JavaScript插件，确保响应式的导航条（navbar）正常响应。
做完这几件事后，我们就可以开始设计自己的网站了。
5.设定站点标题
5.1 调整过时的浏览器消息
模板中的消息针对老浏览器用户。
outdated browser. Please to improve your experience.
5.2 设置主结构元素
下面开始准备页面内容，目前还只有一个段落。我们可以稍微添加一些内容：
□包含logo的导航的页头区；
□包含版权和社交媒体链接的页脚区。
添加这些内容，都会基于最新的HTML最佳实践来做，而且会考虑ARIA（Accessible Rich Internet Applications，可访问富因特网应用）的role属性（即banner、navigation、main和contentinfo 这几个角色）。HTML5后来又增加了 找到下面的代码：
Hello world! This is HTML5 Boilerplate. 修改为： <main role="main"> Content specific to this page goes here. <footer role="contentinfo"> Copyright © Luka YeMain Heading
6.导航条
我们先把Bootstrap特有的元素设置好，那就是导航条。
作为起点，我们可以暂时就使用 Bootstrap基本的导航条。为此，从Bootstrap文档中拿来它的导航条代码，然后做出如下调整：
□添加了 navbar-static-top 类，因为我们希望导航条能够定位到窗口顶部，但能够随页面滚动而滚动。
□把项目名称连接到 index.html；
□把原来的父div标签改成了语义化的HTML5 nav 标签。
调整后，其header元素如下：
