zoukankan      html  css  js  c++  java
  • python测试开发django-132.Bootstrap Table设置表头样式(theadClasses)

    前言

    Bootstrap Table表头添加背景色,可以通过theadClasses属性设置表头样式。

    设置theadClasses属性

    没设置theadClasses属性时候,背景色默认是白色

    bootstrap背景颜色设置

    • .bg-primary 主要的
    • .bg-success 成功
    • .bg-info 信息
    • .bg-warning 警告
    • .bg-danger 危险

    颜色效果对应下图

    theadClasses设置背景色"bg-info"

        $("#table").bootstrapTable({
            toolbar: '#toolbar',                //自定义工具按钮
            url: url,                           //请求后台的URL(*)
            method: 'get',                      //请求方式(*)
            cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            theadClasses: "bg-info",
            ......
    })
    

    表格背景色显示效果

    自定义表头背景色

    先在头部设置style样式

    • color 字体颜色
    • background-color 背景色
    • border-color 边框颜色
    // 作者-上海悠悠 QQ交流群:717225969
    // blog地址 https://www.cnblogs.com/yoyoketang/
    <head>
     <style>
        .table-green {
            color: #042cff;
            background-color: #84f1cd;
            border-color: #84f1cd;
        }
    </style>
    </head>
    

    给表头设置自定义的 table-green 属性

    // 作者-上海悠悠 QQ交流群:717225969
    // blog地址 https://www.cnblogs.com/yoyoketang/
        $("#table").bootstrapTable({
            toolbar: '#toolbar',                //自定义工具按钮
            url: url,                           //请求后台的URL(*)
            method: 'get',                      //请求方式(*)
            cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            theadClasses: "table-green",
            ......
    })
    

    显示效果如下

  • 相关阅读:
    176. Second Highest Salary
    175. Combine Two Tables
    172. Factorial Trailing Zeroes
    171. Excel Sheet Column Number
    169. Majority Element
    168. Excel Sheet Column Title
    167. Two Sum II
    160. Intersection of Two Linked Lists
    个人博客记录
    <meta>标签
  • 原文地址:https://www.cnblogs.com/yoyoketang/p/15294066.html
Copyright © 2011-2022 走看看