Bootstrap框架-快速上手
什麼是 Bootstrap？
Bootstrap 是一個用於快速開發 Web 應用程式和網站的前端框架。由 Twitter 的 Mark Otto 和 Jacob Thornton 合作開發的一套HTML、CSS和JS框架。Bootstrap是基於HTML5和CSS3開發的，它在jQuery的基礎上進行了更為個性化和人性化的完善，形成一套自己獨有的網站風格，併兼容大部分jQuery外掛。用過HTML5和CSS3的人都知道，現在一些高大上的網站都少不了html5和css3。而Bootstrap正式基於這些設計出來的，它為我們封裝好了現成的CSS樣式合集。供咱們直接引用。
初次接觸，大家可以把它理解為一推css樣式合集即可。
Bootstrap 有什麼“過人之處”？
Bootstrap 內建樣式非常漂亮，而且夠用。與其把網站搞得花裡胡哨，不如一切從簡。Bootstrap 在 reset 瀏覽器樣式之餘，又添加了類 Twitter 的頁面元素，咱們要做的只是使用，肆無忌憚地、放心地用，不用琢磨這個行高、計算那個寬度、讓不小心忘記定義的頁面元素尷尬地顯示在頁面上。因為這些Twitter 已經為咱們考慮設計好了，
而且出自 Twitter 之手，畢竟經受了億萬使用者的考驗，外加 Twitter 強大的設計團隊的支援，更讓這套框架顯得與眾不同。
當然Bootstrap的好處不止如此，不然Bootstrap也不會一經發布，就迅速紅遍大江南北。
- 移動裝置優先：自 Bootstrap 3 起，框架包含了貫穿於整個庫的移動裝置優先的樣式。
- 瀏覽器支援：所有的主流瀏覽器都支援 Bootstrap。
- 容易上手：只要具備 HTML 和 CSS 的基礎知識，就可以開始學習 Bootstrap。下面會給出具體了例子，演示如何快速使用Bootstrap。
響應式設計：Bootstrap 的響應式 CSS 能夠自適應於桌上型電腦、平板電腦和手機。
最主要的一點原因，它不僅好，而且是開源的。
（關於響應式設計這塊是咱們web開發者將來所必所面對的，因為隨著各種移動裝置的不斷髮展，手機平板的盛行。這些移動裝置大有成為主流之勢。所以咱們必須要跟上潮流，搞好PC網站的同時也必須要考慮讓網站適應其他終端。 ）
Bootstrap的簡單使用
這一部分主要說明一下Bootstrap的環境安裝，檔案結構，並且通過一個demo演示如何使用Bootstrap。
首先下載Bootstrap的最新版本： http://v3.bootcss.com/getting-started/#download
Bootstrap 提供了兩種形式的壓縮包，在下載下來的壓縮包內可以看到以下目錄和檔案，這些檔案按照類別放到了不同的目錄內，並且提供了壓縮與未壓縮兩種版本。
下載壓縮包之後，將其解壓縮到任意目錄即可看到以下（壓縮版的）目錄結構：
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 的基本檔案結構：這裡提供了編譯好的 CSS 和 JS (bootstrap.) 檔案，還有經過壓縮的 CSS 和 JS (bootstrap.min.) 檔案。同時還提供了 CSS 原始碼對映表(bootstrap.*.map) ，可以在某些瀏覽器的開發工具中使用。同時還包含了來自 Glyphicons 的圖示字型，在附帶的 Bootstrap 主題中使用到了這些圖示。
關於壓縮版和未經壓縮版，使用的時候引用其中一個即可。
Demo
下面是使用了Bootstrap的html程式碼，給按鈕添加了一些Bootstrap樣式。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 例項 - 按鈕選項</title>
<!-- 新增對Bootstrap的引用 -->
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 標準的按鈕 -->
<button type="button" class="btn btn-default">預設按鈕</button>
<!-- 提供額外的視覺效果，標識一組按鈕中的原始動作 -->
<button type="button" class="btn btn-primary">原始按鈕</button>
<!-- 表示一個成功的或積極的動作 -->
<button type="button" class="btn btn-success">成功按鈕</button>
<!-- 資訊警告訊息的上下文按鈕 -->
<button type="button" class="btn btn-info">資訊按鈕</button>
<!-- 表示應謹慎採取的動作 -->
<button type="button" class="btn btn-warning">警告按鈕</button>
<!-- 表示一個危險的或潛在的負面動作 -->
<button type="button" class="btn btn-danger">危險按鈕</button>
<!-- 並不強調是一個按鈕，看起來像一個連結，但同時保持按鈕的行為 -->
<button type="button" class="btn btn-link">連結按鈕</button>
</body>
</html>
演示效果：
可以看到上面的html程式碼中沒有寫任何其他的css程式碼，完全是引用Bootstrap的按鈕樣式。其中關鍵程式碼部分： class=”btn btn-default” btn：繼承圓角灰色按鈕的預設外觀。 btn-default是預設/標準按鈕的樣式。 要想更換其他的樣式就更好其他的類即可，比如btn-danger 是危險按鈕。這些樣式都在bootstrap.min.css檔案中寫好的一些樣式，大家可以開啟檔案瀏覽一下。
就這樣在不知不覺中就完成了對Bootstrap的使用，其他控制元件也都是不同的一些class。在使用的時候注意經常檢視官方文件，收穫會很多。
另外，在引用Bootstrap的時候還需要特別注意一點：那就是jquery.min.js和bootstrap.min.js檔案的引用順序，
因為Bootstrap 的所有 JavaScript 外掛都依賴 jQuery，因此 jQuery 必須在 Bootstrap 之前引入。
關於Bootstrap的介紹先說這麼多，我也是第一次接觸到這個框架。但是通過這一個月的學習和使用情況來看，這套框架的確是有許許多多的優點，上手快、大大提高網頁前段的設計效率、和質量等等。能夠幫助我們以最短的時間搭建出一個高大上的網站。
後續會推出一些在專案具體使用過程中所遇問題的部落格，敬請期待。