使用引导程序更改表头颜色

Posted

技术标签:

【中文标题】使用引导程序更改表头颜色【英文标题】:Change table header color using bootstrap 【发布时间】:2014-07-18 16:11:30 【问题描述】:

我有一个使用引导程序的 MVC5 应用程序。表列名称为黑色 在白色背景上,我想将其更改为蓝色背景和列 名字将是白色的,我该怎么做? 我试图玩 CSS 类但没有成功......

<input type="button" value="Add" onclick="addRow()" class="data-button" id="add-row" />


    <table class="table" >
        <tr>
            <th>
                @html.DisplayNameFor(model => model.name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.checkBox1)
            </th>
            <th></th>
        </tr>

【问题讨论】:

【参考方案1】:

在你的 CSS 中

th 
    background-color: blue;
    color: white;
 

【讨论】:

谢谢大卫,CSS 在哪里?在 site.css 文件中?我应该如何在代码中引用它? 将其添加到 site.css,模板应该已经引用了它,因此您无需执行任何其他操作。 非常感谢大卫,投了赞成票!它可以工作,但是我有一些问题,当我单击添加行并将新行附加到表格时它也有相同的蓝色和白色,我该如何避免它?这是在点击时添加行的代码...var html = ' @Html.TextBox("Name") @Html.CheckBox("checkBox1") th> @Html.CheckBox("checkBox2") @Html.CheckBox("checkBox3") ';【参考方案2】:

您可以简单地将引导程序contextual background colors 之一应用于标题行。在这种情况下(蓝色背景,白色文本):主要。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<table class="table" >
  <tr class="bg-primary">
    <th>
        Firstname
    </th>
    <th>
        Surname
    </th>
    <th></th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
    <tr>
      <td>Jane</td>
      <td>Roe</td>
    </tr>
</table>

【讨论】:

这是不太“hacky”的方法,因为它不使用自定义 CSS,而是使用 Boostrap 的 CSS 类。但它只允许您从已知的颜色类别dangerinfosuccessprimarywarning 中进行选择,这可能有点有限。但也许这根本不是正确的 CSS 类?只是第二个想法! 还有 ´table-*` 颜色类别。 (BS 4.0.0)【参考方案3】:

这是分隔表头和表体的另一种方法:

thead th 
    background-color: #006DCC;
    color: white;


tbody td 
    background-color: #EEEEEE;

看看这个例子来分离表格的头部和主体。 JsFiddleLink

【讨论】:

【参考方案4】:

试试这个:

table.table tr thbackground-color:blue !important; font-color:white !important;

希望这会有所帮助..

【讨论】:

谢谢,但我应该把它放在哪里? 你有一个 style.css 或你正在使用的任何 css 文件,你可以在它的底部写.. 没有font-color这样的css属性 此外,应不惜一切代价避免使用 !important,仅将其用作最后的手段。【参考方案5】:
//use css
.blue 
    background-color:blue !important;

.blue th 
    color:white !important;


//html
<table class="table blue">.....</table>

【讨论】:

这将使整个表格背景变为蓝色,并且不会按照 OP 的要求更改文本颜色。【参考方案6】:

有一个引导函数来改变表头的颜色,名为 thead-dark 用于表头的深色背景和 thead-light 用于表头的浅色背景。使用此函数后,您的代码将如下所示。

<table class="table">
    <tr class="thead-danger">
        <!-- here I used dark table headre -->
        <th>
            @Html.DisplayNameFor(model => model.name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.checkBox1)
        </th>
        <th></th>
    </tr>

【讨论】:

以上是关于使用引导程序更改表头颜色的主要内容,如果未能解决你的问题,请参考以下文章

如何更改引导程序版本 4 按钮颜色

在引导程序中更改活动类的颜色

如何使整个表单(输入和提交按钮)在焦点上更改边框颜色(引导程序 3)

如何更改引导程序原色?

更改引导卡标题的颜色

如何在引导反应/redux 应用程序中覆盖引导主题颜色?