Bootstrap 表格库教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01171/article/details/141009803

Bootstrap 表格库教程

bootstrap-tablewenzhixin/bootstrap-table: 是一个基于 Bootstrap 的表格插件，它没有使用数据库。适合用于数据展示，特别是对于需要使用 Bootstrap 和表格展示的场景。特点是表格插件、Bootstrap、无数据库。项目地址:https://gitcode.com/gh_mirrors/bo/bootstrap-table

1. 项目介绍

Bootstrap Table 是一个扩展表格组件，专门用于集成到一些广泛使用的CSS框架中，如Bootstrap、Semantic UI、Bulma和Material Design Foundation。它提供了丰富的功能，包括排序、分页、过滤和自定义列等。该项目由@wenzhixin维护并更新。

2. 项目快速启动

安装

通过npm或yarn进行安装：

# 使用npm
npm install bootstrap-table

# 或者使用yarn
yarn add bootstrap-table

引入资源

在HTML文件中引入Bootstrap Table的CSS和JavaScript文件（确保先引入Bootstrap本身）：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="path/to/bootstrap.min.css">
    <link rel="stylesheet" href="path/to/bootstrap-table.min.css">
</head>
<body>
    <!-- 在这里添加你的表格 -->
    
    <script src="path/to/jquery.min.js"></script>
    <script src="path/to/bootstrap.min.js"></script>
    <script src="path/to/bootstrap-table.min.js"></script>
    <script>
        $(function() {
            $('#myTable').bootstrapTable();
        });
    </script>
</body>
</html>

创建基本表格

<table id="myTable" data-toggle="table">
    <thead>
        <tr>
            <th data-field="id">ID</th>
            <th data-field="name">Name</th>
            <th data-field="price">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Item 1</td>
            <td>$1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Item 2</td>
            <td>$2</td>
        </tr>
    </tbody>
</table>