随笔- 131 文章- 0 评论- 2 阅读- 54098

BootStrapUI--表格

前言

　　制作页面总有些便捷方式，让我们免于调节。介绍一下BootStrap表格。

　　BoopStrap官网：https://www.bootcss.com/

　　引入HTML：

1     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
2     <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
3         integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
4 
5     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
6     <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
7         integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
8         crossorigin="anonymous">
9     </script>

1. 基本实例

　　介绍：给<table>添加.table样式来优化。

　　代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>


    <!-- 引入UI -->
     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
     <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
         integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
 
     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
     <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
         integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
         crossorigin="anonymous">
     </script>

</head>
<body>
    <div class="box">

        <!-- 此处放表格哦~ -->
        <!-- 表格--基本实例 -->
        <table class="table">
            <!-- 表头 -->
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>所属</th>
                </tr>
            </thead>
            <!-- 表体 -->
            <tbody>
                <tr>
                    <td>2001001</td>
                    <td>刘备</td>
                    <td>20</td>
                    <td>男</td>
                    <td>蜀国</td>
                </tr>
                <tr>
                    <td>2001002</td>
                    <td>曹阿瞒</td>
                    <td>24</td>
                    <td>男</td>
                    <td>魏国</td>
                </tr>
                <tr>
                    <td>2001003</td>
                    <td>大乔</td>
                    <td>18</td>
                    <td>女</td>
                    <td>吴国</td>
                </tr>
            </tbody>
          </table>
    </div>
</body>
</html>

　　视图：

2. 条纹状表格

　　介绍：通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

　　代码：

        <!-- 此处放表格哦~ -->
        <!-- 表格--条纹状表格 -->
        <table class="table table-striped">
            <!-- 表头 -->
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>所属</th>
                </tr>
            </thead>
            <!-- 表体 -->
            <tbody>
                <tr>
                    <td>2001001</td>
                    <td>刘备</td>
                    <td>20</td>
                    <td>男</td>
                    <td>蜀国</td>
                </tr>
                <tr>
                    <td>2001002</td>
                    <td>曹阿瞒</td>
                    <td>24</td>
                    <td>男</td>
                    <td>魏国</td>
                </tr>
                <tr>
                    <td>2001003</td>
                    <td>大乔</td>
                    <td>18</td>
                    <td>女</td>
                    <td>吴国</td>
                </tr>
            </tbody>
          </table>

　　视图：

3. 带边框表格

　　介绍：添加 .table-bordered 类为表格和其中的每个单元格增加边框。

　　代码：

        <!-- 此处放表格哦~ -->
        <!-- 表格--带边框的表格 -->
        <table class="table table-bordered">
            <!-- 表头 -->
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>所属</th>
                </tr>
            </thead>
            <!-- 表体 -->
            <tbody>
                <tr>
                    <td>2001001</td>
                    <td>刘备</td>
                    <td>20</td>
                    <td>男</td>
                    <td>蜀国</td>
                </tr>
                <tr>
                    <td>2001002</td>
                    <td>曹阿瞒</td>
                    <td>24</td>
                    <td>男</td>
                    <td>魏国</td>
                </tr>
                <tr>
                    <td>2001003</td>
                    <td>大乔</td>
                    <td>18</td>
                    <td>女</td>
                    <td>吴国</td>
                </tr>
            </tbody>
        </table>

　　视图：

　　有时候会因为浏览器兼容不会显示完整，可切换浏览器试试。

4. 鼠标悬浮

　　介绍：通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

