代码之家 › 专栏 › 技术社区 › user982124

Bootstrap-为一个页面自定义表行突出显示类

twitter-bootstrap-3 css html

user982124 · 技术社区 · 6 年前

我有一个引导表,允许用户选择添加 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>

什么是最好的方法来改变'成功'的颜色,使它是一个更亮的绿色,只为这个网页,而不改变引导CSS本身?

1 回复 | 直到 6 年前

Learner 6 年前

.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中的重要事情为什么不把自己的作为新的类使用呢?

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

3 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

3 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

3 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前