使用引导程序更改表头颜色
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 = '您可以简单地将引导程序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 类。但它只允许您从已知的颜色类别danger
、info
、success
、primary
和warning
中进行选择,这可能有点有限。但也许这根本不是正确的 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>
【讨论】:
以上是关于使用引导程序更改表头颜色的主要内容,如果未能解决你的问题,请参考以下文章