Bootstrap中可用的文本颜色类

to94eoyn  于 2023-09-28  发布在  Bootstrap
关注(0)|答案(4)|浏览(198)

我正在开发一个注册页面,通过把一些文本作为标题在导航栏。我想给这些文本赋予不同的颜色。为此,我使用了一个单独的CSS文件,但我想使用 Bootstrap 的CSS文件。
谁能列出bootstrap中可用的颜色类?

kfgdxczn

kfgdxczn1#

bootstrap 3文档在helper classes下列出了这一点:MutedPrimarySuccessInfoWarningDanger
bootstrap 4文档在utilities -> color下列出了这一点,并有更多选项:primarysecondarysuccessdangerwarninginfolightdarkmutedwhite
bootstrap 5 documentation在utilities -> color下列出了这一点,并且有更多的选项:primaryprimary-emphasissecondarysecondary-emphasissuccesssuccess-emphasisdangerdanger-emphasiswarningwarning-emphasisinfoinfo-emphasislightlight-emphasisdarkdark-emphasisbodybody-emphasisbody-secondarybody-tertiaryblackwhiteblack-50white-50
请注意,其中一些已弃用,将在下一版本中删除。
要访问它们,请使用classtext-[class-name]
所以,如果我想要主要的文本颜色,例如我会这样做:

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

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

klh5stk1

klh5stk12#

导航栏上的文本通常使用bootstrap.css文件中的以下两个css类之一来着色。
首先,在使用默认导航栏(灰色的)的情况下,将使用.navbar-default类,并且文本的颜色为dark gray

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

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

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

你可以随心所欲地改变它的颜色。但是,我建议你使用单独的css文件来更改它。
注意:您也可以使用Twitter Bootstrap提供的customizer,在Navbar部分。

deyfvvtc

deyfvvtc3#

可以使用文字类:

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

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

roejwanj

roejwanj4#

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>

相关问题