Question

我有一个Bootstrap表，该表允许用户选择将class="success"添加到选择行的行。我正在为上下文类使用默认值：

https://getbootstrap.com/docs/3.3/css/#tables-contextual-classes

但是客户只希望在此特定页面上获得成功，那就是更加鲜亮的绿色，从而脱颖而出。

这是表格的示例：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-condensed table-striped table-bordered">
  <thead>
    <th scope="col">Serial #</th>
    <th scope="col">Product Code</th>
    <th scope="col">ID</th>
    <th scope="col">Description</th>
    <th class="text-center" scope="col">Select</th>
  </thead>
  <tbody>
    <tr class="success" id="PZs456">
      <td>ZK2342MFM</td>
      <td>JMPG</td>
      <td>98651217</td>
      <td>Keyboard - Bluetooth</td>
      <td class="text-center">
        <button type="button" class="btn btn-success btn-sm">Select</button> 
      </td>
    </tr>
  </tbody>
</table>

更改“成功”颜色的最佳方法是什么，以便在不更改Bootstrap CSS本身的情况下，仅在此页面上将其变为明亮的绿色？

Answer 1

.new-green {
  background: #00ff00 !important;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-condensed table-striped table-bordered">
  <thead>
    <th scope="col">Serial #</th>
    <th scope="col">Product Code</th>
    <th scope="col">ID</th>
    <th scope="col">Description</th>
    <th class="text-center" scope="col">Select</th>
  </thead>
  <tbody>

    <tr class="success" id="PZs456">
      <td>ZK2342MFM</td>
      <td>JMPG</td>
      <td>98651217</td>
      <td>Keyboard - Bluetooth</td>

      <td class="text-center"><button type="button" class="btn btn-success btn-sm new-green">Select</button></td>



    </tr>


  </tbody>
</table>

我不知道这是否是最好的方法，但是由于引导程序中有很多重要的事情，为什么不使用自己的新类呢？

Bootstrap-自定义一页的表行突出显示类

1 个答案: