如何提高引导斑马条纹表的对比度答案

【问题标题】：How can I improve contrast on bootstrap zebra striped table如何提高引导斑马条纹表的对比度
【发布时间】：2013-05-01 02:03:01
【问题描述】：

我有以下带有斑马条纹的 twitter 引导表：

<table class="table table-striped">  
        <thead>  
          <tr>  
            <th>Advantage</th>  
            <th>Details</th>   
          </tr>  
        </thead>  
        <tbody>  
          <tr>  
            <td>aaaaa</td>  
            <td> bbbbb </td>   
          </tr>  
        <tr>
    <td>    ccccc</td><td> ddddd</td>
</tr>    

        </tbody>  
      </table>

问题是我看不到斑马条纹！这一切在我看来都是单调的。如何提高斑马条纹的对比度？

提前致谢，

比尔

【问题讨论】：

它可能只是您的显示器，我知道我有 2 个差异显示器，其中 1 个的背景看起来不错，而另一个几乎是白色的。始终证明您的设计/在其他屏幕上查看以 100% 确定最终结果（如果您关心这类事情）

标签： html css twitter-bootstrap

【解决方案1】：

对应的CSS是：

.table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th {
    background-color: #f9f9f9;
}

向您的样式表添加一个新规则，该规则会覆盖此背景颜色以使您更清楚。

【讨论】：

Rick - 知道如何选择颜色，我需要某种颜色选择器（#f9f9f9 对我没有任何意义）
在 RRGGBB 中，十六进制颜色从 0（暗）到 f（亮），其中 R 为红色，G 为绿色，B 为蓝色。当每一对相等时，结果是不同的灰色阴影。要使灰色变暗，请选择较低的值。试试#eee，它只是#eeeeee 的简写。要对此进行可视化，请转到 colorpicker.com 并在左边缘（灰度）周围滑动颜色选择器并记下顶部的十六进制值。

【解决方案2】：

如果您从 .less 文件构建 Bootstrap，请查看 variables.css，特别是这一行（来自 github）：

@tableBackgroundAccent:             #f9f9f9; // for striping

您也可以使用customizer。

至于深灰色，这个十六进制值可以工作：#DBDBDB（它是一种稍深的灰色，具有相同的红绿蓝平衡混合）

【讨论】：

谢谢，我需要进一步研究如何使用优化器下载和安装新版本的引导程序。我的版本是 2.04，没有那个变量