以下是正文。
Bootstrap 介紹
Bootstrap 是非常流行的前端框架。特點是：靈活簡潔、代碼優雅、美觀大方。它是由Twitter的兩名工程師 Mark Otto 和 Jacob Thornton 在2011年開發的。
簡單來說，Bootstrap 讓 Web 開發更簡單、更快捷。使用 Bootstrap 框架並不代表我們再開發時不用自己寫 CSS 樣式，而是不用謝絕大多數常見的樣式。
PS：Amaze UI 這個框架其實跟 Bootstrap 很像。
官網網站
V3版本：
V4版本：
列舉幾個用 Bootstrap 做的網站：
Bootstrap 版本
目前市面上使用的最多的是 3.x.x 版本。各個版本的介紹：
2.3.2版本：
2013年之後，停止維護；
支持更廣泛的瀏覽器
代碼不夠簡潔， 功能不夠多。
3.x.x 版本：
目前最新的穩定版本。
不支持 IE7 和早期的 Firefox
支持 IE8，單效果不好。
2015年8月發佈 4.0.0-alpha 的內部測試版。
版本號的普及：
alpha 版：內部測試版。α 是希臘字母的第一個，表示最早的版本，bug很多。主要是給開發和測試人員找 bug 用的。
beta 版：公開測試版。 主要是給“部落”用戶和忠實用戶測試用的。bug依然很多，但比 Alpha 版要穩定。這個階段的版本還會不斷增加新功能，如果你是發燒友，可以下載這個版本。
rc 版：候選版本（Release Candidate）。該版本不再增加新的功能。類似於最終發行版之前的預覽版（發行的候選版本）。此版本的發佈，預示着最終發行版即將到來。作爲普通用戶，如果很着急，也可以下載 rc 版。
stable 版：穩定版。在開源軟件中，都有 stable版本，這個是開源軟件的最終發行版，用戶可以放心大膽地使用。
Bootstrap 庫的下載
這裏我們以 Bootstrap V3.3.7 爲例。
進入中文官網，下載 用於生產環境的 Bootstrap，如下圖所示：
下載之後，解壓 bootstrap-3.3.7-dist ，有三個文件夾：
將其拷貝到工程文件的lib文件夾下即可。
PS：dist表示編譯之後的文件，這在庫文件中是很常見的。
因爲 bootstrap.js依賴jQuery，所以要先引用jquery.js 然後引用bootstrap.js。
Bootstrap 基礎模板的介紹
Bootstrap官網提供了基本模板，如下圖所示：
其完整版代碼 copy 如下：
<!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.0, user-scalable=no">
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>我的網站</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<!-- 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="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://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="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>我們需要對上面的代碼進行解釋。
（1）Compatible：
<meta http-equiv="X-UA-Compatible" content="IE=edge">解釋：設置瀏覽器的兼容模式版本。表示如果在IE瀏覽器下則使用最新的標準，渲染當前文檔。
（2）viewport 視口：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">解釋：聲明當前網頁在移動端瀏覽器中展示的相關設置。我們在做移動 web 開發時，就用上面這行代碼設置 viewport。
視口的作用：在移動瀏覽器中，當頁面寬度超出設備，瀏覽器內部虛擬的一個頁面容器，將頁面容器縮放到設備這麼大，然後展示。
需要注意的是：
- 目前大多數手機瀏覽器的視口（承載頁面的容器）寬度都是980；
- 視口的寬度可以通過meta標籤設置。
- 此屬性爲移動端頁面視口設置，上方代碼設置的值，表示在移動端頁面的寬度爲設備的寬度，並且不縮放（縮放級別爲1）
- width:視口的寬度
- initial-scale：初始化縮放
- user-scalable:是否允許用戶自行縮放（值可以寫成yes/no，也可以寫成1/0）
- minimum-scale:最小縮放。
- maximum-scale:最大縮放。
PS：如果設置了不允許用戶縮放，那麼最小縮放和最大縮放就沒有意義了。二者是矛盾的。
（3）條件註釋：
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->條件註釋的作用：當判斷條件滿足時，就會執行註釋中的HTML代碼，不滿足時會當做註釋忽略掉。
上方代碼的條件註釋中，引入了兩個腳本：
- html5shiv：讓瀏覽器可以識別 HTML5 的新標籤。如header、footer、section等。
- respond.js：讓低版本瀏覽器可以使用 CSS3 的媒體查詢。
另外，我們還需要引入下面這個庫：
- jQuery：Bootstrap框架中的所有 JS 組件都依賴於 jQuery 實現。
我們可以把上面這三個庫文件拷貝到 lib 文件夾中（注意引用的路徑要寫正確）。
使用 Bootstrap 搭建項目
1、工程文件的目錄結構
├─ Demo ·························· 項目所在目錄
└─┬─ /css/ ······················· 我們自己的CSS文件
├─ /font/ ······················ 使用到的字體文件
├─ /img/ ······················· 使用到的圖片文件
├─ /js/ ························ 自己寫的JS腳步
├─ /lib/ ······················· 從第三方下載回來的庫【只用不改】
├─ /favicon.ico ················ 站點圖標
└─ /index.html ················· 入口文件2、下載並引入 Bootstrap 庫文件
見上一段的講解。引入之後，另外還需要引入 html5shiv、respond、jQuery 這三個庫文件。
3、字符集、Viewport設置、瀏覽器兼容模式
我們將 Bootstrap 的基礎模板代碼 copy到項目的index.html中，這其中就包括最前面的三個meta標籤：
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->4、favicon（站點圖標）
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">5、引入相應的第三方文件
<!-- 引入 Bootstrap 的核心樣式文件（必須） -->
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<!-- 引入我們自己寫的 css 樣式文件-->
<link rel="stylesheet" href="css/my.css">
...
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/my.js"></script>注意，先引入第三方的文件，再引入我們自己寫的文件。
6、默認字體
在我們默認的樣式表中將默認字體設置爲：
body{
font-family: "Helvetica Neue",
Helvetica,
Microsoft Yahei,
Hiragino Sans GB,
WenQuanYi Micro Hei,
sans-serif;
}7、完成頁面空結構
先劃分好頁面中的大容器，然後在具體看每一個容器中單獨的情況。
完整代碼如下：
<!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, user-scalable=no">
<title>我的網站</title>
<!--建議：第三方引用的css庫放在上面，我們自己寫的文件，都放在下面-->
<!-- 引入 Bootstrap 的核心樣式文件（必須） -->
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<!-- 引入我們自己寫的 css 樣式文件-->
<link rel="stylesheet" href="css/main.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- 頭部區域 -->
<header id="header">
</header>
<!-- /頭部區域 -->
<!-- 廣告輪播 -->
<section id="main_ad"></section>
<!-- /廣告輪播 -->
<!-- 特色介紹 -->
<section></section>
<!-- /特色介紹 -->
<!-- 立即預約 -->
<section></section>
<!-- /立即預約 -->
<!-- 產品推薦 -->
<section></section>
<!-- /產品推薦 -->
<!-- 新聞列表 -->
<section></section>
<!-- /新聞列表 -->
<!-- 合作伙伴 -->
<section></section>
<!-- /合作伙伴 -->
<!-- 腳註區域 -->
<footer></footer>
<!-- /腳註區域 -->
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>
</html>CSS 樣式
全局 CSS 樣式在官網有介紹：
如果需要哪個樣式，直接根據文檔的指引，在相應的元素里加指定的類名即可。
我們選部分重要的來講一下。
佈局容器：container 類
截圖如下：
作用：用於定義一個固定寬度且居中的版心。只不過，這個版心的寬度具有響應式的效果。
也就是說，在 Bootstrap 中，我們一般用 .container 類來表示版心。
格式舉例：
<div class="topbar">
<div class="container">
<!--
此處的代碼會顯示在一個固定寬度且居中的容器中
該容器的寬度會跟隨屏幕的變化而變化
-->
</div>
</div>這個 container 類我們自己其實也可以寫，通過媒體查詢即可實現。
柵格參數
柵格系統最主要的操作是：利用 css 的響應式去做一套行列布局的預置樣式。
柵格參數如下：
我們尤其要記住各個屏幕的尺寸和類前綴。
組件
一個按鈕稱之爲樣式；兩個按鈕在一起，就可以稱之爲組件。
組件在官網有介紹：
我們現在需要關注的不是組件怎麼用，而是裏面有哪些組件，避免重複造輪子：別人已經做得很好了，不需要我們再重複。
JS 組件
JS 組件在官網有介紹：
這裏麪包含了很多帶交互的組件。比如輪播圖：
博主提供的下載鏈接
空結構的工程文件的下載地址：(lib文件夾裏包含了各種庫和 Bootstrap 中文文檔)
還是那句話：如果需要哪個樣式，直接根據文檔的指引，在相應的元素里加指定的類名即可。