Bootstrap 中可用的文本颜色类

我正在开发一个注册页面，在导航栏中放置一些文本作为标题。我想给这些短信涂上不同的颜色。为此，我使用一个单独的 CSS 文件，但是我想使用 bootstrap 的 CSS 文件。

有人能列出引导程序中可用的颜色类吗？

233890 次浏览
小开

导航栏中的文本通常使用 bootstrap.css文件中以下两个 css 类之一着色。

首先，在使用默认导航条(灰色的那个)的情况下，将使用 .navbar-default类并将文本着色为 深灰色。

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

另一种是在使用反向导航条(黑色的那个)的情况下，文本的颜色为 Gray 60。

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

所以，你可以随心所欲地改变它的颜色。但是，我建议您使用一个单独的 css 文件来更改它。

注意: 您也可以在 Navbar部分使用 Twitter Bootstrap提供的 定制服务。

小开
最佳答案

Bootstrap 3文档在 helper 类下列出了这一点: Muted，Primary，Success，Info，Warning，Danger.

Bootstrap 4文档在实用程序-> 颜色下面列出了这个选项，并且有更多的选项: primary，secondary，success，danger，warning，info，light，dark，muted，white.

To access them one uses the class text-[class-name]

所以，如果我想要的主要文本颜色，例如，我会这样做:

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

这不是一个巨大的选择，但它是一些。

小开

你可以使用文本类:

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

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

小开

在 鞋带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>


提交答案