Mr.J--Bootstrap使用

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、Javascript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 [1]  Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [2]  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

首先，我们先从http://getbootstrap.com/  下载bootstrap:

可以在右上角选择bootstrap版本，我们就选择最新版本v3.3.7作为示范，点击Download后，找到Download source并点击下载,如下图所示。

我们会下载一个压缩包，解压之后会发现很多文件：

虽然文件很多，但是真正需要的并不多，其中less文件夹中的是非常重要的，会经常使用。如果只需要Bootstrap默认提供的CSS或者JavaScript文件，就在dist文件夹中：

然后在浏览器中打开 https://html5boilerplate.com/ 下载H5BP，下载压缩包，解压之后我们会看见这样的一个文件序列。将这个文件夹重命名为Project 1。

我们需要删除不必要的样板文件，在H5BP中删除css文件夹，doc文件夹以及其中的内容。

现在，将boostrap的文件弄到Project 1 中，将bootstrap中的fonts文件夹复制粘贴到Project 1中，在fonts文件夹中写一个名为.htaccess的文件，其中的内容为：

      <FilesMatch "\.(ttf|otf|eot|woff)$">
            <IfModule mod_headers.c>
            Header set Access-Control-Allow-Origin "*" 
			</IfModule>
		</FilesMatch>

这样就可以保证无论站点使用什么CDN服务都可以使用自己的Web字体。在H5BP的文件夹中有一个js文件，里面有一个vendor文件夹，其中有两个比较重要的文件：

Bootstrap的插件基于Jquery，Modernizr包含的是HTML5（shiv）脚本，可以让IE8支持HTML5的分区（section）元素。在Project 1的子文件夹中js创建一个名为bootstrap 的文件夹，在Bootstrap的js文件夹脚本文件都复制过来:

在H5BP的js文件夹中的plugins.js中添加代码，添加的代码来自于bootstrap中dist中的js子文件夹，把bootstrap.min.js中的所有代码复制粘贴，放在plugins.js中：

放在这一条语句的下面。此时所有的插件都准备好了。

Project 1 文件夹如同所示：

fonts：

js:

Project 1:

借鉴资料：《Bootstrap实战》