一、官方文档

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 });

转载于:https://www.cnblogs.com/momo5477/p/9776361.html

Bootstrap table的基础用法相关推荐

bootstraptable 汇总_JS组件系列——表格组件神器：bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
bootstrapr表格父子框_JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）...
前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
二、bootstrap table 父子表和行列调序
http://blog.csdn.net/yin767833376/article/details/52153443 前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍 ...
【JS组件系列】——表格组件神器：bootstrap table（二：父子表和行列调序）
前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
前端table表格的用法
文章目录一.table的基础用法二.table属性三.合并单元格拓展总结一.table的基础用法代码如下: <table><tr>//第一行<td>第 ...
ABP+AdminLTE+Bootstrap Table权限管理系统第二节--在ABP的基础做数据库脚本处理
返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期第一点,上一篇文章中我们讲到codefirst中一些问题包括如图,codefirst在每次执行命令的时候会生成新的 ...
bootstrap table教程--使用入门基本用法
笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...
JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
一、bootstrap table 初体验
http://blog.csdn.net/yin767833376/article/details/52153487 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法 ...
bootstrapr表格父子框_JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】...
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...

Bootstrap table的基础用法