正文

掌握Bootstrap：轻松编写美观实用的表格教程

/0 浏览量
0325

Bootstrap 是一个流行的前端框架，它提供了丰富的组件和工具，可以帮助开发者快速构建响应式、美观的网页。表格是网页中常见的一种元素，Bootstrap 提供了强大的表格组件，使得编写美观实用的表格变得简单快捷。以下是使用 Bootstrap 编写表格的详细教程。

1. 引入 Bootstrap

首先，在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JS 文件。可以从 Bootstrap 官网下载，或者使用 CDN 链接。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 表格教程</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

<!-- 表格内容 -->

<!-- 引入 Bootstrap JS 和依赖的 Popper.js 和 jQuery -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

2. 创建基本表格

Bootstrap 提供了两种基本表格样式：带有边框的表格和紧凑型表格。

2.1 带有边框的表格

<table class="table">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>20</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

2.2 紧凑型表格

<table class="table table-bordered table-sm">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>20</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

3. 表格样式

Bootstrap 提供了丰富的表格样式，如对齐方式、颜色、条纹等。

3.1 对齐方式

<table class="table table-bordered table-hover table-striped table-responsive">
    <thead>
        <tr>
            <th>编号</th>
            <th class="text-center">姓名</th>
            <th class="text-right">年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td class="text-center">张三</td>
            <td class="text-right">20</td>
        </tr>
        <tr>
            <td>2</td>
            <td class="text-center">李四</td>
            <td class="text-right">22</td>
        </tr>
    </tbody>
</table>

3.2 颜色

<table class="table table-bordered table-hover table-striped table-responsive table-primary">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>20</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

3.3 条纹

<table class="table table-bordered table-hover table-striped table-responsive table-bordered table-hover table-striped">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-active">
            <td>1</td>
            <td>张三</td>
            <td>20</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

4. 表格响应式

Bootstrap 提供了响应式表格，可以根据屏幕尺寸自动调整表格的布局。

<table class="table table-bordered table-hover table-striped table-responsive">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>20</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

5. 表格插件

Bootstrap 提供了表格插件，如排序、过滤等。

<table class="table table-bordered table-hover table-striped table-responsive" id="myTable">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>20</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

<script>
    $('#myTable').DataTable();
</script>

以上是使用 Bootstrap 编写美观实用的表格的教程。通过掌握这些技巧，你可以轻松地创建出符合设计需求的表格。

-- 展开阅读全文 --