Bootstrap5 颜色


文字颜色

Bootstrap 5 有一些上下文类可用于提供"meaning through colors"。

文本颜色的类别有:.text-muted,.text-primary,.text-success,.text-info,.text-warning,.text-danger,.text-secondary,.text-white,.text-dark,.text-body(默认机身颜色/通常为黑色)和.text-light:

示例

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

Dark grey text.

Body text.

Light grey text.

亲自试一试 »

您还可以使用以下命令为黑色或白色文本添加 50% 的不透明度.text-black-50或者.text-white-50课程:

示例

Black text with 50% opacity on white background

White text with 50% opacity on black background

亲自试一试 »


背景颜色

背景颜色的类别有:.bg-primary, .bg-success,.bg-info,.bg-warning,.bg-danger,.bg-secondary,.bg-dark.bg-light

这个.bg-color上面的类不能很好地处理文本,或者至少你必须指定一个正确的.text-color类为每个背景获取正确的文本颜色。

但是,您可以使用.text-bg-color类和 Bootstrap 将自动处理每种背景颜色的适当文本颜色:

示例

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

亲自试一试 »