Bootstrap表格模板有哪些实用样式？-网站模板-锦华智联科技

基础表格模板

这是最简单的表格,只需要将 .table 类添加到 <table> 标签即可。

（图片来源网络，侵删）

特点：

清晰的行间距和内边距。
基础的表格结构。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap 基础表格</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <h2>基础表格</h2>
    <p>默认的表格样式。</p>
    <table class="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">姓名</th>
                <th scope="col">邮箱</th>
                <th scope="col">城市</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>张三</td>
                <td>zhangsan@example.com</td>
                <td>北京</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>李四</td>
                <td>lisi@example.com</td>
                <td>上海</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>王五</td>
                <td>wangwu@example.com</td>
                <td>广州</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

增强型表格模板

通过添加辅助类,可以轻松美化表格，使其更具可读性。

常用辅助类：

（图片来源网络，侵删）

.table-striped: 为表格行添加 Zebra-stripes（斑马线）样式。
.table-bordered: 为所有单元格添加边框。
.table-hover: 鼠标悬停在行上时高亮显示。
.table-dark: 设置深色表格主题。
.table-responsive: 使表格在小屏幕上水平滚动（见下一节）。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap 增强型表格</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <h2>增强型表格</h2>
    <p>结合了条纹、边框和悬停效果。</p>
    <table class="table table-striped table-bordered table-hover">
        <thead class="table-light">
            <tr>
                <th scope="col">#</th>
                <th scope="col">产品</th>
                <th scope="col">价格</th>
                <th scope="col">库存</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>笔记本电脑</td>
                <td>¥5999</td>
                <td>25</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>无线鼠标</td>
                <td>¥99</td>
                <td>150</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>机械键盘</td>
                <td>¥399</td>
                <td>75</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

响应式表格模板

在移动设备上,表格可能会因为内容太宽而溢出屏幕，Bootstrap 提供了 .table-responsive 类来解决此问题。

特点：

在小屏幕（宽度小于 768px）上，表格容器会出现水平滚动条。
在大屏幕上,表格表现正常。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap 响应式表格</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 为了演示效果，让表格在小屏幕上更宽 */
        .table-responsive thead th {
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div class="container mt-5">
    <h2>响应式表格</h2>
    <p>在小屏幕上可以水平滚动查看完整内容。</p>
    <div class="table-responsive">
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">用户名</th>
                    <th scope="col">注册日期</th>
                    <th scope="col">最后登录时间</th>
                    <th scope="col">账户状态</th>
                    <th scope="col">个人简介</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">101</th>
                    <td>admin</td>
                    <td>2025-01-15</td>
                    <td>2025-10-27 10:30:00</td>
                    <td><span class="badge bg-success">活跃</span></td>
                    <td>这是一个非常长的个人简介，用于演示响应式表格在小屏幕上的表现。</td>
                </tr>
                <tr>
                    <th scope="row">102</th>
                    <td>user_john</td>
                    <td>2025-03-22</td>
                    <td>2025-10-26 18:45:00</td>
                    <td><span class="badge bg-warning text-dark">待激活</span></td>
                    <td>喜欢编程和阅读。</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

带功能性的表格模板 (使用 DataTables.net)

Bootstrap 本身不提供排序、搜索和分页功能，但可以非常方便地与第三方库集成。DataTables.net 是最流行的选择之一。

实现步骤：

引入 Bootstrap CSS 和 JS。
引入 DataTables 的 CSS 和 JS 文件。
初始化 DataTable。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap 功能性表格</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <style>
        .container {
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>功能性表格 (排序、搜索、分页)</h2>
    <p>此表格使用了 DataTables.net 插件。</p>
    <table id="exampleTable" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>姓名</th>
                <th>职位</th>
                <th>办公室</th>
                <th>年龄</th>
                <th>入职日期</th>
                <th>薪资</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <!-- 更多数据行... -->
        </tbody>
    </table>
</div>
<!-- Bootstrap JS (包含 Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- jQuery (DataTables 依赖) -->
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script>
    $(document).ready(function () {
        $('#exampleTable').DataTable({
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/zh.json' // 加载中文语言包
            }
        });
    });
</script>
</body>
</html>

深色模式表格模板

Bootstrap 5 对深色模式有很好的支持，只需在父元素上添加 data-bs-theme="dark" 即可。

特点：

自动适配深色背景和浅色文字。
表头、斑马线等样式都会自动调整。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap 深色模式表格</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5" data-bs-theme="dark">
    <h2>深色模式表格</h2>
    <p>在父容器上添加 <code>data-bs-theme="dark"</code> 即可。</p>
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">英雄</th>
                <th scope="col">称号</th>
                <th scope="col">阵营</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>雷神</td>
                <td>托尔</td>
                <td>阿斯加德</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>钢铁侠</td>
                <td>托尼·斯塔克</td>
                <td>复仇者联盟</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>美国队长</td>
                <td>史蒂夫·罗杰斯</td>
                <td>复仇者联盟</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

表格工具类速查表

类名	描述
`.table`	为 `<table>` 添加基本样式
`.table-striped`	为 `<tbody>` 的奇偶行添加斑马纹样式
`.table-bordered`	为所有单元格添加边框
`.table-hover`	鼠标悬停在行上时，高亮该行
`.table-dark`	设置深色表格主题（所有文字和背景）
`.table-responsive`	在小屏幕上使表格水平滚动
`.table-light`	设置浅色表格主题（覆盖 `.table-dark`）
`.align-middle`	在垂直方向上对齐单元格内容
`.text-start` / `.text-center` / `.text-end`	对齐单元格文本
`.table-success` / `.table-danger` / `.table-warning` 等	为行或单元格添加背景色

希望这份详细的指南能帮助您快速上手和使用 Bootstrap 表格！

Bootstrap表格模板有哪些实用样式？

目录

基础表格模板

增强型表格模板

响应式表格模板

带功能性的表格模板 (使用 DataTables.net)

深色模式表格模板

表格工具类速查表