Bootstrap中文網
在簡書上看到的一篇不錯的關于bootstrap的文章。
另一篇Bootstrap快速入門
1.bootstrap概述
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局、移動設備優先的 WEB 項目。
- 為所有開發者、所有應用場景而設計。
- Bootstrap 讓前端開發更快速、簡單。所有開發者都能快速上手、所有設備都可以適配、所有項目都適用。
作為Web前端開發框架，Bootstrap集成了HTML標記、CSS樣式以及JavaScript行為，使得開發人員、設計人員不再像過去周而復始地寫模板、樣式、交互效果，極大地節約了時間，提高了開發效率。它使用了最新的瀏覽器技術，可以提供精致的網頁排版方式以及表單、按鈕、表格、網格 柵格化、導航等諸多元素，輕松地創造令人愉快的設計效果。
下載
下載 Bootstrap
Bootstrap （當前版本 v3.3.0）提供以下幾種方式幫你快速上手，每一種方式針對具有不同技能等級的開發者和不同的使用場景。
用于生產環境的 Bootstrap
編譯并壓縮后的 CSS、JavaScript 和字體文件。不包含文檔和源碼文件。
下載 Bootstrap
Bootstrap 源碼
Less、JavaScript 和 字體文件的源碼，并且帶有文檔。需要 Less 編譯器和一些設置工作。
下載源碼
Sass
這是 Bootstrap 從 Less 到 Sass 的源碼移植項目，用于快速地在 Rails、Compass 或 只針對 Sass 的項目中引入。
下載 Sass 項目
通過 Bower 進行安裝
通過Bower可以安裝并管理 Bootstrap 的Less、CSS、JavaScript和字體文件。
$ bower install bootstrap
包含的內容
Bootstrap 提供了兩種形式的壓縮包，在下載下來的壓縮包內可以看到以下目錄和文件，這些文件按照類別放到了不同的目錄內，并且提供了壓縮與未壓縮兩種版本。
Bootstrap 插件全部依賴 jQuery
請注意，Bootstrap 的所有 JavaScript 插件都依賴 jQuery，因此 jQuery 必須在 Bootstrap 之前引入，就像在基本模版中所展示的一樣。在bower.json文件中列出了 Bootstrap 所支持的 jQuery 版本。
預編譯版
下載壓縮包之后，將其解壓縮到任意目錄即可看到以下（壓縮版的）目錄結構：
這是最基本的 Bootstrap 文件組織形式：未壓縮版的文件可以在任意web項目中直接使用。我們同時提供了壓縮（bootstrap.min.*）與未壓縮 (bootstrap.*) 的 CSS 和 JS 文件。字體圖標文件來自于 Glyphicons。
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(Build & test the docs assets)
Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally viajekyll serve
grunt （重新構建所有內容并運行測試用例）
編譯并壓縮 CSS 和 JavaScript 文件、構建文檔站點、對文檔做 HTML5 校驗、重新生成定制工具所需的資源文件等，都需要Jekyll工具。這些只有在你對 Bootstrap 深度研究時才有用。
除錯如果你在安裝依賴包或者運行 Grunt 命令時遇到了問題，請首先刪除 npm 自動生成的/node_modules/目錄，然后，再次運行npm install命令。
2.基本模板
使用以下給出的這份超級簡單的 HTML 模版，或者修改這些實例。我們強烈建議你對這些實例按照自己的需求進行修改，而不要簡單的復制、粘貼。
拷貝并粘貼下面給出的 HTML 代碼，這就是一個最簡單的 Bootstrap 頁面了。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
