CSS Twitter 引导程序 - 使表格行处于非活动状态

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23627871/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 02:27:10  来源:igfitidea点击:

Twitter bootstrap - Make a table row inactive

csstwitter-bootstrap-3

提问by nkint

Hi I want to make a row in a table inactive. Even if it is easy to hack by myself and add a custom css with the same colour of the inactive elements of my current theme I think it can be handles by bootstrap itself.

嗨,我想让表中的一行处于非活动状态。即使我自己很容易 hack 并添加一个与我当前主题的非活动元素颜色相同的自定义 css,我认为它可以由 bootstrap 本身处理。

Any suggestions?

有什么建议?

回答by morganjlopes

Bootstrap has a few elements you might find helpful:

Bootstrap 有一些你可能会觉得有用的元素:



Use contextual classes to change row colors:

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

<!-- 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

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



Use contextual colors to change the color of text:

使用上下文颜色更改文本颜色:

<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

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



The disabled element is primary for form elements and buttons. Check that out here,

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

回答by Martin Thoma

I've created a custom class table-inactive:

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

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

回答by heinkasner

Does the table row contain any inputs? If so, add the disabled HTML5 attribute to the input and perhaps make the text in that row greyed out to show it is inactive? Just an idea..

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

I.E.

IE

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

I have worked with Twitter Bootstrap a bit and did not see any of these features though.

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

回答by cahrens

Bootstrap 4 requires you to add "table-" to the class.

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

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

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

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