CSS Bootstrap 中可用的文本颜色类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21495243/
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
Available text color classes in Bootstrap
提问by fidel castro
I'm developing a sign up page, by putting some text as the title at the navigation bar. I want to give those texts different colors. For this purpose I'm using a separate CSS file, but I want to do this using bootstrap's CSS file.
我正在开发一个注册页面，在导航栏中放置一些文本作为标题。我想给这些文本不同的颜色。为此，我使用了一个单独的 CSS 文件，但我想使用 bootstrap 的 CSS 文件来做到这一点。
Can anybody list the available color classes in bootstrap?
有人可以在 bootstrap 中列出可用的颜色类吗？
回答by Ted Delezene
The bootstrap 3 documentationlists this under helper classes:
Muted, Primary, Success, Info, Warning, Danger.
该引导3文档辅助类下的列表如下：
Muted，Primary，Success，Info，Warning，Danger。
The bootstrap 4 documentationlists this under utilities -> color, and has more options:
primary, secondary, success, danger, warning, info, light, dark, muted, white.
该引导4文档水电费清单本- >颜色，并有更多的选择：
primary，secondary，success，danger，warning，info，light，dark，muted，white。
To access them one uses the classtext-[class-name]
要访问它们，请使用 classtext-[class-name]
So, if I want blue text for example I would do something like this:
所以，如果我想要蓝色文本，例如我会做这样的事情：
<p class="text-primary">This text is the blue primary color.</p>
This is not a huge number of choices, but it's some.
这不是大量的选择，但它是一些。
回答by lvarayut
The text at the navigation bar is normally colored by using one of the two following css classes in the bootstrap.cssfile.
导航栏上的文本通常使用bootstrap.css文件中的以下两个 css 类之一进行着色。
Firstly, in case of using a default navigation bar (the gray one), the .navbar-defaultclass will be used and the text is colored as dark gray.
首先，在使用默认导航栏（灰色）的情况下，.navbar-default将使用该类并将文本着色为深灰色。
.navbar-default .navbar-text {
color: #777;
}
The other is in case of using an inverse navigation bar (the black one), the text is colored as gray60.
另一种是在使用反向导航栏（黑色）的情况下，文本颜色为gray60。
.navbar-inverse .navbar-text {
color: #999;
}
So, you can change its color as you wish. However, I would recommend you to use a separate css file to change it.
因此，您可以根据需要更改其颜色。但是，我建议您使用单独的 css 文件来更改它。
NOTE: you could also use the customizerprovided by Twitter Bootstrap, in the Navbarsection.
注意：您还可以使用,部分中提供的定制器。Twitter BootstrapNavbar
回答by Dipendra Ghatal
You can use text classes:
您可以使用文本类：
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white
use text classes in any tag where needed.
在需要的任何标签中使用文本类。
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
You can add your own classes or modify above classes as your requirement.
您可以根据需要添加自己的类或修改上述类。
回答by Jakub Muda
There are few more classess in Bootstrap 4(added in recent versions) not mentioned in other answers.
有在几类新引导4（在最近的版本中添加的）在其他的答案没有提及。
.text-black-50and .text-white-50are 50% transparent.
.text-black-50并且.text-white-50是 50% 透明的。
.text-body {
color: #212529 !important;
}
.text-black-50 {
color: rgba(0, 0, 0, 0.5) !important;
}
.text-white-50 {
color: rgba(255, 255, 255, 0.5) !important;
}
/*DEMO*/
p{padding:.5rem}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<p class="text-body">.text-body</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>