我正在开发一个注册页面,通过把一些文本作为标题在导航栏。我想给这些文本赋予不同的颜色。为此,我使用了一个单独的CSS文件,但我想使用 Bootstrap 的CSS文件。谁能列出bootstrap中可用的颜色类?
kfgdxczn1#
bootstrap 3文档在helper classes下列出了这一点:Muted、Primary、Success、Info、Warning、Danger。bootstrap 4文档在utilities -> color下列出了这一点,并有更多选项:primary、secondary、success、danger、warning、info、light、dark、muted、white。bootstrap 5 documentation在utilities -> color下列出了这一点,并且有更多的选项:primary,primary-emphasis,secondary,secondary-emphasis,success,success-emphasis,danger,danger-emphasis,warning,warning-emphasis,info,info-emphasis,light,light-emphasis,dark,dark-emphasis,body,body-emphasis,body-secondary,body-tertiary、black、white、black-50、white-50。请注意,其中一些已弃用,将在下一版本中删除。要访问它们,请使用classtext-[class-name]所以,如果我想要主要的文本颜色,例如我会这样做:
Muted
Primary
Success
Info
Warning
Danger
primary
secondary
success
danger
warning
info
light
dark
muted
white
primary-emphasis
secondary-emphasis
success-emphasis
danger-emphasis
warning-emphasis
info-emphasis
light-emphasis
dark-emphasis
body
body-emphasis
body-secondary
body-tertiary
black
black-50
white-50
class
text-[class-name]
<p class="text-primary">This text is the primary color.</p>
这不是一个巨大的选择数量,但它是一些。
klh5stk12#
导航栏上的文本通常使用bootstrap.css文件中的以下两个css类之一来着色。首先,在使用默认导航栏(灰色的)的情况下,将使用.navbar-default类,并且文本的颜色为dark gray。
bootstrap.css
.navbar-default
.navbar-default .navbar-text { color: #777; }
另一种是在使用反向导航栏(黑色)的情况下,文本被着色为gray60。
.navbar-inverse .navbar-text { color: #999; }
你可以随心所欲地改变它的颜色。但是,我建议你使用单独的css文件来更改它。注意:您也可以使用Twitter Bootstrap提供的customizer,在Navbar部分。
Twitter Bootstrap
Navbar
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>
您可以根据需要添加自己的类或修改以上类。
roejwanj4#
在Bootstrap 4中(在最近的版本中添加)有一些在其他答案中没有提到的类。.text-black-50和.text-white-50是50%透明的。
.text-black-50
.text-white-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>
4条答案
按热度按时间kfgdxczn1#
bootstrap 3文档在helper classes下列出了这一点:
Muted
、Primary
、Success
、Info
、Warning
、Danger
。bootstrap 4文档在utilities -> color下列出了这一点,并有更多选项:
primary
、secondary
、success
、danger
、warning
、info
、light
、dark
、muted
、white
。bootstrap 5 documentation在utilities -> color下列出了这一点,并且有更多的选项:
primary
,primary-emphasis
,secondary
,secondary-emphasis
,success
,success-emphasis
,danger
,danger-emphasis
,warning
,warning-emphasis
,info
,info-emphasis
,light
,light-emphasis
,dark
,dark-emphasis
,body
,body-emphasis
,body-secondary
,body-tertiary
、black
、white
、black-50
、white-50
。请注意,其中一些已弃用,将在下一版本中删除。
要访问它们,请使用
class
text-[class-name]
所以,如果我想要主要的文本颜色,例如我会这样做:
这不是一个巨大的选择数量,但它是一些。
klh5stk12#
导航栏上的文本通常使用
bootstrap.css
文件中的以下两个css类之一来着色。首先,在使用默认导航栏(灰色的)的情况下,将使用
.navbar-default
类,并且文本的颜色为dark gray。另一种是在使用反向导航栏(黑色)的情况下,文本被着色为gray60。
你可以随心所欲地改变它的颜色。但是,我建议你使用单独的css文件来更改它。
注意:您也可以使用
Twitter Bootstrap
提供的customizer,在Navbar
部分。deyfvvtc3#
可以使用文字类:
在需要的地方在任何标签中使用文本类。
您可以根据需要添加自己的类或修改以上类。
roejwanj4#
在Bootstrap 4中(在最近的版本中添加)有一些在其他答案中没有提到的类。
.text-black-50
和.text-white-50
是50%透明的。