Bootstrap响应式表格实例详解

Bootstrap是一个流行的前端开发框架，可以快速地开发出响应式的网站。其中一个功能是响应式表格，可以根据不同的屏幕尺寸自动调整表格的显示方式。本文将详细讲解如何使用Bootstrap创建响应式表格。

准备工作

首先需引入Bootstrap框架的CSS和JS文件。如下：

<!-- 引入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

<!-- 引入Bootstrap的JS文件 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

创建响应式表格

使用Bootstrap创建响应式表格非常简单，只需在<table>元素上添加.table和.table-responsive类即可。具体代码如下：

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>地址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>20</td>
                <td>男</td>
                <td>北京市海淀区</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>22</td>
                <td>女</td>
                <td>上海市浦东新区</td>
            </tr>
        </tbody>
    </table>
</div>

示例说明

示例1：添加表格样式

如果想为表格添加样式，可以使用Bootstrap提供的表格类，如.table-striped（斑马纹表格样式）、.table-bordered（带边框的表格样式）等。示例代码如下：

<div class="table-responsive">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>地址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>20</td>
                <td>男</td>
                <td>北京市海淀区</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>22</td>
                <td>女</td>
                <td>上海市浦东新区</td>
            </tr>
        </tbody>
    </table>
</div>

示例2：响应式表格列排序

Bootstrap可以为表格列添加排序功能，使用data-sortable="true"和data-order-by="column-name"属性即可。其中data-order-by="column-name"表示按照哪一列进行排序。示例代码如下：

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th data-sortable="true" data-order-by="id">编号</th>
                <th data-sortable="true" data-order-by="name">姓名</th>
                <th data-sortable="true" data-order-by="age">年龄</th>
                <th data-sortable="true" data-order-by="gender">性别</th>
                <th data-sortable="true" data-order-by="address">地址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>20</td>
                <td>男</td>
                <td>北京市海淀区</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>22</td>
                <td>女</td>
                <td>上海市浦东新区</td>
            </tr>
        </tbody>
    </table>
</div>

以上就是使用Bootstrap创建响应式表格的方法及示例说明。