Bootstrap table的基础用法

一、官方文档

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 文件链接。

 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">

 <!-- Latest compiled and minified JavaScript -->
 <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>

 <!-- Latest compiled and minified Locales -->
 <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, 多语言和扩展。

$ bower install bootstrap-table

（二）引入

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

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

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

 <script src="jquery.min.js"></script>
 <script src="bootstrap.min.js"></script>
 <script src="bootstrap-table.js"></script>
 <-- put your locale files after bootstrap-table.js -->
 <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" 即可。

 <table data-toggle="table" data-url="data1.json">
     <thead>
         <tr>
             <th data-field="id">Item ID</th>
             <th data-field="name">Item Name</th>
             <th data-field="price">Item Price</th>
         </tr>
     </thead>
 </table>

（二）通过 JavaScript 的方式

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

 $('#table').bootstrapTable({
     url: 'data1.json',
     columns: [{
         field: 'id',
         title: 'Item ID'
     }, {
         field: 'name',
         title: 'Item Name'
     }, {
         field: 'price',
         title: 'Item Price'
     }, ]
 });