【插件-前端-bootstrap】快速上手布局web页面用什么？快速制表用什么？bootstrap及其插件（1）

作为一名后端人员，不会点前端开发咋么行？来来来，bootstrap，快速上手的插件，包治百病~

—— zain

bootstrap

及

bootstrap-table

什么是bootstrap？

传说中的做页面神器

中文官网：

http://v3.bootcss.com/

简述

首先bootstrap是个前端的插件，相当于html\css\js的框架，而且支持响应式布局（页面会随屏幕大小而改变）bt。使用很简单，之间在你的html标签的class属性里加上bootstrap提供的就好。例如网上也有很多样板，直接copy就好。

图例

使用

在官网中点击下载，之后在点击下载“用于生产环境的bootstrap”，你就会得到很多文件夹，把里面的“bootstrap.min.css”和“bootstrap.min.js”放进你的项目文件夹就够了，哪个页面想用就在标签中引进来

记得引好你的jquery，放在bootstrap之前，bootstrap也是基于它的

在官网中提供了“全局 CSS 样式”“组件”的用法，还有部分Demo，拿去用就好

用这个做前端页面十分方便快捷，而且大部分你想要的效果都有。

那什么又是bootstrap-table？

传说中的制表神器

官网：

http://bootstrap-table.wenzhixin.net.cn/

简述

bt是一个十分方便的表单插件，能实现大部分你想要的表单效果，而且十分简单好用。关于其加载表单数据的方法，最好的一点就是可以接收json数据，并且直接塞进去，支持插件自己通过请求去塞，也支持你直接给他它数据塞。

图例

使用

和bootstrap差不多，在官网中点击下载，会进入到github之中，下载全部下下来，拿出其中的bootstrap-table.css和bootstrap-table.js来用就好。

在用的时候别忘了在里引用下就ok啦~

初始化

有两种，

第一种是在html中设置属性

第二种是在js中写初始化配置

我一般用第一种，因为我要初始化的东西不多，而且习惯在页面写好表头，数据的话我也是后塞。

第一种

 

第二种

常用属性

data-serch 搜索框

data-show-refresh 刷新

data-show-toggle 纵向排列

data-show-colums 筛选属性

data-click-to-select 行点选

中的

data-field 属性名

data-sortable 是否开启排序

data-align 文本对齐方式

data-checkbox 本列改为选择框

data-formatter 传入函数名

其他常用js调用：

var selected = 

$("#task-list").bootstrapTable("getSelections");

$("#task-list").bootstrapTable('destroy')

.bootstrapTable({

    data:data,

});