bootstrap table 快速入门

bootstrap是一个简单易学，且非常好用的web框架，并且一次开发可以在不同的设备，如：web、手机等设备上显示。另外，bootstrap也提供了很多额外的小工具供大家使用，下面主要来介绍一下bootstrap table的使用

bootstrap与bootstrap table的区别
在讲bootstrap table之间，如果学过bootstrap的小伙伴应该知道，bootstrap中原本就自带了table，那我们为什么还要重新学习bootstrap table呢？
首先，bootstrap自带的table其实和html中的table类似，它们都是用来展示数据用的，顺便再带点样式。 官方文档地址： http://v3.bootcss.com/css/#tables
而bootstrap table的功能就多多了，它除了用来展示数据，还可以对数据的每一行或每一列添加一些额外的行为或属性。官方文档地址： http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

如何使用？
从官网上下载最新的源代码 http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/
然后对解压文件，主要包含以下一些文件


  
 
导入资源，可以把css文件放在head标签下，把js文件放在body关闭标签之前

<linkrel="stylesheet"href="bootstrap.min.css">
<linkrel="stylesheet"href="bootstrap-table.css">
<scriptsrc="jquery.min.js"></script>
<scriptsrc="bootstrap.min.js"></script>
<scriptsrc="bootstrap-table.js"></script>
<scriptsrc="bootstrap-table-zh-CN.js"></script>

可以使用html方式来构造table，也可以使用js来构造table(推荐使用)
          html方式构造

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

js方式构造
<tableid="table"></table>

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