bootstrap table使用入门基本用法

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

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

使用步骤如下:

第一步:

下载bootstrap-table需要使用的文件包括Css and js文件

官方网址 nofollow" href="http://bootstrap-table.wenzhixin.net.cn/">http://bootstrap-table.wenzhixin.net.cn/

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

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文件在下载文件夹中均可以找到

rush:xhtml;">
rush:xhtml;">

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

第三步:

放入table 的标签

rush:xhtml;">

第四步:

编写js代码

rush:js;">

第五步:

编写数据来源文件

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

data1.json文件内容如下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

Bootstrip HTML 查询搜索常用格式模版 <form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...