theadClasses设置Bootstrap Table表头样式

通过theadClasses属性设置表头样式。

thead-light设置灰色背景

?

1 2 3 4 5 6 7 8

//bootstrap table初始化数据  itxst.com $('#table').bootstrapTable({     columns: columns,     data: getData(),     theadClasses: "thead-light",//这里设置表头样式     classes: "table table-bordered table-striped table-sm table-dark",     height:400  });

thead-dark设置黑色背景

?

1 2 3 4 5 6 7 8

//bootstrap table初始化数据 $('#table').bootstrapTable({     columns: columns,     data: getData(),     theadClasses: "thead-dark",//这里设置表头样式     classes: "table table-bordered table-striped table-sm table-dark",     height:400  });

自定义一个蓝色的表头样式

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<style> /*定义类名为.thead-blue的样式*/ .table .thead-blue th { color: #fff; background-color: #3195f1; border-color: #0d7adf; } </style> //bootstrap table初始化数据 $('#table').bootstrapTable({     columns: columns,     data: getData(),     theadClasses: "thead-blue",//设置thead-blue为表头样式     classes: "table table-bordered table-striped table-sm table-dark",     height:400  });

1

转载：http://www.itxst.com/Bootstrap-Table/