Twitter bootstrap - 使表格行处于非活动状态

【问题标题】：Twitter bootstrap - Make a table row inactiveTwitter bootstrap - 使表格行处于非活动状态
【发布时间】：2020-03-25 23:22:17
【问题描述】：

您好，我想使表格中的一行处于非活动状态。即使我自己很容易破解并添加与我当前主题的非活动元素颜色相同的自定义 css，我认为它可以由引导程序本身处理。

有什么建议吗？

【问题讨论】：

我尝试将类“inactive”“disabled”添加到，但什么也没有
请在 jsfiddle 中分享您的代码。
请出示您的代码

标签： css twitter-bootstrap-3

【解决方案1】：

Bootstrap 包含一些您可能会觉得有用的元素：

使用上下文类更改行颜色：

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

http://getbootstrap.com/css/#tables-contextual-classes

使用上下文颜色来改变文本的颜色：

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

http://getbootstrap.com/css/#helper-classes-colors

禁用元素是表单元素和按钮的主要元素。看看这里，

【讨论】：

【解决方案2】：

我创建了一个自定义类table-inactive：

.table-inactive td {
    background-color: #ececec;
    color: #b9b9b9;
}

【讨论】：

在这种情况下，选择器“tr.inactive”是否更适合停用整行？除此之外，造型看起来不错:)

【解决方案3】：

表格行是否包含任何输入？如果是这样，请将 disabled HTML5 属性添加到输入中，并可能使该行中的文本变灰以显示它处于非活动状态？只是一个想法..

I.E.

<tr>
   <td style="color:grey;">Sample Text</td>
   <td><input type="text" disabled/></td>
</tr>

我曾使用过 Twitter Bootstrap，但没有看到任何这些功能。

【讨论】：

【解决方案4】：

Bootstrap 4 要求您将“table-”添加到类中。

<tr class="table-danger">...</tr>

https://getbootstrap.com/docs/4.4/content/tables/#contextual-classes

【讨论】：