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中刪除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實戰》