# Bootstrap 4 學習筆記 (一) : 環境配置
# Bootstrap 4 學習筆記 (二) : 網格與容器
Bootstrap 教學文件參考 :
# 第 10 堂課 - 初探 bootstrap 網頁製作
# Bootstrap 初學介紹 #靜態篇
HTML 原始的表格醜醜的, 但如果簡單地套上 Bootstrap 的 table 表格樣式類別就會變得美美的. Bootstrap 設計了可套用於整體表格 (table 元素), 列 (tr 元素), 以及儲存格 (tr/th 元素) 之樣式類別 :
1. 套用在 table 元素的樣式類別 :
Bootstrap 提供了以 table 類別為主角的五種表格樣式類別, 這些都是套用到 table 元素的類別 :
| table 元素樣式類別 | 說明 |
| table | 套用在 table 元素上的 Bootstrap 表格預設樣式 |
| table-striped | 在 table 類別基礎上加上奇偶列背景顏色交替變換效果 |
| table-bordered | 在 table 類別基礎上加上顯示儲存格邊框樣式 |
| table-hover | 在 table 類別基礎上加上滑鼠滑過時變換背景色效果 |
| table-condensed | 在 table 類別基礎上加上儲存格大小緊縮效果 |
注意, 其中 table 是其他 4 種有 "-" 樣式類別的基礎, 亦即必須先套用 table 再套用有 "-" 的樣式類別, 例如 class="table table-stripped", 否則無效果. 其次, 樣式類別可套用多個, 例如 :
範例 1 : 表格測試 (1) 預設表格 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>股票名稱</th>
<th>股票代號</th>
<th>收盤價 (元)</th>
<th>成交量 (張)</th>
<th>股東會日期</th>
<th>董監改選</th>
<th>類股</th>
</tr>
</thead>
<tbody>
<tr>
<td>台積電</td>
<td>2330</td>
<td>123</td>
<td>4425119</td>
<td>2014-06-04</td>
<td>0</td>
<td>半導體</td>
</tr>
<tr>
<td>中華電</td>
<td>2412</td>
<td>96.4</td>
<td>5249</td>
<td>2014-06-15</td>
<td>0</td>
<td>通信</td>
</tr>
<tr>
<td>中碳</td>
<td>1723</td>
<td>192.5</td>
<td>918</td>
<td>2014-07-05</td>
<td>0</td>
<td>塑化</td>
</tr>
<tr>
<td>創見</td>
<td>2451</td>
<td>108</td>
<td>733</td>
<td>2014-06-30</td>
<td>0</td>
<td>模組</td>
</tr>
<tr>
<td>華擎</td>
<td>3515</td>
<td>118.5</td>
<td>175</td>
<td>2014-07-20</td>
<td>0</td>
<td>主機板</td>
</tr>
<tr>
<td>訊連</td>
<td>5203</td>
<td>97</td>
<td>235</td>
<td>2014-05-31</td>
<td>0</td>
<td>軟體</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
此例在 table 元素中設定 class="table" 套用 Bootstrap 預設表格樣式, 瀏覽結果如下 :
這張表格是我 2014 年測試 ExtJS 與 jQuery UI 時抓的資料, 看到當時台積電才 123 元, 對比現在突破 300 元的高價, 當初若不嫌 123 元貴該有多好.
下面是套用 class="table table-striped" 的效果 :
範例 2 : 表格測試 (2) 奇偶列顏色交替效果 [看原始碼]
下面是套用 class="table table-bordered" 的效果 :
範例 3 : 表格測試 (3) 顯示儲存格邊框 [看原始碼]
下面是套用 class="table table-hover" 的效果 :
範例 4 : 表格測試 (4) 滑鼠滑過時變換列背景色 [看原始碼]
下面是套用 class="table table-condensed" 的效果 :
範例 5 : 表格測試 (5) 緊縮儲存格大小 [看原始碼]
可見 table-condensed 與 table 幾乎是一樣的, 差別只是儲存格較緊密而已. 下面是套用 class="table table-bordered table-hover table-condensed" 多重樣式的範例 :
範例 6 : 表格測試 (6) 顯示儲存格邊框 [看原始碼]
2. 套用在 tr/th/td 元素的樣式類別 :
除了上面那些套用到 table 元素影響整個表格的樣式外, Bootstrap 還有一組可套用到列元素 tr, 以及單一儲存格 td 與 th 的樣式類別, 如下表所示 :
| tr/th/td 元素樣式類別 | 說明 |
| active | 將列 tr 或儲存格 td/th 背景色設為灰色, 表示啟用 |
| success | 將列 tr 或儲存格 td/th 背景色設為綠色, 表示成功 |
| info | 將列 tr 或儲存格 td/th 背景色設為藍色, 表示訊息 |
| warning | 將列 tr 或儲存格 td/th 背景色設為黃色, 表示警告 |
| danger | 將列 tr 或儲存格 td/th 背景色設為紅色, 表示危險 |
範例 7 : 表格測試 (7) 顯示儲存格邊框 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>股票名稱</th>
<th>股票代號</th>
<th>收盤價 (元)</th>
<th>成交量 (張)</th>
<th>股東會日期</th>
<th>董監改選</th>
<th>類股</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>台積電</td>
<td>2330</td>
<td>123</td>
<td>4425119</td>
<td>2014-06-04</td>
<td>0</td>
<td>半導體</td>
</tr>
<tr class="success">
<td>中華電</td>
<td>2412</td>
<td>96.4</td>
<td>5249</td>
<td>2014-06-15</td>
<td>0</td>
<td>通信</td>
</tr>
<tr class="info">
<td>中碳</td>
<td>1723</td>
<td>192.5</td>
<td>918</td>
<td>2014-07-05</td>
<td>0</td>
<td>塑化</td>
</tr>
<tr class="warning">
<td>創見</td>
<td>2451</td>
<td>108</td>
<td>733</td>
<td>2014-06-30</td>
<td>0</td>
<td>模組</td>
</tr>
<tr class="danger">
<td>華擎</td>
<td>3515</td>
<td>118.5</td>
<td>175</td>
<td>2014-07-20</td>
<td>0</td>
<td>主機板</td>
</tr>
<tr>
<td>訊連</td>
<td>5203</td>
<td>97</td>
<td>235</td>
<td>2014-05-31</td>
<td>0</td>
<td>軟體</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
瀏覽結果如下 :
另外還有一個套用在容器, 不是套用在表格本身, 但對表格的呈現有關的響應式表格樣式類別 table-responsive, 其作用是當表格寬度大於瀏覽器寬度時會產生水平捲軸; 當表格高度大於瀏覽器高度時會產生垂直捲軸, 如下面範例所示 :
範例 8 : 表格測試 (8) 自適應表格 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>股票名稱</th>
<th>股票代號</th>
<th>收盤價 (元)</th>
<th>成交量 (張)</th>
<th>股東會日期</th>
<th>董監改選</th>
<th>類股</th>
</tr>
</thead>
<tbody>
<tr>
<td>台積電</td>
<td>2330</td>
<td>123</td>
<td>4425119</td>
<td>2014-06-04</td>
<td>0</td>
<td>半導體</td>
</tr>
<tr>
<td>中華電</td>
<td>2412</td>
<td>96.4</td>
<td>5249</td>
<td>2014-06-15</td>
<td>0</td>
<td>通信</td>
</tr>
<tr>
<td>中碳</td>
<td>1723</td>
<td>192.5</td>
<td>918</td>
<td>2014-07-05</td>
<td>0</td>
<td>塑化</td>
</tr>
<tr>
<td>創見</td>
<td>2451</td>
<td>108</td>
<td>733</td>
<td>2014-06-30</td>
<td>0</td>
<td>模組</td>
</tr>
<tr>
<td>華擎</td>
<td>3515</td>
<td>118.5</td>
<td>175</td>
<td>2014-07-20</td>
<td>0</td>
<td>主機板</td>
</tr>
<tr>
<td>訊連</td>
<td>5203</td>
<td>97</td>
<td>235</td>
<td>2014-05-31</td>
<td>0</td>
<td>軟體</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
此例在容器樣式類別後面加上 table-responsive 類別後, 將瀏覽器縮小至比表格還小時就會出現垂直與水平捲軸了 :
太寬的表格只能用自適應方式使用捲軸來處理, 在小螢幕裝置上也是不得已的辦法.
沒有留言:
張貼留言