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/
theadClasses设置Bootstrap Table表头样式的更多相关文章
- rowStyle设置Bootstrap Table行样式
日常开发中我们通常会用到隔行变色来美化表格,也会根据每行的数据显示特定的背景颜色,如果库存低于100的行显示红色背景 CSS样式 <style> .bg-blue { background ...
- bootstrap table的样式
<style> table{ border: 1px solid #ddd; background-color: transparent; border-spacing:; border- ...
- Bootstrap Table的例子(转载)
转载自:http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#classes-table 使用的API: data1.json da ...
- bootStrap table 和 JS 开发过程中遇到问题汇总
1..bootStrap-table表头固定 在table定义的时候给高度属性就可以自动生成滚动条,并且固定表头[height: 220,] 2.为动态生成的DOM元素绑定事件 on("cl ...
- bootstrap table使用小记
bootstrap table是一个非常不错的,基于bootstrap的插件,它扩展和丰富了bootstrap表格的操作,如格式化表格,表格选择器,表格工具栏,分页等等. 最近基于bootstrap开 ...
- bootstrap table 超链接的添加 <a>标签
后台管理页面采用 bootstrap table 页面样式: 现在需要在操作中添加一个<a>标签,跳转到不同的页面 { title: '操作', align: 'center', form ...
- bootstrap table 保留翻页选中数据
$(function () { $('#exampleTable').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-al ...
- Bootstrap Table踩坑——设置多级表头后只显示第一级表头问题解决办法
今天设置了Bootstrap Table的复杂表头,设置了多级表头(两行列名),但是只能显示第一级表头(第一行的列名),第二级的表头被第一级的表头覆盖.但是我仿照其他网上的其他设置复杂表头例子都能正常 ...
- 给bootstrap table设置行列单元格样式
1.根据单元格或者行内其他单元格的内容,给该单元格设置一定的css样式 columns: [{ field: 'index', title: '序号', align:"center" ...
随机推荐
- set的基本使用
构造一个集合 现在我们来构造一个集合. C++ 中直接构造一个 set的语句为: sets.这样我们定义了一个名为 s的.储存 T类型数据的 集合,其中 T是集合要储存的数据类型.初始的时候 s是空集 ...
- LintCode刷题笔记-- Maximal Square
标签:动态规划 题目描述: Given a 2D binary matrix filled with 0's and 1's, find the largest square containing a ...
- 关于Python缩进,我们该了解哪些?
Python是一门独特的语言,它的代码块是通过缩进(Indentation)来标记的(大部分语言都是使用花括号作为代码块的标记),具有相同缩进的多行代码属于同一个代码块.如果代码莫名其妙的乱缩进,Py ...
- PHP基础-生成静态html页面原理是怎样
设置example.html为模板文件,然后按照此模板文件生成article-1.html~article-5.html,以此来做简单的演示,代码如下: <?php//将数据存入二维数组$con ...
- 深入理解 Node.js 进程与线程
原文链接: https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651557398&idx=1&sn=1fb991da ...
- Thread class vs Runnnable interface(转)
http://developer.51cto.com/art/201203/321042.htm Thread(Runnable target) Allocates a new Thread obje ...
- Oracle存储过程小解
Oracle存储过程小解 1.创建语法 create or replace procedure pro_name( paramIn in type, paramOUt out type, paramI ...
- 权限系统的设计模式 ACL RBAC ABAC
ACL(Access Control List):访问权限列表 如: user1-->AC1 user1-->AC2 user2-->AC1 此时权限汇总成一个列表 这种设计 ...
- js写的滑动解锁
css部分 *{ margin:; padding:; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select ...
- [idea]idea配置tomcat 标签: tomcatidea 2017-03-12 22:12 402人阅读 评论(19)
我们在使用idea的时候,一定会遇到的一步,就是使用tomcat来发布我们的项目,那么,如何在idea中设置tomcat呢?下面就随小编来一起学习一下吧. 设置tomcat 打开设置界面 Run-&g ...