2019年11月20日 星期三

Bootstrap 4 學習筆記 (三) : 表格

測試完網格與容器後, 我認為窮寇要追, 打鐵要趁熱, 緊接著要測試的是呈現資料集最常用的介面-表格, 本系列之前的測試文章參考 :

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 類別後, 將瀏覽器縮小至比表格還小時就會出現垂直與水平捲軸了 :




太寬的表格只能用自適應方式使用捲軸來處理, 在小螢幕裝置上也是不得已的辦法.

沒有留言 :