欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Bootstrap table的基础用法

程序员文章站 2022-06-24 15:33:54
一、官方文档 Bootstrap 中文网:http://www.bootcss.com/ Bootstrap Table 中文网 : http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 二、Bootstrap Table的引入 (一)下载 1.源码:包含了 ......

一、官方文档

 bootstrap 中文网:       

 bootstrap table 中文网 : 

二、bootstrap table的引入

(一)下载

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

2.克隆或者 fork 通过 github。

3.cdn:cdnjs 或者  提供了 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 });