Bootstrap table的基础用法

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 58 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/momo5477/p/9776361.html

文章标签：

#javascript #json #ViewUI

本文详细介绍如何在项目中引入并使用BootstrapTable，包括从官方网站下载、通过GitHub克隆、使用CDN或Bower安装，以及如何配置BootstrapTable以实现数据展示。文章还提供了通过data属性和JavaScript两种方式启用BootstrapTable的示例。

一、官方文档

Bootstrap 中文网：http://www.bootcss.com/

Bootstrap Table 中文网： http://bootstrap-table.wenzhixin.net.cn/zh-cn/

二、Bootstrap Table的引入

（一）下载

1.源码：包含了 css，JavaScript，多语言和扩展，以及文档。

http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/

2.克隆或者 Fork 通过 GitHub。

https://github.com/wenzhixin/bootstrap-table

3.CDN：CDNJS 或者 bootcss 提供了 CDN 来支持 Bootstrap table 的 CSS 和 JavaScript 文件链接。

1 <!-- Latest compiled and minified CSS -->
2 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
3 
4 <!-- Latest compiled and minified JavaScript -->
5 <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
6 
7 <!-- Latest compiled and minified Locales -->
8 <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>

4.Bower：通过 Bower 来安装和管理 Bootstrap table 的 CSS，JavaScript, 多语言和扩展。

1 $ bower install bootstrap-table

（二）引入

引入 Bootstrap 库（假如你的项目还没有使用）和 bootstrap-table.css 到 head 标签下。

1 <link rel="stylesheet" href="bootstrap.min.css">
2 <link rel="stylesheet" href="bootstrap-table.css">

引入 jQuery 库，bootstrap 库和 bootstrap-table.js 到 head 标签下或者在 body 标签关闭之前（一般建议这么做）。

1 <script src="jquery.min.js"></script>
2 <script src="bootstrap.min.js"></script>
3 <script src="bootstrap-table.js"></script>
4 <-- put your locale files after bootstrap-table.js -->
5 <script src="bootstrap-table-zh-CN.js"></script>

同时，还要引用相关的css。

需要注意的是bootstrap.css和bootstrap.js的版本需一致且不要低于3.3.5的版本；bootstrap-table及bootstrap 3.3.5依赖jquery的版本不要低于1.9.1。

三、使用

（一）通过data属性的方式

无需编写 JavaScript 启用 bootstrap table，对普通的 table 设置 data-toggle="table" 即可。

1 <table data-toggle="table" data-url="data1.json">
2     <thead>
3         <tr>
4             <th data-field="id">Item ID</th>
5             <th data-field="name">Item Name</th>
6             <th data-field="price">Item Price</th>
7         </tr>
8     </thead>
9 </table>

（二）通过 JavaScript 的方式

1 <table id="table"></table>

 1 $('#table').bootstrapTable({
 2     url: 'data1.json',
 3     columns: [{
 4         field: 'id',
 5         title: 'Item ID'
 6     }, {
 7         field: 'name',
 8         title: 'Item Name'
 9     }, {
10         field: 'price',
11         title: 'Item Price'
12     }, ]
13 });