初學 Bootstrap 表格

ㅤㅤ發表於2018-10-23
boot

在 <table> 標籤新增 .table 類就可以給表格新增基本的樣式.

<table class="table">
    <thead><tr><th>編號</th><th>商品</th><th>數量</th></tr></thead>
    <tbody>
        <tr><td>1</td><td>蘋果</td><td>3</td></tr>
        <tr><td>2</td><td>西瓜</td><td>5</td></tr>
    </tbody>
    <tfoot><tr><td colspan="2">合計</td><td>8</td></tr></tfoot>
</table>

file
file
在上面兩張圖中,注意兩點,第一,表格是充滿了整個網頁的;第二,隨著網頁寬度變大,表格會自適應的變大.

透過新增 .table-striped 類可以使 <tbody> 中的行隔行變色.

<table class="table table-striped">
    <thead><tr><th>編號</th><th>商品</th><th>數量</th></tr></thead>
    <tbody>
        <tr><td>1</td><td>蘋果</td><td>3</td></tr>
        <tr><td>2</td><td>西瓜</td><td>5</td></tr>
        <tr><td>3</td><td>香蕉</td><td>1</td></tr>
        <tr><td>4</td><td>西柚</td><td>6</td></tr>
    </tbody>
    <tfoot><tr><td colspan="2">合計</td><td>15</td></tr></tfoot>
</table>

file

新增 .table-bordered 類可以給表格和單元格新增邊框,為了看到效果,我把表格放到一個容器中.

<div class="container">
    <table class="table table-striped table-bordered">
        <thead><tr><th>編號</th><th>商品</th><th>數量</th></tr></thead>
        <tbody>
            <tr><td>1</td><td>蘋果</td><td>3</td></tr>
            <tr><td>2</td><td>西瓜</td><td>5</td></tr>
            <tr><td>3</td><td>香蕉</td><td>1</td></tr>
            <tr><td>4</td><td>西柚</td><td>6</td></tr>
        </tbody>
        <tfoot><tr><td colspan="2">合計</td><td>15</td></tr></tfoot>
    </table>
</div>

file

新增 .table-hover 類可以讓 <tbody> 中的行實現滑鼠懸停變色.

<div class="container">
    <table class="table table-striped table-bordered table-hover">
        <thead><tr><th>編號</th><th>商品</th><th>數量</th></tr></thead>
        <tbody>
            <tr><td>1</td><td>蘋果</td><td>3</td></tr>
            <tr><td>2</td><td>西瓜</td><td>5</td></tr>
            <tr><td>3</td><td>香蕉</td><td>1</td></tr>
            <tr><td>4</td><td>西柚</td><td>6</td></tr>
        </tbody>
        <tfoot><tr><td colspan="2">合計</td><td>15</td></tr></tfoot>
    </table>
</div>

file
上圖中,滑鼠放在第二行上,所以第二行的顏色變得比較深.

<div class="container">
    <table class="table table-bordered">
        <thead> <tr><th>編號</th><th>商品</th><th>數量</th></tr></thead>
        <tbody>
            <tr><td>1</td><td>蘋果</td><td>3</td></tr>
            <tr><td>2</td><td>西瓜</td><td>5</td></tr>
        </tbody>
        <tfoot> <tr><td colspan="2">合計</td><td>8</td></tr></tfoot>
    </table>
    <table class="table table-bordered table-condensed">
        <thead><tr><th>編號</th><th>商品</th><th>數量</th></tr></thead>
        <tbody>
            <tr><td>1</td><td>蘋果</td><td>3</td></tr>
            <tr><td>2</td><td>西瓜</td><td>5</td></tr>
        </tbody>
        <tfoot><tr><td colspan="2">合計</td><td>8</td></tr></tfoot>
    </table>
</div>

file
在上圖中,注意第二個表格的行高比較小;第一個表格中的 <th> 以及 <td> 標籤的上下左右內邊距都是8 px;第二個表格中的是5 px.

  • .active 類可以使行或者單元格變成滑鼠懸停時的顏色(#F5F5F5 灰色).
  • .success 類可以使行或者單元格變成"成功綠"(#E2EFDA).
  • .info 類可以使行或者單元格變成"資訊藍"(#DCECF6).
  • .warning 類可以使行或者單元格變成"警告黃"(#FBF8E5).

  • .danger 類可以使行或者單元格變成"危險紅"(#EFDFDE).

    <div class="container">
<table class="table table-bordered">
    <thead> <tr><th>編號</th><th>商品</th><th>數量</th></tr></thead>
    <tbody>
        <tr class="active"><td>1</td><td>蘋果</td><td>3</td></tr>
        <tr class="success"><td>2</td><td>西瓜</td><td>5</td></tr>
        <tr class="info"><td>3</td><td>香蕉</td><td>1</td></tr>
        <tr class="warning"><td>4</td><td>西柚</td><td>6</td></tr>
        <tr class="danger"><td>5</td><td>芒果</td><td>2</td></tr>
    </tbody>
    <tfoot> <tr><td colspan="2">合計</td><td>17</td></tr></tfoot>
</table>

<table class="table table-bordered">
    <thead> <tr><th>編號</th><th>商品</th><th>數量</th></tr></thead>
    <tbody>
        <tr><td>1</td><td  class="success">蘋果</td><td class="info">3</td></tr>
        <tr><td class="warning">2</td><td class="danger">西瓜</td><td class="active">5</td></tr>
    </tbody>
    <tfoot> <tr><td colspan="2">合計</td><td>8</td></tr></tfoot>
</table>
</div>

    file

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章