首頁 > 開發者 > JavaScript
Bootstrap 學習（1），bootstrap學習
簡介
Bootstrap，來自 Twitter，是目前最受歡迎的前端架構。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。
Bootstrap 包的內容
您可以從 http://getbootstrap.com/ 上下載 Bootstrap 的最新版本。當您點擊這個連結時，您將看到如下所示的網頁：
您會看到兩個按鈕：
引入所需的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 Store內容的描述或總結。 |
下表樣式可用於表格中：
| 類 | 描述 |
|---|---|
| .table | 為任意 <table> 添加基本樣式 (只有橫向分隔線) |
| .table-striped | 在 <tbody> 內添加斑馬線形式的條紋 ( IE8 不支援) |
| .table-bordered | 為所有表格的儲存格添加邊框 |
| .table-hover | 在 <tbody> 內的任一行啟用滑鼠移至上方狀態 |
| .table-condensed | 讓表格更加緊湊 |
| 聯合使用所有表格類 | |
下表的類可用於表格的行或者儲存格：
| 類 | 描述 |
|---|---|
| .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
致謝：感謝您的閱讀！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
