Bootstrap表条纹:如何更改条纹背景颜色?

使用Bootstrap类table-striped ,我表格中的每一行都有一个等于#F9F9F9的背景颜色。 我怎样才能改变这种颜色?

 .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th { background-color: red; } 

在bootstrap.css中更改此行,或者可以使用(odd)或(even)而不是(2n + 1)

加载Bootstrap后添加以下CSS样式:

 .table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th { background-color: red; // Choose your own color here } 

你有两个select,你可以用自定义样式表覆盖样式,或者编辑主引导程序的css文件。 我更喜欢前者。

引导后应该链接自定义样式。

 <link rel="stylesheet" src="bootstrap.css"> <link rel="stylesheet" src="custom.css"> 

custom.css

 .table-striped>tr:nth-child(odd){ background-color:red; } 

如果您使用的是Bootstrap 3,则可以使用Florin的方法,或者使用自定义的CSS文件。

如果使用Bootstrap less源而不是处理的css文件,可以直接在bootstrap/less/variables.less更改它。

find如下所示:

 //** Background color used for `.table-striped`. @table-bg-accent: #f9f9f9; 

我发现这个棋盘图案(作为斑马条纹的子集)是一个愉快的方式来显示一个双列表。 这是使用LESS CSS编写的,并将所有颜色都从基本颜色上关掉。

 @base-color: #0000ff; @row-color: lighten(@base-color, 40%); @other-row: darken(@row-color, 10%); tbody { td:nth-child(odd) { width: 45%; } tr:nth-child(odd) > td:nth-child(odd) { background: darken(@row-color, 0%); } tr:nth-child(odd) > td:nth-child(even) { background: darken(@row-color, 7%); } tr:nth-child(even) > td:nth-child(odd) { background: darken(@other-row, 0%); } tr:nth-child(even) > td:nth-child(even) { background: darken(@other-row, 7%); } } 

注意我已经放弃了.table-striped ,但似乎并不重要。

好像: 在这里输入图像说明

不要直接编辑引导CSS文件来自定义引导CSS。相反,我build议复制粘贴引导CSS并将它们保存在不同的CSS文件夹中,然后您可以自定义或编辑适合您需要的样式。

如果你想实际上颠倒颜色,你应该添加一条规则,使“奇数”行变成白色,并使“偶数”行变成任何你想要的颜色。