bootstrap v3.3.4 官方版

Bootstrap （當前版本 v3.3.4）提供以下幾種方式幫你快速上手，每一種方式針對具有不同技能等級的開發者和不同的使用場景。繼續閱讀下麵的內容，看看哪種方式適合你的需求吧。

說明：

用於生產環境的 Bootstrap

編譯並壓縮後的 CSS、JavaScript 和字體文件。不包含文檔和源碼文件。

這是 Bootstrap 從 Less 到 Sass 的源碼移植項目，用於快速地在 Rails、Compass 或 隻針對 Sass 的項目中引入。

使用 Bootstrap 中文網提供的免費 CDN 加速服務

Bootstrap 中文網 為 Bootstrap 專門構建了自己的免費 CDN 加速服務。基於國內雲廠商的 CDN 服務，訪問速度更快、加速效果更明顯、沒有速度和帶寬限製、永久免費。Bootstrap 中文網還對大量的前端開源工具庫提供了 CDN 加速服務，請進入BootCDN 主頁查看更多可用的工具庫。

複製

 

<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- 可選的Bootstrap主題文件（一般不用引入） --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- jQuery文件。務必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

 

通過 Bower 進行安裝

還可以通過 Bower 安裝並管理 Bootstrap 的 Less、CSS、JavaScript 和字體文件。

複製

 

$ bower install bootstrap

 

通過 npm 進行安裝

你還可以利用 npm 工具來安裝 Bootstrap：

複製

 

$ npm install bootstrap

 

require('bootstrap') 代碼的作用是加載 Bootstrap 的所有 jQuery 插件。其中，bootstrap 模塊自身並不導出任何內容。你可以通過加載安裝包頂級目錄下的 /js/*.js 文件的方式手動加載單個的 Bootstrap 插件。

Bootstrap 的 package.json 文件包含了一些額外的元數據：

less - Bootstrap 源碼的入口 Less 文件的路徑

style - Bootstrap 的未壓縮 CSS 文件的路徑

編譯 Less/Sass 源碼需要注意的事項

Bootstrap 利用 Autoprefixer 自動為 某些 CSS 屬性添加針對特定廠商的前綴。如果你是從 Less/Sass 源碼編譯 Bootstrap 的，並且沒有使用 Bootstrap 自帶的 Gruntfile 文件，那你就必須將 Autoprefixer 集成到你的編譯工具和編譯過程中。如果你使用的是我們預先編譯好的 Bootstrap 文件或者使用的是我們提供的 Gruntfile 文件，那就無需操心了，我們已經將這些工作替你搞定了。

包含的內容

Bootstrap 提供了兩種形式的壓縮包，在下載下來的壓縮包內可以看到以下目錄和文件，這些文件按照類別放到了不同的目錄內，並且提供了壓縮與未壓縮兩種版本。

Bootstrap 插件全部依賴 jQuery

請注意，Bootstrap 的所有 JavaScript 插件都依賴 jQuery，因此 jQuery 必須在 Bootstrap 之前引入，就像在基本模版中所展示的一樣。在 bower.json 文件中 列出了 Bootstrap 所支持的 jQuery 版本。

預編譯版

下載壓縮包之後，將其解壓縮到任意目錄即可看到以下（壓縮版的）目錄結構：

複製

 

bootstrap/ ├── css/ │   ├── bootstrap.css │   ├── bootstrap.css.map │   ├── bootstrap.min.css │   ├── bootstrap-theme.css │   ├── bootstrap-theme.css.map │   └── bootstrap-theme.min.css ├── js/ │   ├── bootstrap.js │   └── bootstrap.min.js └── fonts/     ├── glyphicons-halflings-regular.eot     ├── glyphicons-halflings-regular.svg     ├── glyphicons-halflings-regular.ttf     ├── glyphicons-halflings-regular.woff     └── glyphicons-halflings-regular.woff2

 

上麵展示的就是 Bootstrap 的基本文件結構：預編譯文件可以直接使用到任何 web 項目中。我們提供了編譯好的 CSS 和 JS (bootstrap.*) 文件，還有經過壓縮的 CSS 和 JS (bootstrap.min.*) 文件。同時還提供了 CSS 源碼映射表(bootstrap.*.map) ，可以在某些瀏覽器的開發工具中使用。同時還包含了來自 Glyphicons 的圖標字體，在附帶的 Bootstrap 主題中使用到了這些圖標。

Bootstrap 源碼

Bootstrap 源碼包含了預先編譯的 CSS、JavaScript 和圖標字體文件，並且還有 LESS、JavaScript 和文檔的源碼。具體來說，主要文件組織結構如下：

複製

 

bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │   ├── css/ │   ├── js/ │   └── fonts/ └── docs/     └── examples/

 

less/、js/ 和 fonts/ 目錄分別包含了 CSS、JS 和字體圖標的源碼。dist/ 目錄包含了上麵所說的預編譯 Bootstrap 包內的所有文件。docs/ 包含了所有文檔的源碼文件，examples/ 目錄是 Bootstrap 官方提供的實例工程。除了這些，其他文件還包含 Bootstrap 安裝包的定義文件、許可證文件和編譯腳本等。

編譯 CSS 和 JavaScript 文件

Bootstrap 使用 Grunt 作為編譯係統，並且對外提供了一些方便的方法用於編譯整個框架。下麵講解的就是如何編譯源碼、運行測試用例等內容。

安裝 Grunt

安裝 Grunt 前，你需要首先下載並安裝 node.js （npm 已經包含在內）。npm 是 node packaged modules 的簡稱，它的作用是基於 node.js 管理擴展包之間的依賴關係。

然後在命令行中輸入以下命令：

在全局環境中安裝 grunt-cli ：npm install -g grunt-cli 。

進入 /bootstrap/ 根目錄，然後執行 npm install 命令。npm 將讀取 package.json 文件並自動安裝此文件中列出的所有被依賴的擴展包。

上述步驟完成後，你就可以運行 Bootstrap 所提供的各個 Grunt 命令了。

可用的 Grunt 命令

grunt dist （僅編譯 CSS 和 JavaScript 文件）

重新生成 /dist/ 目錄，並將編譯壓縮後的 CSS 和 JavaScript 文件放入這個目錄中。作為一名 Bootstrap 用戶，大部分情況下你隻需要執行這一個命令。

grunt watch （監測文件的改變，並運行指定的 Grunt 任務）

監測 Less 源碼文件的改變，並自動重新將其編譯為 CSS 文件。

grunt test （運行測試用例）

在 PhantomJS 環境中運行 JSHint 和 QUnit 自動化測試用例。

grunt docs （編譯並測試文檔中的資源文件）

編譯並測試 CSS、JavaScript 和其他資源文件。在本地環境下通過 jekyll serve 運行 Bootstrap 文檔時需要用到這些資源文件。

grunt （重新構建所有內容並運行測試用例）

編譯並壓縮 CSS 和 JavaScript 文件、構建文檔站點、對文檔做 HTML5 校驗、重新生成定製工具所需的資源文件等，都需要 Jekyll 工具。這些隻有在你對 Bootstrap 深度研究時才有用。

除錯

如果你在安裝依賴包或者運行 Grunt 命令時遇到了問題，請首先刪除 npm 自動生成的 /node_modules/ 目錄，然後，再次運行 npm install 命令。