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
Standardized way of graying out normal HTML text
提问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级意味着禁用,虽然规格不说究竟是什么意思。
回答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>

