设置Bootstrap Table表格样式并隔行变色
设置bootstrap-table表格样式可以通过设置classess属性进行设置，官方默认支持黑色主题、隔行变色等样式，你也可以自定义样式把你的样式类名传进去。
table-bordered设置表格边框$('#table').bootstrapTable({
columns: columns,
data: getData(),
classes: "table table-bordered", //这里设置表格样式
height:400
});
table-striped设置隔行变色$('#table').bootstrapTable({
columns: columns,
data: getData(),
classes: "table table-bordered table-striped", //table-striped表示隔行变色
height:400
});
table-sm设置表格更精致$('#table').bootstrapTable({
columns: columns,
data: getData(),
classes: "table table-bordered table-striped table-sm", // 设置table-sm样式
height:400
});
table-dark设置表格为黑色主题$('#table').bootstrapTable({
columns: columns,
data: getData(),
classes: "table table-bordered table-striped table-sm table-dark",
height:400
});
完整代码在线试一试
Bootstrap Table入门例子
.table-demo {
width: 80%;
margin: 30px auto 0px auto;
}
.fixed-table-header {
border-right: solid 1px #ddd;
border-top: solid 1px #ddd;
}
.fixed-table-header table {
border-top: solid 0px #ddd !important;
margin-top:-1px;
}
//设置需要显示的列
var columns = [{
field: 'Id',
title: '编号'
}, {
field: 'ProductName',
title: '产品名称'
}, {
field: 'StockNum',
title: 'Item 库存'
}];
//bootstrap table初始化数据
$('#table').bootstrapTable({
columns: columns,
data: getData(),
classes: "table table-bordered table-striped table-sm table-dark", //这里设置表格样式
height:400
});
function getData()
{
var data = [];
for (var i = 0; i < 50; i++)
{
var item = {
Id: i,
ProductName: '苹果',
StockNum: '200'
};
data.push(item);
};
return data;
}
