【插件-前端-bootstrap】快速上手布局web页面用什么?快速制表用什么?bootstrap及其插件(1)
2016-07-28 21:03
791 查看
作为一名后端人员,不会点前端开发咋么行?来来来,bootstrap,快速上手的插件,包治百病~
—— zain
bootstrap
及
bootstrap-table
什么是bootstrap?
传说中的做页面神器
中文官网:
http://v3.bootcss.com/
简述
首先bootstrap是个前端的插件,相当于html\css\js的框架,而且支持响应式布局(页面会随屏幕大小而改变)bt。使用很简单,之间在你的html标签的class属性里加上bootstrap提供的就好。例如<buttonclass="btn btn-success"></button>网上也有很多样板,直接copy就好。
图例
使用
在官网中点击下载,之后在点击下载“用于生产环境的bootstrap”,你就会得到很多文件夹,把里面的“bootstrap.min.css”和“bootstrap.min.js”放进你的项目文件夹就够了,哪个页面想用就在<head>标签中引进来记得引好你的jquery,放在bootstrap之前,bootstrap也是基于它的
在官网中提供了“全局 CSS 样式”“组件”的用法,还有部分Demo,拿去用就好
用这个做前端页面十分方便快捷,而且大部分你想要的效果都有。
那什么又是bootstrap-table?
传说中的制表神器
官网:
http://bootstrap-table.wenzhixin.net.cn/
简述
bt是一个十分方便的表单插件,能实现大部分你想要的表单效果,而且十分简单好用。关于其加载表单数据的方法,最好的一点就是可以接收json数据,并且直接塞进去,支持插件自己通过请求去塞,也支持你直接给他它数据塞。图例
使用
和bootstrap差不多,在官网中点击下载,会进入到github之中,下载全部下下来,拿出其中的bootstrap-table.css和bootstrap-table.js来用就好。在用的时候别忘了在<head>里引用下就ok啦~
初始化
有两种,第一种是在html中设置属性
第二种是在js中写初始化配置
我一般用第一种,因为我要初始化的东西不多,而且习惯在页面写好表头,数据的话我也是后塞。
第一种
第二种
常用属性
data-serch 搜索框data-show-refresh 刷新
data-show-toggle 纵向排列
data-show-colums 筛选属性
data-click-to-select 行点选
<th>中的
data-field 属性名
data-sortable 是否开启排序
data-align 文本对齐方式
data-checkbox 本列改为选择框
data-formatter 传入函数名
其他常用js调用:
var selected =
$("#task-list").bootstrapTable("getSelections");
$("#task-list").bootstrapTable('destroy')
.bootstrapTable({
data:data,
});
相关文章推荐
- java对世界各个时区(TimeZone)的通用转换处理方法(转载)
- java-注解annotation
- java-模拟tomcat服务器
- java-用HttpURLConnection发送Http请求.
- java-WEB中的监听器Lisener
- Android IPC进程间通讯机制
- Android Native 绘图方法
- Android java 与 javascript互访(相互调用)的方法例子
- 介绍一款信息管理系统的开源框架---jeecg
- 聚类算法之kmeans算法java版本
- java实现 PageRank算法
- PropertyChangeListener简单理解
- bootstrap初试进度条
- c++11 + SDL2 + ffmpeg +OpenAL + java = Android播放器
- 插入排序
- 冒泡排序
- 堆排序