微客导航 » 文章资讯 » bootstrap table使用入门基本用法

bootstrap table使用入门基本用法

2024-02-22 16:42:03 152

笔者在查询bootstraptable资料的时候，看了很多文章，发觉很多文章都写了关于如何使用bootstraptable的例子，当然最好的例子还是官网。但是对于某部分技术人员来说，入门还是不够详细，故有了下列的文章。希望我的文章能给大家带来帮助。

bootstrap-table作为常用的TABLE显示控件，会经常出现在各位的项目当中。

使用步骤如下：

第一步：下载bootstrap-table需要使用的文件（包括Cssandjs文件）

官方网址 http://bootstrap-table.wenzhixin.net.cn/

下载后解压后可以看到如下目录格式

bootstrap-table/
├──dist/
│ ├──extensions/
│ ├──locale/
│ ├──bootstrap-table.min.css
│ └──bootstrap-table.min.js
├──docs/
└──src/
├──extensions/
├──locale/
├──bootstrap-table.css
└──bootstrap-table.js

第二步：在html页面或者其他页面中添加如下CSS和JS的标签

注意：CSS文件和JS文件在下载文件夹中均可以找到

最好的做法，是自己定义好CSS和JS摆放的位置，例如在你根目录下建立bootstrap-table文件夹，里面再分css和js文件夹，将文件copy到对应的目录

第三步：放入table的标签

第四步：编写js代码

第五步：编写数据来源文件

该例子是直接使用json文件来实现数据来源，其实大家可以使用其他编程语言，例如phpjsp等等来实现json的输出。

data1.json文件内容如下

[{id:"1",title:"meetweb"},{id:"2",title:"learnbootstraptable"}]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

bootstrap table使用入门基本用法

热门推荐

随机推荐