使用 Bootstrap 和 HTML5 Boilerplate 開始一個項目
下載 Bootstrap
訪問下面網站下載最新的 bootstrap 源文件
http://getbootstrap.com/
找到如下所示的下載頁面，點擊 Download source 按鈕即可下載，如果用 Sass 開發，那麽把 Sass 文件也下載下來，
解壓後，打開 bootstrap 文件夾可以看到裏面有一堆文件以及文件夾，大致就像這樣，
其中，less 文件夾裏面包含了所有的 less 文件，js 文件夾裏面包含了12個 js 插件，接下來，我們去下載 HTML5 Boilerplate。
下載 HTML5 Boilerplate
訪問 http://html5boilerplate.com/ 獲取最新的 HTML5 Boilerplate(H5BP) 文件，解壓後我們給文件夾命名為 project1 表示項目1，打開文件夾，可以看到裏面包含的內容，如下所示，
刪掉不需要的文件
- css 文件夾（因為我們會使用 bootstrap 的樣式）
- CHANGELOG.md
- CONTRIBUTING.md
- doc 文件夾以及其中的內容
更新需要的文件
- humans.txt，裏面可以寫上整個網站工作團隊，對幫助過網站建設的人們致以謝意，以及使用到的開發工具等等。
- LICENSE.md，添加上 Bootstrap 和其它框架的許可信息。
- README.md，提供一個基本的項目說明。
更新 favicon 和 touch icons
用自己的圖標替換掉 H5BP 默認的圖標，
- apple-touch-icon-precomposed.png
- favicon.ico
不知道怎麽生成 ico 圖標， 點擊這裏 ，可以幫助你在線轉換
整合 Bootstrap
首先打開 bootstrap 文件夾找到字體 fonts 文件夾，復制到 project1 文件夾裏面，該 fonts 文件夾裏面是 Bootstrap 自帶的 Glyphicon 圖標字體文件，這樣字體文件就算搞定了。
然後是 javaScript 文件，看看 H5BP 自帶的 js 文件，打開 project1 文件夾裏面的 js 文件夾，如下所示，
Bootstrap 的插件是依賴於 jQuery 的，可以看到 Boilerplate 已經為我們準備好了（vendor 文件夾中），另外一個 Modernizr 腳本，其中包含了 HTML5 shiv，可以讓 IE8 兼容，不過它更大的作用是對瀏覽器進行了特性檢測。plugin.js 文件用於放置插件，在這裏新建一個文件夾命名為 bootstrap，用於放置 Bootstrap 插件，把 Bootstrap 中的 js 文件夾裏面的插件復制到這個文件夾裏面來，如下所示，
不出意外的話，應該有12個插件（不排除以後會增加或者減少的可能），可以根據需要選擇使用某些插件，也可以一把抓，把全部插件引用進來，一個一個的引用實在是徒然增加 HTTP 請求，所以得把全部插件放入一個文件中，將 Bootstrap 插件全部放入 plugins.js 文件中，找到已經打包好的代碼，打開 bootstrap/dist/js/bootstrap.min.js 全選所有代碼復制粘貼到 plugins.js 中，就行了。
最後是樣式文件，復制整個 bootstrap/less 文件夾到 project1 中。
至此，Bootstrap 中需要的內容已經全部整合到 project1 中來了，project1 裏面的內容如下所示，
其中 fonts 文件夾裏面包含了 Glyphicon 字體文件，img 文件夾是空的，less 文件夾是從 Bootstrap 復制來的(如果使用 Sass 進行開發，那麽這裏就是 Sass 文件夾)，js 文件夾如下所示，
我想了解更多關於 Modernizr 的內容。
設置首頁
回到 project1 主目錄，用可愛的文本編輯器打開 index.html，註意不是用瀏覽器打開，可以看到如下內容，
1 <!DOCTYPE html>
2 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4 <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
5 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
6 <head>
7 <meta charset="utf-8">
8 <meta http-equiv="X-UA-Compatible" content="IE=edge">
9 <title></title>
10 <meta name="description" content="">
11 <meta name="viewport" content="width=device-width, initial-scale=1">
12
13 <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
14
15 <link rel="stylesheet" href="css/normalize.css">
16 <link rel="stylesheet" href="css/main.css">
17 <script src="js/vendor/modernizr-2.6.2.min.js"></script>
18 </head>
19 <body>
20 <!--[if lt IE 7]>
21 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
22 <![endif]-->
23
24 <!-- Add your site or application content here -->
25 <p>Hello world! This is HTML5 Boilerplate.</p>
26
27 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
28 <script>window.jQuery || document.write(‘<script src="js/vendor/jquery-1.10.2.min.js"><\/script>‘)</script>
29 <script src="js/plugins.js"></script>
30 <script src="js/main.js"></script>
31
32 <!-- Google Analytics: change UA-XXXXX-X to be your site‘s ID. -->
33 <script>
34 (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
35 function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
36 e=o.createElement(i);r=o.getElementsByTagName(i)[0];
37 e.src=‘//www.google-analytics.com/analytics.js‘;
38 r.parentNode.insertBefore(e,r)}(window,document,‘script‘,‘ga‘));
39 ga(‘create‘,‘UA-XXXXX-X‘);ga(‘send‘,‘pageview‘);
40 </script>
41 </body>
42 </html>
需要修改部分代碼，
14 <link rel="stylesheet" href="css/normalize.css">
15 <link rel="stylesheet" href="css/main.css">
首先刪掉上面兩行引入樣式表的代碼，因為 Bootstrap 已經內置了 normalize.css，這裏不需要再引入了，而且我們根本早就已經刪除了這兩個 CSS 文件了，同時新增一行引入 Bootstrap 樣式表的代碼，
<link rel="stylesheet" href="css/bootstrap.css">
等等，現在 project1 裏面根本沒有這個樣式文件，目前可以有兩種做法，
1.從 bootstrap/dist/css 裏面復制一個編譯好的 bootstrap.css 到 project1/css(這個文件夾需要新建一個)中。
2.用 Less 文件（或者 Sass）編譯成 CSS。
說說第二個方法，首先需要安裝 Less，在 node.js 中使用Node包管理工具npm來安裝：
$ npm install -g less
安裝完成後就可以用了：
$ lessc less/bootstrap/bootstrap.less css/bootstrap.css
好了，假設以上兩種方法已經完成其中一個了，繼續向下，樣式搞定了，應該輪到腳本了，由於 IE 8 並不支持媒體查詢，需要去下載一個腳本(響應式布局，沒有媒體查詢怎麽玩得轉呢)， 點我去往下載的路上 ，下載好後，把 respond.min.js 文件放在 project1/js/vendor 中，然後在頁面上添加以下代碼，
<!-- 只讓 IE 8 以及更低版本的瀏覽器下載該腳本 -->
<!--[if (lt IE 9) & (!IEMobile)]>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->
就寫在引入 Modernizr 腳本的代碼後面就行，這樣，IE 8及以下的瀏覽器也能支持媒體查詢了，接下來有個條件註釋需要稍微修改一下，由於 Bootstrap 已經不再支持 IE7，所以，我們要讓 IE 7 和 IE 6 一同墜入地獄(其實就多了一句升級瀏覽器的提示而已)，
20 <!--[if lt IE 7]> 改成 <!--[if lte IE 7]>使用 Bootstrap 和 HTML5 Boilerplate 開始一個項目