Bootstrap 中可用的文本颜色类

Posted 2023-03-06

【中文标题】Bootstrap 中可用的文本颜色类

【英文标题】：Available text color classes in Bootstrap

【发布时间】：2014-02-25 01:02:27

【问题描述】：

我正在开发一个注册页面，将一些文本作为标题放在导航栏上。我想给这些文本不同的颜色。为此，我使用了一个单独的 CSS 文件，但我想使用引导程序的 CSS 文件来执行此操作。

任何人都可以列出引导程序中可用的颜色类吗？

【问题讨论】：

Bootstrap 使用一种颜色 #333333 作为文本颜色。

单独用这个？

但是你可以为不同的标签使用不同的标签。

你能解释一下吗？如果可能的话，把链接放上去

【参考方案1】：

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

首先，在使用默认导航栏（灰色）的情况下，将使用.navbar-default 类并将文本着色为dark gray。

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

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

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

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

注意：您也可以在Navbar 部分中使用Twitter Bootstrap 提供的customizer。

【参考方案2】：

bootstrap 3 documentation 将其列在辅助类下： Muted, Primary, Success, Info, Warning, Danger.

bootstrap 4 documentation 将其列在实用程序 -> 颜色下，并且有更多选项： primary、secondary、success、danger、warning、info、light、dark、muted、white。

要访问它们，请使用class text-[class-name]

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

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

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

【讨论】：

如果您“想要蓝色文本”，我会犹豫。当您想要应用原色时应该使用该类，默认情况下它恰好是蓝色。但是如果$primary 发生变化，那么您的正式蓝色文本也会发生变化。如果您想确保始终有蓝色文本，您应该将文本设置为您想要的任何蓝色阴影。

【参考方案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>

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

【参考方案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*/
ppadding:.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>