　　代码：

        <!-- 此处放表格哦~ -->
        <!-- 表格--鼠标悬浮 -->
        <table class="table table-hover">
            <!-- 表头 -->
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>所属</th>
                </tr>
            </thead>
            <!-- 表体 -->
            <tbody>
                <tr>
                    <td>2001001</td>
                    <td>刘备</td>
                    <td>20</td>
                    <td>男</td>
                    <td>蜀国</td>
                </tr>
                <tr>
                    <td>2001002</td>
                    <td>曹阿瞒</td>
                    <td>24</td>
                    <td>男</td>
                    <td>魏国</td>
                </tr>
                <tr>
                    <td>2001003</td>
                    <td>大乔</td>
                    <td>18</td>
                    <td>女</td>
                    <td>吴国</td>
                </tr>
            </tbody>
        </table>

　　视图：

5. 紧缩表格

　　介绍：通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

　　代码：

        <!-- 此处放表格哦~ -->
        <!-- 表格--紧缩表格 -->
        <table class="table table-condensed">
            <!-- 表头 -->
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>所属</th>
                </tr>
            </thead>
            <!-- 表体 -->
            <tbody>
                <tr>
                    <td>2001001</td>
                    <td>刘备</td>
                    <td>20</td>
                    <td>男</td>
                    <td>蜀国</td>
                </tr>
                <tr>
                    <td>2001002</td>
                    <td>曹阿瞒</td>
                    <td>24</td>
                    <td>男</td>
                    <td>魏国</td>
                </tr>
                <tr>
                    <td>2001003</td>
                    <td>大乔</td>
                    <td>18</td>
                    <td>女</td>
                    <td>吴国</td>
                </tr>
            </tbody>
        </table>

　　视图：

6. 状态类

　　介绍：通过这些状态类可以为行或单元格设置颜色。

Class	描述
`.active`	鼠标悬停在行或单元格上时所设置的颜色
`.success`	标识成功或积极的动作
`.info`	标识普通的提示信息或动作
`.warning`	标识警告或需要用户注意
`.danger`	标识危险或潜在的带来负面影响的动作

　　代码：

        <!-- 此处放表格哦~ -->
        <div class="container">
            <!-- 表格--响应式表格 -->
            <table class="table table-bordered">
                <!-- 表头 -->
                <thead>
                    <tr>
                        <th class="active">id</th>
                        <th class="success">姓名</th>
                        <th class="warning">年龄</th>
                        <th class="danger">性别</th>
                        <th class="info">所属</th>
                    </tr>
                </thead>
                <!-- 表体 -->
                <tbody>
                    <tr>
                        <td  class="active">2001001</td>
                        <td class="success">刘备</td>
                        <td class="warning">20</td>
                        <td class="danger">男</td>
                        <td class="info">蜀国</td>
                    </tr>
                    <tr>
                        <td  class="active">2001002</td>
                        <td class="success">曹阿瞒</td>
                        <td class="warning">24</td>
                        <td class="danger">男</td>
                        <td class="info">魏国</td>
                    </tr>
                    <tr>
                        <td  class="active">2001003</td>
                        <td class="success">大乔</td>
                        <td class="warning">18</td>
                        <td class="danger">女</td>
                        <td class="info">吴国</td>
                    </tr>
                </tbody>
            </table>
        </div>

　　视图：

7. 响应式表格

　　介绍：将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

　　代码：

        <!-- 此处放表格哦~ -->
        <div class="table-responsive">
            <!-- 表格--响应式表格 -->
            <table class="table table-bordered">
                <!-- 表头 -->
                <thead>
                    <tr>
                        <th>id</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>所属</th>
                    </tr>
                </thead>
                <!-- 表体 -->
                <tbody>
                    <tr>
                        <td>2001001</td>
                        <td>刘备</td>
                        <td>20</td>
                        <td>男</td>
                        <td>蜀国</td>
                    </tr>
                    <tr>
                        <td>2001002</td>
                        <td>曹阿瞒</td>
                        <td>24</td>
                        <td>男</td>
                        <td>魏国</td>
                    </tr>
                    <tr>
                        <td>2001003</td>
                        <td>大乔</td>
                        <td>18</td>
                        <td>女</td>
                        <td>吴国</td>
                    </tr>
                </tbody>
            </table>
        </div>