簡介
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。
Bootstrap 包的內容
- 基本結構：Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。這將在 Bootstrap 基本結構 部分詳細講解。
- CSS：Bootstrap 自帶以下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。這將在 Bootstrap CSS 部分詳細講解。
- 組件：Bootstrap 包含了十幾個可重用的組件，用於創建圖像、下拉菜單、導航、警告框、彈出框等等。這將在 布局組件 部分詳細講解。
- JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。這將在Bootstrap 插件 部分詳細講解。
- 定制：您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。
下載 Bootstrap
您可以從 http://getbootstrap.com/ 上下載 Bootstrap 的最新版本。當您點擊這個鏈接時，您將看到如下所示的網頁：
您會看到兩個按鈕：
- Download Bootstrap：下載 Bootstrap。點擊該按鈕，您可以下載 Bootstrap CSS、JavaScript 和字體的預編譯的壓縮版本。不包含文檔和最初的源代碼文件。
- Download Source：下載源代碼。點擊該按鈕，您可以直接從 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代碼。
引入所需的js和css文件
<!-- 新 Bootstrap 核心 CSS 文件 --> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <!-- 可選的Bootstrap主題文件（一般不使用） --> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script> <!-- jQuery文件。務必在bootstrap.min.js 之前引入 --> <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
注意：Jquey的文件必須在bootstrap.min.js之前引入、
第一個例子，Hello World
<!DOCTYPE html> <html> <head> <title>在線嘗試 Bootstrap 實例</title> <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> <h1>Hello, world!</h1> </body> </html>
Bootstrap 瀏覽器/設備支持
Bootstrap 可以在最新的桌面系統和移動端瀏覽器中很好的工作。
舊的瀏覽器可能無法很好的支持。
下表為 Bootstrap 支持最新版本的瀏覽器和平台：
| ChromeChrome | FirefoxFirefox | IEIE | OperaOpera | SafariSafari | |
|---|---|---|---|---|---|
| Android | YES | YES | 不適用 | NO | 不適用 |
| iOS | YES | 不適用 | 不適用 | NO | YES |
| Mac OS X | YES | YES | 不適用 | YES | YES |
| Windows | YES | YES | YES* | YES | NO |
* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 瀏覽器。
Bootstrap 表格
Bootstrap 提供了一個清晰的創建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
| 標簽 | 描述 |
|---|---|
| <table> | 為表格添加基礎樣式。 |
| <thead> | 表格標題行的容器元素（<tr>），用來標識表格列。 |
| <tbody> | 表格主體中的表格行的容器元素（<tr>）。 |
| <tr> | 一組出現在單行上的表格單元格的容器元素（<td> 或 <th>）。 |
| <td> | 默認的表格單元格。 |
| <th> | 特殊的表格單元格，用來標識列或行（取決於范圍和位置）。必須在 <thead> 內使用。 |
| <caption> | 關於表格存儲內容的描述或總結。 |
表格類
下表樣式可用於表格中：
| 類 | 描述 |
|---|---|
| .table | 為任意 <table> 添加基本樣式 (只有橫向分隔線) |
| .table-striped | 在 <tbody> 內添加斑馬線形式的條紋 ( IE8 不支持) |
| .table-bordered | 為所有表格的單元格添加邊框 |
| .table-hover | 在 <tbody> 內的任一行啟用鼠標懸停狀態 |
| .table-condensed | 讓表格更加緊湊 |
| 聯合使用所有表格類 | |
<tr>, <th> 和 <td> 類
下表的類可用於表格的行或者單元格：
| 類 | 描述 |
|---|---|
| .active | 將懸停的顏色應用在行或者單元格上 |
| .success | 表示成功的操作 |
| .info | 表示信息變化的操作 |
| .warning | 表示一個警告的操作 |
| .danger | 表示一個危險的操作 |
基本的表格
如果您想要一個只帶有內邊距（padding）和水平分割的基本表，請添加 class .table，如下面實例所示：
<!DOCTYPE html> <html> <head> <title>Bootstrap 實例 - 基本的表格</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <table class="table"> <caption>基本的表格布局</caption> <thead> <tr> <th>名稱</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> </tr> </tbody> </table> </body> </html>
結果如下
上下文類
下表中所列出的上下文類允許您改變表格行或單個單元格的背景顏色。
| 類類 | 描述描述描述 |
|---|---|
| .active | 對某一特定的行或單元格應用懸停顏色 |
| .success | 表示一個成功的或積極的動作 |
| .warning | 表示一個需要注意的警告 |
| .danger | 表示一個危險的或潛在的負面動作 |
這些類可被應用到 <tr>、<td> 或 <th>。
<!DOCTYPE html> <html> <head> <title>Bootstrap 實例 - 上下文類</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <table class="table"> <caption>上下文表格布局</caption> <thead> <tr> <th>產品</th> <th>付款日期</th> <th>狀態</th> </tr> </thead> <tbody> <tr class="active"> <td>產品1</td> <td>23/11/2013</td> <td>待發貨</td> </tr> <tr class="success"> <td>產品2</td> <td>10/11/2013</td> <td>發貨中</td> </tr> <tr class="warning"> <td>產品3</td> <td>20/10/2013</td> <td>待確認</td> </tr> <tr class="danger"> <td>產品4</td> <td>20/10/2013</td> <td>已退貨</td> </tr> </tbody> </table> </body> </html>
結果如下圖所示:
響應式表格
通過把任意的 .table 包在 .table-responsive class 內，您可以讓表格水平滾動以適應小型設備（小於 768px）。當在大於 768px 寬的大型設備上查看時，您將看不到任何的差別。
<!DOCTYPE html> <html> <head> <title>Bootstrap 實例 - 響應式表格</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="table-responsive"> <table class="table"> <caption>響應式表格布局</caption> <thead> <tr> <th>產品</th> <th>付款日期</th> <th>狀態</th> </tr> </thead> <tbody> <tr> <td>產品1</td> <td>23/11/2013</td> <td>待發貨</td> </tr> <tr> <td>產品2</td> <td>10/11/2013</td> <td>發貨中</td> </tr> <tr> <td>產品3</td> <td>20/10/2013</td> <td>待確認</td> </tr> <tr> <td>產品4</td> <td>20/10/2013</td> <td>已退貨</td> </tr> </tbody> </table> </div> </body> </html>
結果如下：
按鈕、在頁面插入代碼可看：http://www.cnblogs.com/0201zcr/p/4902930.html
Bootstrap學習（3）：http://www.cnblogs.com/0201zcr/p/4905234.html
致謝：感謝您的閱讀！