Bootstrap全域性樣式 - 表格

weixin_33913332發表於2017-06-08
boot

知識點

表格樣式
.table -----> 賦予基本的樣式，少量的內補（padding）和水平方向的分隔線；
.table-striped -----> 條紋狀表格，可以給 <tbody> 之內的每一行增加斑馬條紋樣式；
.table-bordered -----> 帶邊框的表格，為表格和其中的每個單元格增加邊框；
.table-hover -----> 滑鼠懸停，讓 <tbody> 中的每一行對滑鼠懸停狀態作出響應；
.table-condensed -----> 讓表格更加緊湊，單元格中的內補（padding）均會減半；

狀態類
.active -----> 滑鼠懸停在行或單元格上時所設定的顏色
.success -----> 標識成功或積極的動作
.info -----> 標識普通的提示資訊或動作
.warning -----> 標識警告或需要使用者注意
.danger -----> 標識危險或潛在的帶來負面影響的動作

響應式表格
將任何 .table 元素包裹在 .table-responsive 元素內，即可建立響應式表格，其會在小螢幕裝置上（小於768px）水平滾動。當螢幕大於 768px 寬度時，水平滾動條消失。

垂直方向的內容截斷：

響應式表格使用了 overflow-y: hidden 屬性，這樣就能將超出表格底部和頂部的內容截斷。特別是，也可以截斷下拉選單和其他第三方元件。

Firefox 和 fieldset 元素：

Firefox 瀏覽器對 fieldset 元素設定了一些影響 width 屬性的樣式，導致響應式表格出現問題。可以使用下面提供的針對 Firefox 的 hack 程式碼解決，這些程式碼並未整合在 Bootstrap 中，我們需要自己新增到自己的程式碼中。

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

實踐

1683603-bc5c674720af2e40.png
table
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>表格</title>
<meta name="Resource-type" content="Document" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style>
    <!--
    .example-padding p{padding:15px;}
    -->
</style>
</head>
<body>
<div class="container example-padding table-responsive">
    <p class="bg-primary">基本表格樣式</p>
    <table class="table">
        <thead>
        <tr>
            <th colspan="2">.table 基本表格樣式</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>name1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>name2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>name3</td>
        </tr>
        </tbody>
    </table>

    <table class="table table-striped">
        <thead>
        <tr>
            <th colspan="2">.table  .table-striped 條紋狀表格</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>name1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>name2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>name3</td>
        </tr>
        </tbody>
    </table>

    <table class="table table-bordered">
        <thead>
        <tr>
            <th colspan="2">.table  .table-bordered 帶邊框的表格</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>name1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>name2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>name3</td>
        </tr>
        </tbody>
    </table>

    <table class="table table-hover">
        <thead>
        <tr>
            <th colspan="2">.table  .table-hover 滑鼠懸停狀態</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>name1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>name2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>name3</td>
        </tr>
        </tbody>
    </table>

    <table class="table table-condensed">
        <thead>
        <tr>
            <th colspan="2">.table  .table-condensed 表格更緊湊，padding減半</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>name1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>name2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>name3</td>
        </tr>
        </tbody>
    </table>

    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
        <tr>
            <th colspan="2">所有樣式集合</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>name1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>name2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>name3</td>
        </tr>
        </tbody>
    </table>

    <p class="bg-primary">狀態類</p>
    <table class="table">
        <tbody>
        <tr class="active">
            <td>active</td>
            <td>滑鼠懸停在行或單元格上時所設定的顏色</td>
        </tr>
        <tr class="success">
            <td>success</td>
            <td>標識成功或積極的動作</td>
        </tr>
        <tr class="infor">
            <td>infor</td>
            <td>標識普通的提示資訊或動作</td>
        </tr>
        <tr class="warning">
            <td>warning</td>
            <td>標識警告或需要使用者注意</td>
        </tr>
        <tr class="danger">
            <td>danger</td>
            <td>標識危險或潛在的帶來負面影響的動作</td>
        </tr>
        </tbody>
    </table>

</div>

</body>
</html>

相關文章