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/

如何使用？

1. 从官网上下载最新的源代码 http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/

2. 然后对解压文件，主要包含以下一些文件

    

3. 导入资源，可以把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>

4. 可以使用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'},]});