Bootstrap中可用的文本颜色类

时间:2014-02-01 07:08:03

标签: css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

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

任何人都可以在bootstrap中列出可用的颜色类吗?

4 个答案:

答案 0 :(得分:189)

bootstrap 3 documentation在辅助类下列出了这个: MutedPrimarySuccessInfoWarningDanger

bootstrap 4 documentation在实用程序下列出了这一点 - >颜色,并有更多选择: primarysecondarysuccessdangerwarninginfolightdark,{{ 1}},muted

要访问它们,请使用white class

所以,如果我想要蓝色文字,例如我会做这样的事情:

text-[class-name]

这不是一个大量的选择,但它是一些。

答案 1 :(得分:6)

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

首先,如果使用默认导航栏(灰色导航栏),将使用.navbar-default类,文本将显示为dark gray

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

另一种情况是使用反向导航栏(黑色),文本颜色为gray60

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

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

注意:您还可以使用Twitter Bootstrap部分Navbar提供的customizer

答案 2 :(得分:4)

您可以使用文字类:

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

您可以添加自己的类或修改上述类作为您的要求。

答案 3 :(得分:0)

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>