Bootstrap 中可用的文本颜色类

Question

我正在开发一个注册页面，在导航栏上放置一些文本作为标题。我想给这些文本赋予不同的颜色。为此，我使用单独的 CSS 文件，但我想使用 bootstrap 的 CSS 文件来完成此操作。

有人可以列出 bootstrap 中可用的颜色类别吗？

Answer 1

bootstrap 3 文档在帮助程序类下列出了这一点：

Muted

、

Primary

、

Success

、

Info

、

Warning

、

Danger

。

bootstrap 4 文档在实用程序 -> 颜色下列出了此内容，并有更多选项：

primary

、

secondary

、

success

、

danger

、

warning

、

info

、

light

、

dark

、

muted

、

white

。

。

bootstrap 5 文档在实用程序 -> 颜色下列出了此内容，并且有更多选项：

primary

,

primary-emphasis

,

secondary

,

secondary-emphasis

,

success

,

success-emphasis

,

danger

,

danger-emphasis

,

warning

,

warning-emphasis

,

info

,

info-emphasis

,

light 

，

light-emphasis

，

dark

，

dark-emphasis

，

body

，

body-emphasis

，

body-secondary

，

body-tertiary

，

black

，

white

，

black-50

，

white-50

。
请注意，其中一些已被弃用，并将在下一个版本中删除。

要访问它们，请使用

class

text-[class-name]

因此，如果我想要主要文本颜色，我会这样做：

<p class="text-primary">This text is the primary color.</p>

这不是很多选择，但也有一些。

Answer 2

导航栏上的文本通常使用

bootstrap.css

文件中的以下两个 css 类之一进行着色。

首先，如果使用默认导航栏（灰色导航栏），将使用

.navbar-default

类，并且文本颜色为 深灰色。

.navbar-default .navbar-text {
  color: #777;
}

另一种情况是使用反向导航栏（黑色），文本颜色为gray60。

.navbar-inverse .navbar-text {
  color: #999;
}

因此，您可以根据需要更改其颜色。但是，我建议您使用单独的 css 文件来更改它。

注意：您还可以使用 Twitter Bootstrap 部分中的

Navbar

提供的

customizer

。

Answer 3

您可以使用文本类：

.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white

在需要的任何标记中使用文本类。

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

您可以根据需要添加自己的类或修改上述类。

Answer 4

Bootstrap 4（在最近版本中添加）中还有一些其他答案中未提及的类。

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