通过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. 禁用/移除WordPress页面的评论功能

    对于某些类型的WordPress站点,也许不需要在页面(page)提供评论功能,那么你可以通过下面的方法,很容易就禁用或移除WordPress页面的评论功能. 方法1:在页面编辑界面取消该页面的评论功 ...

  2. 数组的方法之(Array.prototype.filter() 方法)

    filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素.     注意: filter() 不会对空数组进行检测.     注意: filter() 不会改变原始 ...

  3. selenium(6):通过多种定位方式还是不能成功定位的原因

    场景:在成功修改密码后,会弹出一个修改成功的提示.通过id.xpath.class.css方式定位后,执行到这一步时候,就会出现错误. 原因:仔细检查了下代码,发现在提交修改的操作到修改成功的提示之间 ...

  4. java路径中'/'的使用

    考虑java的跨系统:uinux和winw7中的‘/'标识方法不同,使用下放语句可避免 File.separator;//代表"/"

  5. Python 使用BeautifulSoup模块抽取数据

  6. 阿里云linux服务器到期后续费,网站打不开解决方法之一

    续费后打不开网站,可能会出现不同情况,这里只记录我遇到的问题 问题描述:服务器到期后续费,网站打不开. 解决尝试: 1.重启服务器nginx    /etc/init.d/nginx restart ...

  7. php中实现多线程的的两个方法具体是怎样?

    假设你要建立一个服务来检查正在运行的n台服务器,以确定他们还在正常运转.你可能会写下面这样的代码:代码如下: <?php$hosts = array("host1.sample.com ...

  8. PHP学习(运算符)

    PHP运算符一般分为算术运算符.赋值运算符.比较运算符.三元运算符.逻辑运算符.字符串连接运算符.错误控制运算符. 算术运算符 主要是用于进行算术运算的,例如:加法运算.减法运算.乘法运算.除法运算 ...

  9. 公司mysql问题二

    这个问题解决:

  10. 如何在Liferay 7中创建一个简单的JSF Portlet

    这个将在Liferay IDE 3.1 M3的发布版中提供创建的选项,但是你也可以通过命令行来创建. 1.这是Liferay JSF团队的官网:http://liferayfaces.org/ 你能在 ...