通过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/

theadClasses设置Bootstrap Table表头样式的更多相关文章

  1. rowStyle设置Bootstrap Table行样式

    日常开发中我们通常会用到隔行变色来美化表格,也会根据每行的数据显示特定的背景颜色,如果库存低于100的行显示红色背景 CSS样式 <style> .bg-blue { background ...

  2. bootstrap table的样式

    <style> table{ border: 1px solid #ddd; background-color: transparent; border-spacing:; border- ...

  3. Bootstrap Table的例子(转载)

    转载自:http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#classes-table 使用的API: data1.json da ...

  4. bootStrap table 和 JS 开发过程中遇到问题汇总

    1..bootStrap-table表头固定 在table定义的时候给高度属性就可以自动生成滚动条,并且固定表头[height: 220,] 2.为动态生成的DOM元素绑定事件 on("cl ...

  5. bootstrap table使用小记

    bootstrap table是一个非常不错的,基于bootstrap的插件,它扩展和丰富了bootstrap表格的操作,如格式化表格,表格选择器,表格工具栏,分页等等. 最近基于bootstrap开 ...

  6. bootstrap table 超链接的添加 <a>标签

    后台管理页面采用 bootstrap table 页面样式: 现在需要在操作中添加一个<a>标签,跳转到不同的页面 { title: '操作', align: 'center', form ...

  7. bootstrap table 保留翻页选中数据

    $(function () { $('#exampleTable').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-al ...

  8. Bootstrap Table踩坑——设置多级表头后只显示第一级表头问题解决办法

    今天设置了Bootstrap Table的复杂表头,设置了多级表头(两行列名),但是只能显示第一级表头(第一行的列名),第二级的表头被第一级的表头覆盖.但是我仿照其他网上的其他设置复杂表头例子都能正常 ...

  9. 给bootstrap table设置行列单元格样式

    1.根据单元格或者行内其他单元格的内容,给该单元格设置一定的css样式 columns: [{ field: 'index', title: '序号', align:"center" ...

随机推荐

  1. BZOJ4719[NOIP2016提高组Day1T2] 天天爱跑步

    #261. [NOIP2016]天天爱跑步 描述 提交 自定义测试 小C同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.<天天爱跑步>是一个养成类游戏,需要玩家 ...

  2. 洛谷P2982 [USACO10FEB]慢下来Slowing down [2017年四月计划 树状数组01]

    P2982 [USACO10FEB]慢下来Slowing down 题目描述 Every day each of Farmer John's N (1 <= N <= 100,000) c ...

  3. UE4物理模块(三)---碰撞查询(下)SAP/MBP/BVH算法简介

    在上一文中介绍了碰撞查询的配置方法: Jerry:UE4物理模块(三)---碰撞查询(上)​zhuanlan.zhihu.com 本篇介绍下UE4的各种零大小的射线检测,以及非零大小(带体积)的射线检 ...

  4. idea展开和折叠方法的快捷键

    Ctrl+"+/-",当前方法展开.折叠 Ctrl+Shift+"+/-",全部展开.折叠

  5. 六.随机神经网络Boltzmann(玻尔兹曼机)

    Hopfield网络具有最优计算功能,然而网络只能严格按照能量函数递减方式演化,很难避免伪状态的出现,且权值容易陷入局部极小值,无法收敛于全局最优解. 如果反馈神经网络的迭代过程不是那么死板,可以在一 ...

  6. Vue--过渡动画实现的三种方式

    一.使用vue的transition标签结合css样式完成动画 <!DOCTYPE html> <html lang="en"> <head> ...

  7. setStorage、getStorage、 removeStorage 封装

    // 本地存储 setStorage(name, data){ let dataType = typeof data; // json对象 if(dataType === 'object'){ win ...

  8. 洛谷 P1073 最优贸易 最短路+SPFA算法

    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 题面 题目链接 P1073 最优贸易 题目描述 C国有 $ n $ 个大城市和 ...

  9. 春蔚专访--MaxCompute 与 Calcite 的技术和故事

    摘要:2019大数据技术公开课第一季<技术人生专访>,来自阿里云计算平台事业部高级开发工程师雷春蔚向大家讲述了MaxCompute 与 Calcite 的技术和故事. 具体内容包括: 1) ...

  10. PLUTO平台是由美林数据技术股份有限公司下属西安交大美林数据挖掘研究中心自主研发的一款基于云计算技术架构的数据挖掘产品,产品设计严格遵循国际数据挖掘标准CRISP-DM(跨行业数据挖掘过程标准),具备完备的数据准备、模型构建、模型评估、模型管理、海量数据处理和高纬数据可视化分析能力。

    http://www.meritdata.com.cn/article/90 PLUTO平台是由美林数据技术股份有限公司下属西安交大美林数据挖掘研究中心自主研发的一款基于云计算技术架构的数据挖掘产品, ...