twitter-bootstrap 使普通 HTML 文本变灰的标准化方法

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/38048438/
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-10-22 00:04:34  来源:igfitidea点击:

Standardized way of graying out normal HTML text

htmlcsstwitter-bootstrapcolors

提问by Andrew Grimm

Is there a standardized way of graying (greying) out text that is meant to be ignored, either in HTML, or bootstrap?

在 HTML 或引导程序中,是否存在将要忽略的文本变灰(变灰)的标准化方法?

I tried looking at both how Slack styles the "(edited)" text, and how Twitter itself (twitter.com) styles timestamps, and it seems they just change the font color. It just seems strange to me that an arbitrary font color is chosen without any semantic information is attached to it, or even a standardized shade of gray.

我尝试查看 Slack 如何设置“(已编辑)”文本的样式,以及 Twitter 本身(twitter.com)如何设置时间戳的样式,似乎它们只是更改了字体颜色。对我来说,选择任意字体颜色而没有附加任何语义信息,甚至是标准化的灰色阴影,这对我来说似乎很奇怪。

The bootstrap documentationmentions some semantic colors, but gray isn't included in them - gray is only mentioned in grayscale.

引导文件中提到的一些语义色彩,但灰色不包括在他们-灰色仅在灰度提及。

回答by Ctc

There is actually a standard way to do it, in bootstrap, which is to use to use text-muted.

在引导程序中,实际上有一种标准的方法可以做到这一点,即使用text-muted.

In fact, there is a list of standard text shades and colors that are applied directly.

事实上,有一个直接应用的标准文本阴影和颜色列表。

http://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp

http://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp

As for HTML, having a CSS with a disabled class and applying that to any of your text would be a better option.

至于 HTML,拥有一个禁用类的 CSS 并将其应用于您的任何文本将是更好的选择。

回答by Anthony Astige

Standard HTML Input Forms

标准 HTML 输入表单

An example of this is disabling HTML input elements, though there's not a standard display of that across browsers.

这方面的一个例子是禁用 HTML 输入元素,尽管没有跨浏览器的标准显示。

http://codepen.io/anthonyastige/pen/dXNEmx

http://codepen.io/anthonyastige/pen/dXNEmx

<input type=button value="I can do all the things">
<input type=button value="I'm disabled" disabled>

Bootstrap Input Forms

Bootstrap 输入表单

There's also the concept of disabling input elements here with the .disabledclass

这里还有禁用输入元素的概念与.disabled

https://getbootstrap.com/css/#checkboxes-and-radios

https://getbootstrap.com/css/#checkboxes-and-radios

Bootstrap text

引导文本

The .text-mutedclass implies disabled, though the specs don't say exactly what it means.

.text-muted级意味着禁用,虽然规格不说究竟是什么意思。

https://getbootstrap.com/css/#helper-classes

https://getbootstrap.com/css/#helper-classes

回答by denchu

See samples below:

请参阅以下示例:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<fieldset disabled>
  <div class="form-group">
    <label for="inputText">Disabled input</label>
    <input class="form-control" id="inputText" type="text" placeholder="Disabled Input" disabled>
    <p class="help-block">Example block-level help-block class text here.</p>
    <p class="text-muted">Example block-level with text-muted class.</p>
  </div>
  <div class="form-group">
    <label for="optionSelect">Disabled select menu</label>
    <select id="optionSelect" class="form-control">
      <option>Select Value</option>
    </select>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">Disabled Checkbox
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Disabled Button</button>
</fieldset>