Bootstrap中可用的文本颜色类


119

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

有人可以在引导程序中列出可用的颜色类别吗?


3
Bootstrap使用一种颜色#333333作为文本颜色。
Bindiya Patoliya'2

单独使用它吗?
fidel castro 2014年

但是您可以为不同的标签使用不同的标签。
Bindiya Patoliya'2

您能否解释一下,或者在可能的情况下放置链接
fidel castro 2014年

Answers:


195

引导3文档辅助类下的列表如下: MutedPrimarySuccessInfoWarningDanger

引导4文档水电费清单本- >颜色,并有更多的选择: primarysecondarysuccessdangerwarninginfolightdarkmutedwhite

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

因此,例如,如果我想要蓝色文本,则可以执行以下操作:

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

这不是很多选择,而是一些选择。


2
如果您“想要蓝色文本”,我会毫不犹豫地说。当您要应用原色(默认情况下恰好是蓝色)时,应使用该类。但是,如果$primary更改,那么您正式的蓝色文本也会更改。如果要确保始终有蓝色文本,则应将文本设置为所需的任何蓝色阴影。
jacroe19年

7

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

首先,如果使用默认的导航栏(灰色的导航栏),.navbar-default则将使用该类,并且文本将被着色为深灰色

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

另一种是在使用反向导航栏的情况下(黑色的),文本被着色为gray60

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

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

注意:您也可以在部分中使用提供的定制程序Twitter BootstrapNavbar


6

您可以使用文本类:

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

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


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>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.