theadClasses設置Bootstrap Table表頭樣式

經過theadClasses屬性設置表頭樣式。

thead-light設置灰色背景

//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設置黑色背景

//bootstrap table初始化數據
$('#table').bootstrapTable({
    columns: columns,
    data: getData(),
    theadClasses: "thead-dark",//這裏設置表頭樣式
    classes: "table table-bordered table-striped table-sm table-dark", 
    height:400  
});

自定義一個藍色的表頭樣式

 

<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  
});　　

轉載：http://www.itxst.com/Bootstrap-Table/