当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Bootstrap table的基础用法

Bootstrap table的基础用法

2018年10月12日  | 移动技术网IT编程  | 我要评论

一、官方文档

 bootstrap 中文网：       

 bootstrap table 中文网 ： 

二、bootstrap table的引入

（一）下载

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

2.克隆或者 fork 通过 github。

3.cdn： 或者  提供了 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：通过  来安装和管理 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 });

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网