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

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

使用步骤如下:

第一步: 下载bootstrap-table需要使用的文件(包括Css and js文件)

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

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">

  

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>

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

第三步: 放入table 的标签

<table id="table"></table>

第四步 编写js代码
<script >
$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, ]
});
</script>

  第五步 编写数据来源文件

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

data1.json文件内容如下

[{id:"1",title:"meetweb"},{id:"2",title:"learn bootstrap table"}]

  

作者:『meetweb』
出处:http://www.cnblogs.com/meetweb/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。

  

bootstrap table教程--使用入门基本用法的更多相关文章

  1. bootstrap table教程--后台数据绑定、特殊列处理、排序

    上一篇文章介绍了基本的使用教程.本节主要介绍Bootstrap的后台数据绑定.特殊列处理及列的排序功能 1.数据绑定 一般做程序设计,很少是使用json文件直接绑定数据.基本上我们都是使用编程语言进行 ...

  2. BootStrap Table超好用的表格组件基础入门

    右侧导航条有目录哟,看着更方便 快速入门 表格构建 API简单介绍 主要研究功能介绍 快速入门 最好的资源官方文档 官方文档地址****https://bootstrap-table.com/docs ...

  3. Bootstrap Table 的用法

    记录下 Bootstrap Table 的用法,备忘. <!DOCTYPE html> <html> <head> <meta charset="u ...

  4. Bootstrap table的基础用法

    一.官方文档 Bootstrap 中文网:http://www.bootcss.com/ Bootstrap Table 中文网 : http://bootstrap-table.wenzhixin. ...

  5. Bootstrap Table使用方法详解

    http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...

  6. bootstrap table使用总结

    使用bootstrap table可以很方便的开发后台表格,对数据进行异步更新,编辑.下面就来介绍一下bootstrap table的详细使用方法: 因为之前在官网也找了很久的教程,源码感觉隐藏的比较 ...

  7. [转]bootstrap table 动态列数

    原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...

  8. 【转载】BootStrap表格组件bootstrap table详解

    (转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...

  9. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

随机推荐

  1. net.tcp协议的wcf服务在远程计算机无法调用问题分析

    可能原因1:net.tcp监听端口服务没有启动. 可能原因2:防火墙阻止了端口服务器路径访问. 可能原因3:配置文件路径endpoint路径和引用路径不一致 可能原因4:权限受限制.

  2. 千亿级SaaS市场:企业级服务的必争之地

    2015年企业级服务融资案例数量飙升,大额融资频现.不少企业纷纷涉足企业级服务市场,其中,以IM为主打的阿里钉钉,以企业CRM为主的纷享逍客高调进入人们的视野,以产品管理为核心.集成多种工具服务的iC ...

  3. la3523 白书例题 圆桌骑士 双联通分量+二分图

    具体题解看大白书P316 #include <iostream> #include <algorithm> #include <vector> #include & ...

  4. uva11404

    这题说的是给了一个长度为n的字符串(1000)求最长回文子序列,并输出当str[i]==ste[j]时dp[i][j]=dp[i+1][i-1]+2 否则 dp[i][j]=Max(dp[j+1][i ...

  5. python面向对象编程基础

    演示了 Python 类与对象的编程基础, 包括属性.方法.继承.组合.动态创建类. python 版本: 2.7.5 class SimpleClass(object): ''' a simple ...

  6. iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  7. OpenCV/OpenCL/OpenGL区别

    OpenCV/OpenCL/OpenGL区别: OpenGL(全写Open Graphics Library)是个定义了一个跨编程语言.跨平台的应用程序接口(API)的规格,它用于生成二维.三维图像. ...

  8. [转]手机web HTML头信息解释和viewport meta标签解释

    <meta charset="utf-8" /> <link rel="shortcut icon" href="favicon.i ...

  9. 科幻小说《霜与火》 by 雷·布雷德伯里

    漫漫长夜中,西姆出世了,躺在山洞冰凉的石头上,嗷嗷大哭,浑身血液奔流,脉搏每分钟一千跳.他不停地长大.妈妈用发烫的双手喂西姆吃东西.人生的梦魔开场了.一来到世间,他的眼睛就闪烁着警觉的光芒:而后又令人 ...

  10. HDU 4489 The King’s Ups and Downs

    http://acm.hdu.edu.cn/showproblem.php?pid=4489 题意:有n个身高不同的人,计算高低或低高交错排列的方法数. 思路:可以按照身高顺序依次插进去. d[i][ ...